![]() ![]() These will give you draggable groups that have a condition on them called ‘When X is dragged’. There is a Bubble-made plugin called Draggable Elements you can add to your project. Depending on how much you will need backend workflows or API connections it should be possible to get pretty far on your MVP with the free plan. I think you should be able to achieve most of what you are hoping to build with Bubble without needing to buy plugins, although I’m not completely certain about all your requirements. Here’s some feedback from my experience with Bubble - hope it helps! Thanks for taking the time to read all this and for any feedback! I am not a super technical person, so I wanted to check if the below would be decently easy within Bubble’s built in features or one-time purchase plug-ins, etc.Ī): Drag as an event trigger (separate and in addition to click.)ī): Hold down, as an event trigger (separate and in addition to click)Ĭ): Hovering as an event trigger (separate and in addition to click)ĭ): An Action that would move a static image around the page in a way that would simulate an animation (For example, move a transparent background image of a duck in front of an image of water.)Į): Can the user of the web app select an image from among a group, drag and drop it onto a page, save that page, and it will be in the same place the next time they log in?į): Can they drag and drop an image and in doing so, displace other images? For example, if there is a row that contains a circle, square, and triangle, could they drop a rectangle between the circle and the square, and displace the square and triangle to the right? Then, if they deleted the rectangle later, could the square and triangle move back to the left? ![]() I have built a somewhat detailed wireframe in Justinmind, but now want to move to creating a public facing, functional MVP.īefore investing the time to learn Bubble, I wanted to check if has the functionality for what I am trying to do. With Variables, you can take your wireframes to the next level and build lifelike prototypes.Hello, I have just signed up for Bubble. You can use variables to store and transfer information like text, images, or data across screens in your prototype. For example, you can take a name typed in an Input Text Field and show that same name in a Text element on another screen. Look to the Variables palette and click the ‘+’ button to create a new variable in your prototype. If you don’t see the Variables palette, make sure it’s checked to be visible in the Window menu. When you create a new variable, you’ll be able to define its default value. Most often, you’ll want to leave this blank. Drag and drop: Drag the element you’d like to give the value to the variable to the Variable’s palette.To change the value of a variable during simulation, you’ll need to use events. ![]() As an example, drag an Input Text Field to the Variables palette. The Events palette: You can also manually create the events to give a variable a value with the Events palette.This creates an On Page Unload + Set Value event automatically, which transfers whatever’s in the input text field to the variable when you go to another screen. ![]() You’ll see a dropdown labeled ‘Choose Trigger’.Go to the Events palette and click ‘Add event’.Select the element you’d like to give the variable a value.This is useful for when you’ll want to define a variable’s value in another way, like after focusing out of an input text field or clicking on a button. Click on that and pick a trigger which will start the event. You’ll see a preview of the Canvas appear next with two radio buttons – ‘Elements’ and ‘Variables’.Select Set Value to an element from the ‘Choose Action’ dropdown.As an example, pick the On Focus Out trigger. You’ll now see the Value Expression builder, which is where you can define what value you’ll give to the variable.Click on the ‘Calculated’ radio button and then tap the ‘Add expression’ text link.īelow, you can find where you’ll define the value to give the variable.Click on the ‘Variables’ radio button and choose a variable you previously created from the list. Click ‘OK’ to finish building the expression and the event.Drag and drop the input text field from the Canvas preview to the open space in the expression that reads “Click to edit or drag & drop a component”. This event transfers whatever’s entered in the input text field over to the variable when you click out of the input text field. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |