harmony 鸿蒙toolbar-item

2022-08-09
浏览 (808)

toolbar-item

NOTE

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

As a child component of <toolbar>, the <toolbar-item> component is used to display an operation option on the toolbar.

Child Components

Not supported

Attributes

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

Name	Type	Default Value	Mandatory	Description
value	string	-	Yes	Text content of the operation option.
icon	string	-	Yes	Icon image path, which is displayed on the option text. The value can be a local path. Supported image formats are PNG, JPG, and SVG.

Styles

Only the following styles are supported.

Name	Type	Default Value	Mandatory	Description
color	<color>	#e6000000	No	Font color.
font-size	<length>	16px	No	Font size.
allow-scale	boolean	true	No	Whether the font size changes with the system’s font size settings.
font-style	string	normal	No	Font style. Available values are as follows: - normal: standard font style - italic: italic font style
font-weight	number\|string	normal	No	Font weight. The number value must be an exact multiple of 100 ranging from 100 to 900. The default value is 400. A larger value indicates a bigger weight. Available values of the string type are lighter, normal, bold, or bolder.
text-decoration	string	none	No	Text decoration. Available values are as follows: - underline: An underline is used. - line-through: A strikethrough is used. - none: The standard text is used.
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.
background	<linear-gradient>	-	No	Background. This attribute supports gradient styles only and is not compatible with background-color or background-image.
background-color	<color>	-	No	Background color.
background-image	string	-	No	Background image. Currently, this attribute is not compatible with background-color or background. Both online and local image resources are supported.
background-size	- string - <length> <length> - <percentage> <percentage>	auto	No	Background image size. - The available values of the string type are as follows: - contain: extends the image to the maximum size so that its height and width are fully applicable to the content area. - cover: extends the background image to a large enough size so that it completely covers the background area. Some parts of the image may not be displayed in the background area. - auto: retains the original aspect ratio of the image. - Values of the <length> type: The two values are width and height of the background image. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default. - Values of the <percentage> type: The two values are width and height of the background image in percentage of the parent element. The first value indicates the width, and the second value indicates the height. If you only set one value, the other value is set to auto by default.
background-repeat	string	repeat	No	How a background image is repeatedly drawn. By default, a background image is repeated both horizontally and vertically. - repeat: The image is repeated along both the x-axis and y-axis. - repeat-x: The image is repeated along the x-axis. - repeat-y: The image is repeated along the y-axis. - no-repeat: The image is not repeated.
background-position	- string string - <length> <length> - <percentage> <percentage>	0px 0px	No	Position of the background image. - Values of the string type: If you set only one value, the other value is set to center by default. The two values define the horizontal position and vertical position, respectively. - left: leftmost in the horizontal direction. - right: rightmost in the horizontal direction. - top: top in the vertical direction. - bottom: bottom in the vertical direction. - center: center in the horizontal or vertical direction. - Values of the <length> type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0 0 in px (0px 0px). If you only set one value, the other value is set to 50%. - Values of the <percentage> type: The first value indicates the horizontal position, and the second value indicates the vertical position. For the upper left corner, the value is 0% 0%. For the lower right corner, the value is 100% 100%. If you only set one value, the other value is set to 50%. - Values of the <percentage> type and <length> type can be used together.
opacity	number	1	No	Opacity of an element. The value ranges from 0 to 1. The value 1 means opaque, and 0 means completely transparent.
display	string	flex	No	Type of the box containing an element. Available values are as follows: - flex: flexible layout - none: not rendered
visibility	string	visible	No	Whether to display the box containing an element. A hidden box still occupies layout space. (To remove the box, set the display attribute to none.) Available values are as follows: - visible: The box is visible. - hidden: The box is hidden but still takes up space. If both visibility and display are set, only display takes effect.

Events

The universal events are supported.

Methods

Not supported

Example

<!-- xxx.hml -->
<toolbar style="position : fixed; bottom : 0px;">
    <toolbar-item icon='common/Icon/location.png' value='Option 1'></toolbar-item>
    <toolbar-item icon='common/Icon/heart.png' value='Option 2'></toolbar-item>
    <toolbar-item icon='common/Icon/diamond.png' value='Option 3'></toolbar-item>
    <toolbar-item icon='common/Icon/heart.png' value='Option 4'></toolbar-item>
    <toolbar-item icon='common/Icon/heart.png' value='Option 5'></toolbar-item>
    <toolbar-item icon='common/Icon/heart.png' value='Option 6'></toolbar-item>
</toolbar>

progress-7