Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xandor-io/angular-material-sidemenu
A small component to make sidenav menus using Angular Material
https://github.com/xandor-io/angular-material-sidemenu
angular angular-material navigation ui-router
Last synced: about 1 month ago
JSON representation
A small component to make sidenav menus using Angular Material
- Host: GitHub
- URL: https://github.com/xandor-io/angular-material-sidemenu
- Owner: xandor-io
- License: mit
- Created: 2015-07-17T16:51:07.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T05:07:54.000Z (12 months ago)
- Last Synced: 2024-05-22T06:05:41.376Z (7 months ago)
- Topics: angular, angular-material, navigation, ui-router
- Language: CSS
- Homepage:
- Size: 2.92 MB
- Stars: 63
- Watchers: 10
- Forks: 50
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-angular - angular-material-sidemenu - A small component to make sidenav menus using Angular Material. (Uncategorized / Uncategorized)
README
# Angular Material Sidemenu
## Introduction
This is a package to create navigation menus using Angular Material. This follows all the design guidelines provided by Google Material spec.
## Installation
This package can be installed using npm or bower:
**Note:** Use version `1.0.6`
* `npm install ng-material-sidemenu`
* `bower install angular-material-sidemenu`
## Usage
Include the script and CSS files in you HTML and add `ngMaterialSidemenu` in you module. Also this module has support for browserify or wiredep.
```html
```
To use icons with ligatures you should include the reference for the Material Icons:
```html
```
After that you can add the following markup:
```html
Caption
Submenu 1
Submenu 2
Submenu 3
Submenu 1
Submenu 2
Submenu 1
Submenu 2
Submenu 3
Caption
Menu 4
```
### Components
* ``
Is the main directive to hold all navigation items.
* ``
Is needed to create groups of content.
* ``
Define the collapsible navigation element and there's some attributes to setup. The following attributes are available:
- `collapse-other` - You can use to collapse all other elements.
- `on-hover` - You can open menu content on hover.
- `md-icon` - You can use font icons
- `md-svg-icon` - To use external svg icons
- `md-heading` - The title of the section
- `md-arrow` - An optional boolean to show an indicator arrow
* ``
Add the buttons inside the navigation. The following attributes are available:
- `href` - The href for the button
- `ui-sref` - The ui-router alternative
- `ui-sref-active` - The highlight class to use with ui-router
- `target` - The link target attribute
Pretty easy!
## License
MIT