All Products
Search
Document Center

Quick BI:tile button

Last Updated:Sep 26, 2023

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

TensorBoard

3.gif

Add a tile button control

  1. On the dashboard edit page, click Interactive in the top navigation bar to add a tile control. 添加平铺按钮

  2. 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: 字段设置

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. 功能