harmony 鸿蒙search

search

NOTE

This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.

The <search> component provides an input area for users to search.

Not supported

In addition to the universal attributes, the following attributes are supported.

Name	Type	Default Value	Mandatory	Description
icon	string	-	No	Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG.
hint	string	-	No	Hint text.
value	string	-	No	Text in the search box.
searchbutton⁵⁺	string	-	No	Text on the search button at the end of the search box.
menuoptions⁵⁺	Array<MenuOption>	-	No	Menu options displayed after users click the More button.

Table 1 MenuOption⁵⁺

Name	Type	Description
icon	string	Path of the icon for a menu option.
content	string	Text content of a menu option.

In addition to the universal styles, the following styles are supported.

Name	Type	Default Value	Mandatory	Description
color	<color>	#e6000000	No	Font color of the search box.
font-size	<length>	16px	No	Font size of the search box.
allow-scale	boolean	true	No	Whether the font size changes with the system’s font size settings. If the config-changes tag of fontSize is configured for abilities in the config.json file, the setting takes effect without application restart.
placeholder-color	<color>	#99000000	No	Color of the hint text.
font-weight	number \|string	normal	No	Font weight. For details, see font-weight of the <text> component.
font-family	string	sans-serif	No	Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified custom font is used for the text.
caret-color⁶⁺	<color>	-	No	Color of the caret.

In addition to the universal events, the following events are supported.

Name	Parameter	Description
change	{ text:newText }	Triggered when the content entered in the text box changes. If you change the value attribute directly, this event will not be triggered.
submit	{ text:submitText }	Triggered when users click the search icon or the search button⁵⁺, or tap the search button on a soft keyboard.
translate⁵⁺	{ value: selectedText }	Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.
share⁵⁺	{ value: selectedText }	Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.
search⁵⁺	{ value: selectedText }	Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.
optionselect⁵⁺	{ index:optionIndex, value: selectedText }	Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the menuoptions attribute is set. The option index and selected text content are returned.

The universal methods are supported.

<!-- xxx.hml -->
<div class="container">
    <search hint="Enter keywords" searchbutton="Search" @search="search">
  </search>
</div>

/* xxx.css */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

en-us_image_0000001153427082

0 赞

所属分类： 后端技术
本文标签：
版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/2985bbdf156843459667796bcf5058c6