MenuItem
The MenuItem component represents an item in a menu.
NOTE
This component is supported since API version 9. Newly added APIs will be marked with a superscript to indicate their earliest API version.
Child Components
Not supported
APIs
MenuItem(value?: MenuItemOptions| CustomBuilder)
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | MenuItemOptions | CustomBuilder | No | Information about the menu item. |
MenuItemOptions
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
| Name | Type | Mandatory | Description |
|---|---|---|---|
| startIcon | ResourceStr | No | Path to the icon displayed on the left of the menu item. |
| content | ResourceStr | No | Content of the menu item. |
| endIcon | ResourceStr | No | Path to the icon displayed on the right of the menu item. |
| labelInfo | ResourceStr | No | Information about the ending label, for example, shortcut Ctrl+C. |
| builder | CustomBuilder | No | Builder for a level-2 menu. |
| symbolStartIcon12+ | SymbolGlyphModifier | No | Path to the symbol icon displayed on the left of the menu item. When this parameter is set, the icon set through startIcon is not displayed. Atomic service API: This API can be used in atomic services since API version 12. |
| symbolEndIcon12+ | SymbolGlyphModifier | No | Path to the symbol icon displayed on the right of the menu item. When this parameter is set, the icon set through endIcon is not displayed. Atomic service API: This API can be used in atomic services since API version 12. |
Attributes
In addition to the universal attributes, the following attributes are supported.
selected
selected(value: boolean)
Sets whether the menu item is selected.
Since API version 10, this parameter supports two-way binding through $$.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | boolean | Yes | Whether the menu item is selected. Default value: false |
selectIcon
selectIcon(value: boolean | ResourceStr | SymbolGlyphModifier)
Sets whether to display the selected icon when the menu item is selected.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | boolean | ResourceStr10+| SymbolGlyphModifier12+ | Yes | Whether to display the selected icon when the menu item is selected. Default value: false true: When the menu item is selected, the default tick icon is displayed. false: When the menu item is selected, no icon is displayed. ResourceStr: When the menu item is selected, the specified icon is displayed. SymbolGlyphModifier: When the menu item is selected, the specified symbol icon is displayed. |
contentFont10+
contentFont(value: Font)
Sets the font style of the menu item content.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | Font | Yes | Font style of the menu item content. |
contentFontColor10+
contentFontColor(value: ResourceColor)
Sets the font color of the menu item content.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | ResourceColor | Yes | Font color of the menu item content. Default value: '#E5000000' |
labelFont10+
labelFont(value: Font)
Sets the font style of the menu item label.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | Font | Yes | Font style of the menu item label. |
labelFontColor10+
labelFontColor(value: ResourceColor)
Sets the font color of the menu item label.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| value | ResourceColor | Yes | Font color of the menu item label. Default value: '#99000000' |
Events
onChange
onChange(callback: (selected: boolean) => void)
Triggered when the selection status of the menu item is changed manually.
Atomic service API: This API can be used in atomic services since API version 11.
System capability: SystemCapability.ArkUI.ArkUI.Full
Parameters
| Name | Type | Mandatory | Description |
|---|---|---|---|
| selected | boolean | Yes | Invoked when the selected status changes. If the return value is true, the menu item is selected. If the return value is false, the menu item is not selected. |
Example
See the example of Menu.