A tile button is a type of interactive widget that allows you to customize the color, size, label content, and background of a list in various states. You can configure a tile button to work with other widgets and display the configured content in a visual chart. This topic describes how to add and manage a Tile Button widget. The Tile Button widget is used as an example.
Prerequisites
A data dashboard is created. For more information, see create a Visualization Screen task.
The flip widget is added. For more information, see Tender flip.
TensorBoard
Add a tile button control
On the dashboard edit page, click Interactive in the top navigation bar to add a tile control.
Click Select Dataset and follow the instructions in the following figure to add data as the parameter source and bind the layer controlled by the parameter. The updated interaction diagram is as follows:
You can also perform the following operations on the data:
Configure multiple field formats. For more information, see Configure multiple field formats.
Configure field filtering. For more information, see Filter data.
Add an interactive component (③).
Switch a dataset. For more information, see Switch a dataset.
Edit a dataset. For more information, see Edit a dataset.
Create a calculated field and a grouping dimension. For more information, see Create a calculated field and Create a grouping dimension.
Copy fields. For more information, see Copy and convert fields.
Tile Button Style Configuration
Location and size
You can configure the components in the configuration section as follows:
Adjust the alignment of components: supports left alignment, center alignment, and right alignment.
Adjust the size of the widget: Use the upper-left corner as the origin, set the values of the X and Y axes, and adjust the position.
Adjust the angle of the widget: Set the value of the rotation angle.
Resize the widget: Set the values of W and H to adjust the width and height of the widget.
Lock the component: After locking the component, you will not be able to adjust the size and position of the component.
Tile Layout
You can configure the components in the configuration section as follows:
Adjust the horizontal alignment of the widget: supports left, center, and right alignment.
Adjust the button of a widget: You can adjust the spacing and width of buttons.
Default button state
You can configure the widget text in the configuration section as follows:
Adjust the font style of the widget text: You can set the font, color, font size, bold, and oblique text.
Adjust the background of a widget: You can set the background fill color of a widget.
Adjust the border of a widget: You can set the style, color, and width of the widget border.
Adjust the corner radius of a widget: You can set the corner radius of the widget border.
Selected Status
In the configuration section, you can set the selected button as follows:
Adjust the font style of the selected button: You can set the font, color, font size, bold, and tilt of the text.
Adjust the background of the selected button: You can set the background fill color of the widget.
Adjust the border of the selected button: You can set the style, color, and width of the widget border.
Adjust the corner radius of the selected button: You can set the corner radius of the widget border.
Carousel playback is supported.
You can set the rotation of the tile button and the time interval.
Feature
You can set the dimension value of the tile button.