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

angular component for metismenu
https://github.com/onokumus/metismenu-angular

Last synced: 3 months ago
JSON representation

angular component for metismenu

• Host: GitHub
• URL: https://github.com/onokumus/metismenu-angular
• Owner: onokumus
• License: mit
• Created: 2020-07-03T17:12:15.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-07-03T21:49:51.000Z (over 4 years ago)
• Last Synced: 2024-09-26T05:57:23.283Z (3 months ago)
• Language: TypeScript
• Size: 12.7 KB
• Stars: 1
• Watchers: 3
• Forks: 2
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @metismenu/angular

> angular component for metismenu

## Getting started

### Install

Install with [npm](https://www.npmjs.com/):

```sh

$ npm install @metismenu/angular metismenujs

```

Install with [yarn](https://yarnpkg.com):

```sh

$ yarn add @metismenu/angular metismenujs

```

## Usage

Edit `app.module.ts` file

```js

import { MetismenuAngularModule } from "@metismenu/angular";

// import

@NgModule({

  imports: [

    MetismenuAngularModule,

    ...

  ]

})

```

Edit `angular.json` file

```json

"styles": [

  "./node_modules/metismenujs/scss/metismenujs.scss",

  "src/styles.scss"

]

```

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

```html



  
Item 1

  


    Menu 1

    


      
 Item 3 

      
 Item 4 

    

  

  


     Menu 2 

    


      
 Item 5 

      
 Item 6 

      
 Item 7 

      
 Item 8 

    

  

  
Item 2



```

#### OR


```html

  
Item 1

  


    Menu 1

    


      
 Item 3 

      
 Item 4 

    

  

  


     Menu 2 

    


      
 Item 5 

      
 Item 6 

      
 Item 7 

      
 Item 8 

    

  

  
Item 2


```

## Properties

#### toggle

Type: `string (true | false)`

Default: `true`

For auto collapse support.

```html



...



```


#### triggerElement

Type: `css selector`

Default: `a`

```html



...



```


#### parentTrigger

Type: `css selector`

Default: `li`

```html



...



```


#### subMenu

Type: `css selector`

Default: `ul`

```html

...

```

## Example Repo

[https://github.com/onokumus/metismenu-angular-example](https://github.com/onokumus/metismenu-angular-example)

## Demo

[https://onokumus.com/metismenu-angular-example/](https://onokumus.com/metismenu-angular-example/)

## About

### Related projects

- [metismenu](https://www.npmjs.com/package/metismenu): A jQuery menu plugin | [homepage](https://github.com/onokumus/metismenu#readme "A jQuery menu plugin")

- [metismenujs](https://www.npmjs.com/package/metismenujs): MetisMenu with Vanilla-JS  | [homepage](https://github.com/onokumus/metismenujs#readme "MetisMenu with Vanilla-JS")

### Contributing

Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](../../issues/new).

### Author

**Osman Nuri Okumus**

+ [GitHub Profile](https://github.com/onokumus)

+ [Twitter Profile](https://twitter.com/onokumus)

+ [LinkedIn Profile](https://linkedin.com/in/onokumus)

### License

Copyright © 2020, [Osman Nuri Okumus](https://github.com/onokumus).

Released under the [MIT License](LICENSE).

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 10.0.2.