Introduction

The search input component supports multiple types, sizes, and states. It is suitable for search scenarios at the top of a page or within a module. It supports clear, cancel, trailing custom icons, and search buttons. Its styling closely follows the design specification and supports internationalization and icon reuse.

Usage

Import it locally by configuring it in the index.json of the page or component where it is needed:

"usingComponents": {
  "search": "ava-ui/fxui/Search/index"
}

Code Demo

Category Demo

---

API

search Properties

Property	Description	Type	Accepted Values	Default
type	Type	string	plain/bordered	plain
size	Size	string	small/mini	small
value	Input value	string	—	''
placeholder	Placeholder	string	—	''
showClear	Show clear button	boolean	true/false	true
showCancel	Show cancel button	boolean	true/false	false
showSearch	Show search button	boolean	true/false	false
icon	Trailing custom icon	string	icon name	''
cancelText	Cancel button text	string	—	Cancel
searchText	Search button text	string	—	Search
placeholderStyle	Placeholder style	string	—	''
focus	Whether focused	boolean	true/false	false
maxlength	Maximum input length	number	—	140
isNative	Whether to use a native input box	boolean	true/false	false
confirmType	Confirm button type	string	—	search

Events

Event Name	Description	Callback Parameters
input	Input content changes
clear	Clear button is tapped	—
cancel	Cancel button is tapped	—
search	Search button is tapped
focus	Input box focused	e.detail
blur	Input box blurred	e.detail
clickIcon	Custom icon tapped	e.detail

---

Category Description

Type

• Borderless (plain): suitable for light backgrounds, with a simple style.
• Bordered (bordered): suitable for scenarios that require separation or emphasis on the input area.
• A trailing custom icon can be set through the icon property, such as voice or scan.

Size

• small: 32px height, 16*16 icon, 14px font size.
• mini: 28px height, 14*14 icon, 13px font size.

Buttons

• Supports clear button (showClear), cancel button (showCancel), custom icon, and search button (showSearch).
• The search button and trailing custom icon can exist at the same time. The specific style follows the design specification.

States

• Multiple states such as default, focused, and input each have corresponding styles.

---

Design Notes

• Supports two types: plain and bordered, and two sizes: small and mini.
• Supports clear, cancel, search buttons, and a trailing custom icon.
• Supports multiple states such as focused and input.
• Icons uniformly use the avaui-tdesign/icon component.
• Internationalized text is obtained through fsapi.i18n.get.
• Supports external style classes for easier extension.
• The structure is clear and easy to maintain.

---

Preview

打开预览