angular-material-sidemenu

WebJar for angular-material-sidemenu

License	MIT
Categories	IDE Development Tools Angular User Interface Web Frameworks
GroupId	org.webjars.npm
ArtifactId	angular-material-sidemenu
Last Version	1.0.2
Release Date	Mar 11, 2017
Type	jar
Description	angular-material-sidemenu WebJar for angular-material-sidemenu
Project URL	http://webjars.org
Source Code Management	https://github.com/marcosmoura/angular-material-sidemenu

Download angular-material-sidemenu

Filename	Size
angular-material-sidemenu-1.0.2.pom
angular-material-sidemenu-1.0.2.jar	21 KB
angular-material-sidemenu-1.0.2-sources.jar	22 bytes
angular-material-sidemenu-1.0.2-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/angular-material-sidemenu/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>angular-material-sidemenu</artifactId>
    <version>1.0.2</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/angular-material-sidemenu/
implementation 'org.webjars.npm:angular-material-sidemenu:1.0.2'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/angular-material-sidemenu/
implementation ("org.webjars.npm:angular-material-sidemenu:1.0.2")

Apache Buildr

'org.webjars.npm:angular-material-sidemenu:jar:1.0.2'

Apache Ivy

<dependency org="org.webjars.npm" name="angular-material-sidemenu" rev="1.0.2">
  <artifact name="angular-material-sidemenu" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='angular-material-sidemenu', version='1.0.2')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "angular-material-sidemenu" % "1.0.2"

Leiningen

[org.webjars.npm/angular-material-sidemenu "1.0.2"]

Dependencies

compile (4)

Group / Artifact	Type	Version
org.webjars.npm : angular	jar	[1.5.0,2)
org.webjars.npm : angular-animate	jar	[1.5.0,2)
org.webjars.npm : angular-aria	jar	[1.5.0,2)
org.webjars.npm : angular-material	jar	[1.0.6,2)

Project Modules

There are no modules declared in this project.

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.

<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 collapse-other="true" 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-content md-heading="Menu 2" md-arrow="true" on-hover="true">
      <md-sidemenu-button href="#">Submenu 1</md-sidemenu-button>
      <md-sidemenu-button href="#">Submenu 2</md-sidemenu-button>

      <md-sidemenu-content md-heading="Menu 2" 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-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:

• 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

• <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

Versions

Version
1.0.2 Mar 11, 2017