ant-design/docs/pattern/advanced-search.en-US.md
2017-06-20 19:45:09 +08:00

2.3 KiB
Raw Blame History

order title
6 Advanced Search

With Advanced Search, users can narrow down the range of complex lists / tables.


Conventions

Interaction

Interactive examples

Conventionally used with deep tables, suitable for search conditions as well as searching for a number of unknown values within a range.

Advanced search is generally used by intermediate / expert users, typically by clicking advanced search. If you are displaying complex data, you can expand advanced search by default.


Interactive examples" description="Place an Alert to show the value that has already been entered; the user can click "Clear" to empty all the input values. Click advanced search to expand Advanced Search again.

When an advanced search - with an entered a value - is hidden, you should display the search criteria and values.

Arrangement

Arrangement Example

The order of the search criteria should be the same as the order of the titles in the table, and frequently used search conditions can be placed at the top.

Specifications

Specification Example Specification Example
  • Landscape layout

Try not to place more than three columns of input boxes on one line. All Labels and input boxes should fall on the grid.

  • Vertical layout

Use 16px for vertical margins.

Field Type

Interaction

Interactive Example

Field types usually appear at the bottom of the main search box. This is suitable when search conditions and values are relatively small in the display.