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

Tree-Structured Drop-Down List

The tree-structured drop-down list is a drop-down list box with a hierarchical tree structure, typically used in cascading scenarios with limited options.

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

Figure 1 Tree-structured drop-down list 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 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.
  • Reference template: The system presets single-choice and multi-choice templates for you. Select a template based on the actual service scenario.

Configuration

You can set the drop-down selection box and pop-up box.

Figure 4 Configuration
  • Drop-down list box settings
    • Enable multiple options: Whether to allow selecting multiple items.
    • Default option: The default option in the drop-down list. Click the button to add multiple default options. Required only when you enable the multiple option function.
    • Default option: The default option in the drop-down list. Required only when you disable the multiple option function.
    • Expand style: Expansion style of the options in the drop-down list box.
    • Font: Font size and color of the text in the drop-down list.
    • 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 selected.
    • Border hover color: Color of the drop-down list box border when hovered.
    • Placeholder: Text shown when no input is entered.
    • Disable: Whether to disable the drop-down list box. After the drop-down list box is disabled, users cannot select content.
    • Whether to allow input: After this function is disabled, users can only select a value from the drop-down list box.
  • Drop-down dialog box settings
    • Max. height: Maximum height of the drop-down list.
    • Background color: Background color of the drop-down list box.
    • Font color: Font color of the drop-down list box.
    • Selected status background color: The background color of a selected option.
    • Selected font color: Font color of a selected option.
    • Hover background color: Background color of an option when the mouse is hovered over it.
    • Hover font color: Font color of an option when the mouse is hovered over it.

Data

In the data settings, you can set the data source of the dropdown tree widget. For more information, see Data Access.

Interaction

In the interaction settings, you can configure interactions between this widget and other widgets or pages. For details, see Interaction Configuration.

Parent topic: Sting