ListMenu CSS Styling

Smart.ListMenu represents a custom element which can be used to choose an option from a nested list of items. Navigation through the nested list is done in a single view.

Required files

Smart.ListMenu requires the following scripts to be referenced on a page in order for the custom element to be successfully registered and to work correctly:

  • smart.element.js -- this is the base file that defines the common architecture of all Smart custom elements. It is part of the repository ni-kismet/smart-element.
  • smart.menu.js -- this file defines the main functionality of the Smart.Menu custom element which Smart.ListMenu extends.
  • smart.listmenu.js -- this file defines the main functionality of the Smart.ListMenu custom element.
  • smart.button.js -- this file contains the smart-repeat-button custom element. The scroll buttons of Smart.ListMenu are instances of smart-repeat-button.

Smart.ListMenu also requires the following style sheets in order to be displayed correctly.

  • smart.base.css -- the base style sheet file.

Initialization

To initialize (instantiate) an empty Smart.ListMenu custom element, insert the following tag in an HTML page:

<smart-list-menu></smart-list-menu>

To initialize a populated Smart.ListMenu custom element, insert the required inner structure consisting of the auxiliary custom elements smart-menu-item and smart-menu-items-group, e.g.:

<smart-list-menu>
    <smart-menu-items-group>
        File
        <smart-menu-item shortcut="Ctrl+N">New</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+0">Open</smart-menu-item>
        <smart-menu-items-group>
            Open Containing Folder
            <smart-menu-item>Explorer</smart-menu-item>
            <smart-menu-item>cmd</smart-menu-item>
        </smart-menu-items-group>
        <smart-menu-item shortcut="Ctrl+S" disabled>Save</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+Alt+S" separator>Save As...</smart-menu-item>
        <smart-menu-item shortcut="Alt+F4">Exit</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group>
        Help
        <smart-menu-item>About</smart-menu-item>
        <smart-menu-item>Help center</smart-menu-item>
        <smart-menu-item>Feedback</smart-menu-item>
    </smart-menu-items-group>
</smart-list-menu>

Getting and setting properties dynamically

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-list-menu');

Properties are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to get a property dynamically:

let filterMode = customElement.filterMode;

Here is an example showing how to set a property dynamically:

customElement.filterMode = 'equals';

Calling methods

Before accessing the custom element's API in JavaScript, the custom element's instance has to be retrieved:

let customElement = document.querySelector('smart-list-menu');

Methods are represented as members of the custom element's instance object and can be accessed as such.

Here is an example showing how to call a method:

customElement.minimize();

Animations

By default the animation for Smart.ListMenu is disabled. It can be enabled by adding the CSS class called "animation" to the element, like so:

<smart-list-menu class="animation">
    <smart-menu-items-group>
        File
        <smart-menu-item shortcut="Ctrl+N">New</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+0">Open</smart-menu-item>
        <smart-menu-items-group>
            Open Containing Folder
            <smart-menu-item>Explorer</smart-menu-item>
            <smart-menu-item>cmd</smart-menu-item>
        </smart-menu-items-group>
        <smart-menu-item shortcut="Ctrl+S" disabled>Save</smart-menu-item>
        <smart-menu-item shortcut="Ctrl+Alt+S" separator>Save As...</smart-menu-item>
        <smart-menu-item shortcut="Alt+F4">Exit</smart-menu-item>
    </smart-menu-items-group>
    <smart-menu-items-group>
        Help
        <smart-menu-item>About</smart-menu-item>
        <smart-menu-item>Help center</smart-menu-item>
        <smart-menu-item>Feedback</smart-menu-item>
    </smart-menu-items-group>
</smart-list-menu>

Styling (CSS API)

CSS selectors

The following CSS selectors can be used to style Smart.ListMenu:

  • 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-hamburger-icon - applied to the ListMenu's hamburger icon that appears when the element is minimized.
    • .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-header > smart-button - applied to the "back" button in the header.
      • .smart-title - applied to the title in the header.
    • .smart-list-menu-filter-input - applied to the filter input.
    • .smart-menu-scroll-button - applied to ListMenu scroll buttons.
      • .smart-scroll-button-near - applied to the top scroll button.
      • .smart-scroll-button-far - applied to the bottom scroll button.
      • .smart-arrow - applied to scroll button arrows.
    • .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.

CSS variables

Smart.ListMenu uses the following CSS variables:

  • --smart-menu-scroll-button-size - used to set the height of the scroll buttons of Smart.ListMenu. Default value is 20px.
  • --smart-list-menu-header-height - used to set the height of the Smart.ListMenu header. Default value is 40px.
  • --smart-list-menu-drop-down-width - used to set the width of the Smart.ListMenu dropdown when the element is minimized. Default value is 300px.
  • --smart-list-menu-drop-down-height - used to set the height of the Smart.ListMenu dropdown when the element is minimized. Default value is 200px.
  • --smart-list-menu-filter-input-size - used to set the height of the Smart.ListMenu filter input. Default value is 35px.