se-simpl-submenu v0.1.1

SeSimplSubmenu

This library was generated with Angular CLI version 8.2.9.

How to use

1. npm i se-simpl-submenu
2. place the \<se-simpl-submenu> place your submenus here \</se-simpl-submenu> component inside the tag that you wish it to be relative to
3. select position: relative for this tag
4. add seSimplSubmenuItem directive to the submenus
5. use local variable to access the submenu interface. Available operations are

• showSubmenu() - shows the submenus
• hideSubmenu() - hide the submenus
• toggleSubmenu() - toggle submenus between opened and closed

Example code

<div class="menu">
    some item is here
    <span (click)="subMenu.showSubmenu()">open</span>
    |||
    <span (click)="subMenu.hideSubmenu()">close</span>
    |||
    <span (click)="subMenu.toggleSubmenu()">toggle</span>
    <se-simpl-submenu #subMenu
      [options]="subOptions">
      <div class="menu-item" seSimplSubmenuItem>menu 1</div>
      <div class="menu-item" seSimplSubmenuItem>menu 2</div>
    </se-simpl-submenu>
  </div>

where options are

subOptions: SeSubmenusOptions = {
  position: 'top',
  animation: 'staggered-move',
  itemTiming: 0.25,
  itemDelay: 0.1,
  easing: 'power3.in',
  moveFrom: 33,
  scaleFrom: 1.3
};

Options

Use the options input [options] to specify the submenu behaviour. It takes an object with the following configuration

• position:
  • top: displays the submenu on top of its parent container and lines the items in a row. Default value.
  • bottom: displays the submenu below its parent container and lines the items in a row
  • right: displays the submenu to the right of its parent container and lines the items in a column
  • left: displays the submenu to the left of its parent container and lines the items in a column
• animation:
  • staggered-fade: displays the submenu items one by one by fading them in. Default value.
  • staggered-move: displays the submenu items one by one by fading them in and moving them
  • staggered-scale: displays the submenu items one by one by fading them in and scaling them
  • non-staggered: displays the submenu items all together by fading them
  • non-animated: displays the submenu items without transition
• itemTiming: takes a number to configure the transition time in seconds of each submenu item. Default: 0.25
• itemDelay: takes a number to configure the delay in seconds of each submenu item. Used for the staggered animatons. Default: 0.25
• easing: takes a gsap easing string. Only supports gsap 3 core eases. Default: power1.out
• scaleFrom: takes a number to configure the relative scale for the staggered-scale animation. 0 being from 0 scale to 1 being no scaling. Default: 0.8.
• moveFrom: takes a number to configure the movement distance in percentage relation to the submenu's own dimension. Default: 33.

Code scaffolding

Run ng generate component component-name --project se-simpl-submenu to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project se-simpl-submenu.

Note: Don't forget to add --project se-simpl-submenu or else it will be added to the default project in your angular.json file.

Build

Run ng build se-simpl-submenu to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build se-simpl-submenu, go to the dist folder cd dist/se-simpl-submenu and run npm publish.

Running unit tests

Run ng test se-simpl-submenu to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.