List Menu - CSS API Reference

All Common CSS variables:

Specific CSS variables for List Menu styling:

• --smart-list-menu-default-width: ListMenu default width.
• --smart-list-menu-default-height: ListMenu default height.
• --smart-list-menu-filter-input-vertical-offset: Defines vertical offset of the ListMenu's filter input.
• --smart-list-menu-filter-input-horizontal-offset: Defines horizontal offset of the ListMenu's filter input.

The following CSS selectors can be used to style List Menu:

• smart-list-menu - applied to the whole ListMenu element. Can be used for setting width, height and border-, color- and font-related CSS properties.
  • .smart-container - the container that holds all of the internals of the element. Shoudn't be used for styling.
    • .smart-hamburger-icon - applied to the ListMenu's hamburger icon that appears when the element is minimized.
      • .smart-hamburger-icon-line .smart-hamburger-icon-line-top - one of the three lines used for the 'Hamburger' icon.
      • .smart-hamburger-icon-line .smart-hamburger-icon-line-center - one of the three lines used for the 'Hamburger' icon.
      • .smart-hamburger-icon-line .smart-hamburger-icon-line-bottom - one of the three lines used for the 'Hamburger' icon.
      • .smart-hamburger-icon-custom-container - applied to the container of the custom minimize icon (visible when the property minimizeIconTemplate is set).
    • .smart-list-menu-view - applied to the main ListMenu view. When the element is minimized, it acts as a dropdown.
      • .smart-list-menu-view-minimized - applied to the main ListMenu view when the element is minimized.
      • .smart-header - applied to the ListMenu header.
        • smart-button - represents the "back" button in the header.
          • .smart-arrow .smart-arrow-left - used for the icon of the button.
        • .smart-title - appied to the title in the header.
      • .smart-list-menu-filter-input - applied to the filter input.
      • .smart-menu-scroll-button .smart-spin-button .smart-scroll-button-near - applied to ListMenu top scroll button.
        • .smart-arrow .smart-arrow-up - a container for the actual icon of the button.
      • .smart-menu-scroll-button .smart-spin-button .smart-scroll-button-far - applied to ListMenu bottom scroll button.
        • .smart-arrow .smart-arrow-down - a container for the actual icon of the button.
      • .smart-menu-main-container - applied to the container of smart-menu-item and smart-menu-items-group elements.
        • smart-menu-items-group - custom element that represents an HTML and a logical container of Menu items.
          • .smart-menu-item-label-element - applied to the label of the items group.
          • .smart-menu-items-group-arrow - applied to the arrow of the items group.
        • smart-menu-item - custom element that represents a Menu item.
          • .smart-menu-item-label-element - applied to the label of the item
          • .smart-menu-item-shortcut - applied to the helper label of the item, that can be used to indicate a helper text, such as a keyboard shortcut.
      • .smart-loader-container - applied to the container for the loading indicator.
        • .smart-loader - applied to the loading indicator.
        • .smart-loader-label - applied to the label for the loading indicator.

Demo

<style>
        #listmenu{
                --smart-color: #ccc;
                --smart-font-size: 20px;
        }
</style>