Tabris.js Widgets: Button
In this article, we will take a look at the Button widget in Tabris.js, how it is used, the various properties and events associated with it. Buttons have become an essential widget in most applications; it gives you a clue that once an action or event (click or tap) is fired on it, other events are going to be triggered. Now let’s boil down to button in Tabris.js itself.
To work with the button widget in Tabris.js, you need to import “Button” from Tabris.js same as importing other widgets.
|
1 |
const {Button} = require('tabris'); |
We then create a new button and assign it the following properties:
|
1 2 3 4 |
new Button({ left: 10, top: 10, text: 'My Button' }) |
This will create a new button with the label My Button, and when you run this, there is no way you are going to see your button in your app’s view. So, we need to append it to a contentView which is also imported from Tabris.js. Ok, let’s modify our import line to this:
|
1 |
const {Button, contentView} = require('tabris'); |
Then our button code to this:
|
1 2 3 4 |
new Button({ left: 10, top: 10, text: 'My Button' }).appendTo(contentView); |
Now, once we serve our sample code to the developer app, we are going to see a nice button rendered in our app’s view.
Your full source code should now look like this:
|
1 2 3 4 5 6 |
const {Button, contentView} = require('tabris'); new Button({ left: 10, top: 10, text: 'My Button' }).appendTo(contentView); |
Let’s look at the properties of the button widget next.
A property like the alignment deals with how the text displayed on the button is being aligned horizontally. We can use left, right, and center for the values but note, the default alignment for the button is center.
Moreover, we can display an image in the button by adding the image property and setting the value as a string specifying the path to the image in the project directory. Example:
|
1 |
image: 'resources/pathtoimage.png' |
We can also change the color of the text by adding the textColor property, which is assigned to a color name or hexadecimal color code or rgba colors. All these values must be in a string.
The left and top properties of value 10 move the button 10 pixels away from the left and top edge of the screen.
As we all know that buttons trigger actions (events) once clicked or tapped. We can do so in Tabris.js by adding a select event to the button, so let’s modify our button code to look like this.
|
1 2 3 4 5 |
new Button({ left: 10, top: 10, text: 'My Button' }).on({'select': ({target}) =>{target.text = 'You tapped me!'}}) .appendTo(contentView); |
The code above will change the text of the button to You tapped me! once the button is tapped.
target refers to the widget the action is fired on, so here the target is button.
Moreover, we can style our button to look nicer by using the style property, which takes the following values: elevation,outline,flat and text. The default style set for the button is elevation
|
1 2 3 4 5 |
new Button({ left: 10, top: 10, text: 'My Button' }).on({'select': ({target}) =>{target.text = 'You tapped me!'}}) .appendTo(contentView); |
Scan the QR code below to preview the project in your developer app.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
