Noncommital Premarital Mischief
    Wondering what’s next for npm?Check out our public roadmap! »

    @metismenu/angular
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    @metismenu/angular

    angular component for metismenu

    Getting started

    Install

    Install with npm:

    $ npm install @metismenu/angular

    Install with yarn:

    $ yarn add @metismenu/angular

    Usage

    Edit app.module.ts file

    import { MetismenuAngularModule } from "@metismenu/angular";
     
    // import
    @NgModule({
      imports: [
        MetismenuAngularModule,
        ...
      ]
    })

    Edit angular.json file

    "styles"[
      "./node_modules/metismenujs/dist/metismenujs.css",
      "src/styles.css"
    ]
     

    Use metis-menu selector. It can be used with a valid html tag or just as <metis-menu>.

    <ul metis-menu>
      <li><a href="">Item 1</a></li>
      <li>
        <a href="#" class="has-arrow">Menu 1</a>
        <ul>
          <li><a href="#"> Item 3 </a></li>
          <li><a href="#"> Item 4 </a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="has-arrow"> Menu 2 </a>
        <ul>
          <li><a href=""> Item 5 </a></li>
          <li><a href=""> Item 6 </a></li>
          <li><a href=""> Item 7 </a></li>
          <li><a href=""> Item 8 </a></li>
        </ul>
      </li>
      <li><a href="">Item 2</a></li>
    </ul>

    OR

    <metis-menu>
      <li><a href="">Item 1</a></li>
      <li>
        <a href="#" class="has-arrow">Menu 1</a>
        <ul>
          <li><a href="#"> Item 3 </a></li>
          <li><a href="#"> Item 4 </a></li>
        </ul>
      </li>
      <li>
        <a href="#" class="has-arrow"> Menu 2 </a>
        <ul>
          <li><a href=""> Item 5 </a></li>
          <li><a href=""> Item 6 </a></li>
          <li><a href=""> Item 7 </a></li>
          <li><a href=""> Item 8 </a></li>
        </ul>
      </li>
      <li><a href="">Item 2</a></li>
    </metis-menu>

    Properties

    toggle

    Type: string (true | false)

    Default: true

    For auto collapse support.

    <ul metis-menu toggle="false">
    ...
    </ul>

    triggerElement

    Type: css selector

    Default: a

    <div metis-menu triggerElement="h2">
    ...
    </div>

    parentTrigger

    Type: css selector

    Default: li

    <p metis-menu parentTrigger="div">
    ...
    </p>

    subMenu

    Type: css selector

    Default: ul

    <metis-menu parentTrigger="div">
    ...
    </metis-menu>

    Example Repo

    https://github.com/onokumus/metismenu-angular-example

    Demo

    https://onokumus.com/metismenu-angular-example/

    About

    Related projects

    Contributing

    Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

    Author

    Osman Nuri Okumus

    License

    Copyright © 2020, Osman Nuri Okumus. Released under the MIT License.

    This library was generated with Angular CLI version 10.0.2.

    Install

    npm i @metismenu/angular

    DownloadsWeekly Downloads

    173

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    34.3 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar