<exmg-sidemenu>

@exmg/exmg-sidemenu

WARNING: This element is not compatible with Polymer 1.0

<exmg-sidemenu> Is a collapsible sidemenu.

Installation

npm install @exmg/exmg-sidemenu

Example Usage

<exmg-sidemenu
  selected="rooms/"
  ?collapsed="${this.collapsed}"
  @collapsed="${this._handleCollapsed}"
  @selected-changed="${this._handleSelectedChanged}"
  ?narrow="${this.narrow}"
>
  <exmg-sidemenu-header slot="header" ?collapsed="${this.collapsed}"></exmg-sidemenu-header>
  ${this.renderMenu()} ${this.renderFooterButton()}
</exmg-sidemenu>

API

Slots

| Name | Description | | --------- | ---------------------------- | | default | Menu items of the side-menu | | footer | Footer item of the side-menu |

Properties/Attributes

| Name | Type | Default | Description | | ----------------- | --------- | ------- | ------------------------------------------- | | collapsed | boolean | false | Whether the side-menu is collapsed or not | | selected | string | None | Contains the path of the selected menu item | | disableCollapse | boolean | false | Disable collapse functionailty | | footerItem | boolean | false | Whether the side-menu has a footer-item |

Methods

None

Events

| Name | Description | | ------------------ | ----------------------------------------- | | collapsed | Fired when the side-menu collapse toggles | | selected-changed | Fired when the selected menu item changes |

CSS Custom Properties

| Name | Default | Description | | ---------------------------------------------- | ------------------ | --------------------------- | | --exmg-sidemenu-background | white | Sidemenu background color | | --exmg-sidemenu-width | 256px | Sidemenu width | | --exmg-sidemenu-collapsed-width | white | Sidemenu collapsed width | | --exmg-sidemenu-group-text-color | 54% black | Group titletext color | | --exmg-sidemenu-item-text-color | 54% black | Item text color | | --exmg-sidemenu-menu-footer-background-color | #F9FAF9 | Footer background color | | --exmg-sidemenu-menu-border-color | #DDD | Border color of menu | | --exmg-sidemenu-icon-color | 54% black | Sidemenu icon color | | --exmg-sidemenu-hover-background-color | --paper-grey-200 | Item hover background color | | --exmg-sidemenu-selected-text-color | --primary-color | Item selected text color | | --exmg-sidemenu-badge-background-color | #ff6978 | Badge background color | | --exmg-sidemenu-badge-color | #fff | Badge font color |

Additional references

• Additional Documentation

• Demo