vime-menu-item

A multi-purpose interactable element inside a menu. The behaviour and style of the item depends on the props set.

  • Default: By default, the menu item only contains a label and optional hint/badge text that is displayed on the right-hand side of the item.
  • Navigation: If the menu prop is set, the item behaves as a navigational control and displays arrows to indicate whether clicking the control will navigate forwards/backwards.
  • Radio: If the checked prop is set, the item behaves as a radio button and displays a checkmark icon to indicate whether it is checked or not.

Visual

Vime settings menu item component

Usage

<vime-player>
<!-- ... -->
<vime-ui>
<!-- ... -->
<vime-settings>
<vime-menu-item label="Playback Quality" hint="Auto"></vime-menu-item>
</vime-settings>
</vime-ui>
</vime-player>

Properties

PropertyAttributeDescriptionTypeDefault
badgebadgeThis can provide additional context about the value of a menu item. For example, if the item is a radio button for a set of video qualities, the badge could describe whether the quality is UHD, HD etc.string ∣ undefinedundefined
checkedcheckedIf this item is to behave as a radio button, then this property determines whether the radio is selected or not. Sets the aria-checked property.boolean ∣ undefinedundefined
checkedIconchecked-iconThe URL to an SVG element or fragment to load.string ∣ undefined'#vime-checkmark'
expandedexpandedIf the item has a popup menu, this indicates whether the menu is open or not. Sets the aria-expanded property.boolean ∣ undefinedundefined
hiddenhiddenWhether the item is displayed or not.booleanfalse
hinthintThis can provide additional context about some underlying state of the item. For example, if the menu item opens/closes a submenu with options, the hint could be the currently selected option.string ∣ undefinedundefined
identifieridentifierThe id attribute of the item.string ∣ undefinedundefined
label (required)labelThe label/title of the item.stringundefined
menumenuIf the item has a popup menu, then this should be the id of said menu. Sets the aria-controls property.string ∣ undefinedundefined

CSS Custom Properties

NameDescription
--vm-menu-item-arrow-colorThe color of the left/right arrow on a navigational menu item.
--vm-menu-item-badge-bgThe background color of the badge.
--vm-menu-item-badge-colorThe color of the badge text.
--vm-menu-item-badge-font-sizeThe font size of the the badge text.
--vm-menu-item-check-icon-heightThe height of the checked icon.
--vm-menu-item-check-icon-widthThe width of the checked icon.
--vm-menu-item-divider-colorThe color of the divider between a navigational menu item and the menu body.
--vm-menu-item-focus-bgThe background color of a menu item when it is being focused or hovered on.
--vm-menu-item-focus-colorThe color of a menu item's text when it is being focused or hovered on.
--vm-menu-item-hint-colorThe color of the hint text.
--vm-menu-item-hint-font-sizeThe font size of the hint text.
--vm-menu-item-hint-opacityThe opacity of the hint text.
--vm-menu-item-paddingThe padding within each menu item.
--vm-menu-item-tap-highlightThe highlight color when a menu item is tapped.

Dependencies

Used by

Depends on

Graph

graph TD;
vime-menu-item --> vime-icon
vime-default-settings --> vime-menu-item
vime-menu-radio --> vime-menu-item
vime-submenu --> vime-menu-item
style vime-menu-item fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS