Help Center/ Huawei Cloud Astro Canvas/ User Guide/ Widgets/ Sting/ Drop-Down List Box
Updated on 2025-03-24 GMT+08:00
View PDF
Share

Drop-Down List Box

The drop-down list box is a type of text widget, which is used to select an item from the drop-down dialog box. The select consists of a select box and a drop-down dialog box.

On the large screen design page, drag the drop-down list box widget from All > Text to the blank area of the canvas, as shown in Figure 1.

Figure 1 Drop-down list box widget
Figure 2 Margin style

Card

A card wraps a chart widget. A widget consists of card elements (card title, chart, card background, and card border) and chart elements.

Figure 3 Drop-down list box card
  • Background
    • Background color: Background color of the widget card.
    • Border: Border of the widget card. Options: no border, full border, and corner border. For full border and corner border, you can set the line type and rounded corners of the outer border of the widget.
    • Style: Image display style. The options are normal, center, stretch, and tiled.
    • Choose image: Use a local image as the widget background. Directories and subdirectories can be added to facilitate image management by category. JPG, JPEG, PNG, or GIF images are recommended. The size of each image cannot exceed 50 MB.
  • Special effect: Widget highlighted status. Displayed by default or on page load.
  • Padding: Distance between the chart and the four sides (top, bottom, left, and right as shown in Figure 2) of the widget. The default value is 0, indicating that the chart stretches to fill the entire widget.

Configuration

On the configuration page, you can set the drop-down selection box and drop-down dialog box.

Figure 4 Drop-down list box configuration
  • Drop-down list box settings
    • Enable multi-selection: After this function is enabled, the default options can be customized.
    • Default selection: Default option in the drop-down list box.
    • Font: Font size and color for the drop-down list box.
    • Background color: Background color of the drop-down list box.
    • Border color: Default border color of the drop-down list box.
    • Border focus color: Color of the drop-down list box border when you select it.
    • Border floating color: Color of the drop-down list box border when you hover over it.
    • Placeholder: Text shown when no input is entered.
    • Disabled or not: Whether to disable the drop-down list box. After the drop-down list box is disabled, the option cannot be changed.
    • Can be entered: After this function is disabled, you can only select an option from the drop-down list box but cannot enter a keyword to search for an option.
  • Drop-down dialog box settings
    • Maximum height: Maximum height of the drop-down dialog box.
    • Background color: Background color of the drop-down dialog box.
    • Font color: Font color in the drop-down dialog box.
    • Background color in selected state: Background color of a selected option.
    • Font color in the selected state: Font color of a selected option.
    • Background color when the mouse is hovered: Background color of an option when you hover over it.
    • Font color when the mouse is hovered: Font color of an option when you hover over it.

Data

In the data settings, you can set the data source of the drop-down list box widget. For more information, see Data Access.

Interaction

In the interaction settings, you can configure interactions between the drop-down list box widget and other widgets or pages. For details, see Interaction Configuration.

Parent topic: Sting