There a many ways to create Buttons
You can create a Button with almost any Block, the most used are
A button is essentially an Action triggered by a Tap Event
Because most Blocks have at least a Tap Event, most block can be used to create Buttons.
Each Block has different UI feature, depending on the kind of Button you want to create .
Use the 'Buttons' Tutorial App, available in your Dashboard
''Button' Tutorial app
Create a Button using a Text Block
Text Block are really convenient to create Buttons.
Enter the name of the Button, format the text - add background color etc.. - and attach a Tap Event.
Select 'Events' in the Block Editor to attach a Tap Event to your Text Block
Here we are showing the Button Tutorial App.That App has 2 actions associated to the Text Block Tap Event:
Set a Variable (where we store the Type of Block used as a button - for illustration -)
The standard 'Switch to another View' to go to a different view
Here we are showing the Button Tutorial App.That App has 2 actions associated to the Text Block Tap Event:Set a Variable (where we store the Type of Block used as a button - for illustration -)
The standard 'Switch to another View' to go to a different view
User Feedback with Text as a Button
It is easy to provide user feedback through a highlight when the user tap the Text block used as a button.
It's don't by changing the fill color with the 'Highlighted Fill Color' feature.
This is implemented in the Tutorial app 'Buttons'
In the right hand side Component Editor, select the 'General' tab.
It's don't by changing the fill color with the 'Highlighted Fill Color' feature.
This is implemented in the Tutorial app 'Buttons'
In the right hand side Component Editor, select the 'General' tab.
Pick a 'Highlighted Fill Color' of your choice
You can pick any Highlighted Fill Color to provide user feedback.
The main Benefit of using a Button Block is to have 2 different Image changing based on the user tapping the Button.
That gives useful user feedback and that creates a better UX experience.
The Button Block delivers 2 Events: Button Up and Button Down which let you programmatically differentiate between a Tap up or Down
In addition, the Button Blocks has a feature called 'Toggle'
Toggle let you create Button which behave like On / Off switch.
You often see them implemented with the following designs:
Learn more on how to use Button Block (including some Limitations)
Create a Button using an Image Block
To create a Button using an Image Block you simply attach the Action to the Image Block Tap Event.
When a user tap the Image the Actions attached to the Event will be triggered.
Create a Button using a Container
Containers are powerful UI component letting you replace one Block by another.
They can be used to create Buttons which need to switch say a Text by an image or maybe an Image by a Video.
In our Button Tutorial app we simply switch a Text Block by another but we certainly encourage you to be more adventurous.
In the 'Button' App we have simply swap one Text block by another.
When the user tap the button we set a time to wait for 2 seconds then we re-initialize the Button.
We set a Timer action to last 2 seconds and capture the Event at the View Level to reset the Container Block.
This is the setting of the View Level Event which reset the Container for the Button
Learn More