ramisra/angular-material-sidemenu

A small component to make sidenav menus using Angular Material http://marcosmoura.com/angular-material-sidemenu/

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.ratikesh9:angular-material-sidemenu:'
	}

	dependencies {
		implementation("com.github.ratikesh9:angular-material-sidemenu:")
	}

	<dependency>
	    <groupId>com.github.ratikesh9</groupId>
	    <artifactId>angular-material-sidemenu</artifactId>
	    <version></version>
	</dependency>


                            
    libraryDependencies += "com.github.ratikesh9" % "angular-material-sidemenu" % ""


                            
    :dependencies [[com.github.ratikesh9/angular-material-sidemenu ""]]

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:

npm install angular-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.

<link rel="stylesheet" href="path/to/angular-material-sidemenu.css">
<script src="path/to/angular-material-sidemenu.js"></script>

To use icons with ligatures you should include the reference for the Material Icons:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

After that you can add the following markup:

<md-sidemenu>
  <md-sidemenu-group>
    <md-subheader class="md-no-sticky">Caption</md-subheader>

    <md-sidemenu-content md-icon="home" md-heading="Menu 1" md-arrow="true">
      <md-sidemenu-button href="#">Submenu 1</md-sidemenu-button>
      <md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>
      <md-sidemenu-button href="#">Submenu 3</md-sidemenu-button>
    </md-sidemenu-content>
  </md-sidemenu-group>
  
  <md-sidemenu-group>
    <md-divider></md-divider>

    <md-subheader class="md-no-sticky">Caption</md-subheader>

    <md-sidemenu-button href="#">Menu 4</md-sidemenu-button>
  </md-sidemenu-group>
</md-sidemenu>

Components

<md-sidemenu> Is the main directive to hold all navigation items.
<md-sidemenu-group> Is needed to create groups of content.
<md-sidemenu-content> Define the collapsible navigation element and there's some attributes to setup. The following attributes are available:
- 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
<md-sidemenu-button> 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