Overview

The search box allows users to efficiently find the target content through keywords from a large amount of information.

Type

Open search box: Currently, only an open search box is provided, directlypresenting the search input box.

Usage

Principle

The search is generally located at the bottom of the navigation bar, which is convenient for users to search at any time during the process of browsing or switching tabs. Click the activation search box and exit the activation status by clicking the “Cancel” button.

Display Status

There are3 kinds of status: inactivated, activated, and entered.
Inactivated: input box, search icon, preset text;
Activated: input box, search icon, preset text, cancel;
Entered: input box, search icon, input text, clear icon, cancel.

Detailed description

16pt；Input box: the height is 36pt, and the width can be adjusted with the combination style. The spacing between the input box and the screen is 16pt, and the spacing between the “Cancel” and “Return” buttons is 16pt.
Search icon: The icon size is 16p. The spacing is 12pt from the icon to the right side of the input box. And the spacingfrom the tool tip text or input text on the left to the icon is 8pt. Preset text: It is is 8pt from the search icon on the left with 14ptfont size.
Cancel:The cancel buttonis 16pt in font size, which is 16pt from the right side of the screen, with spacing of 16ptfrom the left input box;
Return: The return icon is 24pt in size, which is 12pt from the left side of the screen, and 12ptfrom the right input box.