After the query conditions are set, you can set the display style of the query control in Style. This topic describes how to configure the style of a query control.
You can enter a keyword in the search box at the top of the Style Configuration section to search for configuration items.
Click the 
icon to Expand /Collate All Categories.
PC-side configuration
IE 11 browser settings for font (size, color, etc.), border, background color, and spacing do not take effect.
In the Title&Card section, configure Title and Component.
Parameter/Option
Title
You can specify whether to display the title and configure the style of the title.
Support setting line separator.
Component container
You can set Custom Background Fill (①), Fillet (②), and Inner Spacing (③).
In the Location and Layout section, configure the following settings.
Parameter/Option
Position of the control on the page
You can select Default or Global Top. If you select Global Top, the control is always at the top of the page when you slide the page.
Expand all filter conditions by default
You can set the Default Expand All Filter parameter.
Card Height
If you select Default Expand All Filter, you can set Card Height to Adaptive Height or Manual.
Manual setting: drag adjustment. After the height is exceeded, the vertical scroll bar is displayed. When the height is manually set, all filter conditions cannot be folded.
Conditional Arrangement
You can set Conditional Arrange to Horizontal or Vertical.
Horizontal:
Vertical:
Condition in Container
Align Left, Align Center, and Align Right are supported.
Conditional Spacing
Conditional spacing is supported.
In the Conditions section, configure the following settings:
Parameter/Option
Marquee Style
The marquee style supports Fill, Wireframe, and Simple.
Background color
You can set the background color of the conditional marquee.
Borders
You can set the border thickness and color of the conditional marquee.
Fillet
You can set the size of rounded corners for conditional marquee.
Text
You can set the text color and font size of the conditional marquee.
Custom Condition Style
You can customize the style of a single query condition based on the display type of the query condition.
NoteIf the object is duplicated, the custom style overwrites the common style above. You can choose Reset to restore the default.
If you set the display type to Drop-down List, Text Input Box, Value Input Box, Tree Drop-down, or Date Selection, you can set the Option Width, Background Color, Border, Fillet, and Text Color for each condition.
If you set Display Type to Drop-down List, you can select Tiles or Fixed List.
If you set the Type property to Tile Option, you can set the Maximum Display Number, Selected, and Unselected parameters.
If you set the Type parameter to Fixed List, you can set the Default Display Options parameter.
If you set Display Type to Date Selection and set Date Condition to Shortcut Interval, you can select Drop-down List and Tile Options to drop down or tile different types of intervals.
NoteThe Tile button style only supports five shortcut options.
The drop-down list allows you to set the style of the entire marquee.
The Tile Options section allows you to set the style of Shortcut Tile and Date Selection.
Fast Interval Tiling
Date Selection
You can specify whether to display the Condition Name and configure the position, text, and spacing between the condition name and the marquee.
Parameter/Option
Position
The position of the condition name is above or left. If you set the value to Top, the supported alignment modes are Left Align, Center Align, and Right Align.
Text
Supports setting the text style of the condition name.
Distance from marquee
You can set the condition name and the marquee spacing.
In the Button section, you can configure the Button Display, Button Position, Button Color, Button Round, and Text styles.
Parameter/Option
Button Display
NoteThe Reset and Clear buttons appear only when Clear and Show are selected configuration items the button display.
Reset: indicates that the filter is restored to the default settings.
Clear: indicates that the filter is cleared.
For example, if Filter Bar A is cascaded with Filter Bar B, Filter Bar A is the upper level of Filter Bar B. If Filter Bar A is reset or cleared, Filter Bar B is also reset or cleared. If Filter Bar B is reset or cleared, Filter Bar A does not change.
Button Position
You can select Default, Conditions Right, Conditions Below, and Conditions Following.
Condition Right
Under Conditions
Follow Conditions
If you select Condition Right or Condition Below, you can select Left, Center, or Right.
Button Color
You can set the Button Color.
Button Fillet
You can set Button Fillet.
Text
The text style of the button.
Mobile client style configuration
In the Title&Card section, configure Title and Component.
Parameter/Option
Title
You can set Show Main Title and configure the title style.
Support setting line separator.
Component container
You can set Custom Background Fill (①), Fillet (②), and Inner Spacing (③).
In the Location and Layout section, configure the following settings.
Parameter/Option
Position of the control on the page
You can select Default or Global Top. If you select Global Top, the control is always at the top of the page when you slide the page.
Condition in Container
Align Left, Align Center, and Align Right are supported.
Conditional Spacing
Conditional spacing is supported.
In the Conditions section, configure the following settings:
Parameter/Option
Marquee Style
The marquee style supports Fill, Wireframe, and Simple.
Background color
You can set the background color of the conditional marquee.
Borders
You can set the border thickness and color of the conditional marquee.
Fillet
You can set the size of rounded corners for conditional marquee.
Text
You can set the text color and font size of the conditional marquee.
Custom Condition Style
You can customize the style of a single query condition.
NoteIf the object is duplicated, the custom style overwrites the common style above. You can choose Reset to restore the default.
Drop-down list
You can set the Background Color, Border, Fillet, and Text parameters.
You can set the drop-down option style to List Options or Tile Options and set the number of columns or rows to display.
Tile Options
You can specify the Fillet, Selected, and Unselected styles.
Supports setting the number of options to display in a row.
Fixed List
You can set Background Color, Border, Fillet, and Text.
Supports setting the number of selected columns.
Date selection
If you turn on Shortcut Interval for a date condition, you can select Drop-down List or Tile Options.
You can set the background color, border, rounded corner, and text styles for the drop-down list.
The Tile Options section allows you to set the style of Shortcut Tile and Date Selection.
NoteThe Tile button style only supports five shortcut options.
You can set the Fillet, Selected, and Unselected styles for Shortcut Tiles.
You can set the Background Color, Border, Fillet, and Text styles for Date Selection.
Set Date to Single Date, such as Single Year, Single Day, Single Month, or Single Week, or Set Interval Type to Start At or End At. You can set Arrow Position.
Input box
You can set the background color, border, rounded corner, and text styles for text input boxes and numeric input boxes.
Tree drop
You can set Background Color, Border, Fillet, and Text.
Supports setting the number of selected columns.
You can specify whether to display the Condition Name and configure the position, text, and spacing between the condition name and the marquee.
Parameter/Option
Position
The position of the condition name is above or left. If you set the value to Top, the supported alignment modes are Left Align, Center Align, and Right Align.
Text
Supports setting the text style of the condition name.
In the Button section, you can set the Button Display, Button Color, and Text Font Size.
