MenuItemDisplay

The default content for a <MenuItem>

Code

<script lang="ts">
  import { MenuItemDisplay } from '@geoffcox/sterling-svelte';
</script>

<MenuItemDisplay>
  sterling-svelte
</MenuItemDisplay>

Members

Property Name	Type	Default	Comment
checked	boolean	false	When true, displays the menu item as checked.
disabled	boolean	false	When true, displays the menu item as disabled.
hasChildren	boolean	false	When true, displays the menu item as a parent of children.
isMenuBarItem	boolean	false	When true, displays the menu as a top level menu bar item.
menuItemRole	MenuItemRole	'menuitem'	The role of the menu item.
variant	string	''	Additional class names to apply

Considerations

Includes HTMLDivElement props, event, and methods

Anatomy

<div class="sterling-menu-item-display">
  <div class="check" />
  <div class="content">
    <slot {checked} {disabled} {hasChildren} {isMenuBarItem} {menuItemRole} {variant} />
  </div>
  <div class="shortcut">
    <slot name="shortcut" {checked} {disabled} {isMenuBarItem} {menuItemRole} {variant} />
  </div>
  <div class="chevron" />
</div>