xandor-io / angular-material-sidemenu Goto Github PK

View Code? Open in Web Editor NEW

63.0 10.0 50.0 2.99 MB

A small component to make sidenav menus using Angular Material

License: MIT License

CSS 52.41% JavaScript 47.59%

angular angular-material navigation ui-router

angular-material-sidemenu's Introduction

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

angular-material-sidemenu's People

Contributors

Stargazers

Watchers

Forkers

patrickmichalina gsavloff bhupeshkushwaha lucassouza1 juanmav joaovitor milocosmopolitan nzwddy ramisra xyzalzhang jera travissutton sjansenmocs kptlucek eddieos agnjunio mbenedettini inakrin shennero pscanlon1 mohamadkhan19 sishuoyang kowsheek xdavipereira befikirhm wesleifreitas axiom24 andersonfalcao techieson watabelabs jkloss4 mikebawol saranramayanam hang2016 rvaronos miqe johnrix khayargoli mohammadpurl chenlijun99 reesemartin nehaldamania cristiian raduolivas jpaniorte poovarasanvasudevan

angular-material-sidemenu's Issues

How to use md-svg-icon / Other icon font library like Font Awesome?

I have an application in which I would like to use the font awesome library for the icons. I am not able to change it currently without editing the directive template.
Is there a simpler method?

Also the documentation does not cover how to use the md-svg-icon attribute.
Could you please give some demo or example?

Thank you.

Merge relevant PRs

@marcosmoura There are couple of PRs with some very useful features.
Could you please merge them and release a new version.

Thanks.
Prerak

All the states should start with home.

Is that correct?

If I use something like this:

<md-sidemenu-button ui-sref="test">Submenu 1</md-sidemenu-button>

It always try to find home.test. Is this correct? Is there a way to just define a root state? Or is this a best practice?

Tks a lot!
Ari

I've found a bug when using the sidemenu with an ng-repeat.
I've made this plunkr in which you can see that the sidemenu is rendered correctly at first, but it's broken 2 seconds later when some buttons are dynamically added after what we can see as an http request or something like that.

For what I've seen, there's a marginTip which does the magic of "collapsing" the items when the menu is closed. The problem is that marginTop should be recalculated each time the length of the children changes.

I can imagine that this can be solved with a $watcher but maybe someone more experienced can recommend another way of solving it.

I can work on a PR if some of the maintainers says it would be merged.

Thanks!

How to by default enable one of the md-sidemenu-content?

Hi Marcos, could you please tell us how to enable one of the md-sidemenu-content by default on load

Demo with gh-pages

Hi! It would be a nice idea to submit a demo to see the working demo

Publish latest version on npm

Hey,
Could you please publish the latest version (1.0.6) on npm?
The current available version on npm is 1.0.5.

Thank you.

SVG icons not working

Attempts to use md-svg-icon currently fail. Issue is a lack of {{}} around the md-svg-icon expression in the mdSidemenuContent directive template.

`<md-icon ng-if="$mdSidemenuContent.svgIcon" md-svg-icon="$mdSidemenuContent.svgIcon"></md-icon>`

should be:

`<md-icon ng-if="$mdSidemenuContent.svgIcon" md-svg-icon="{{$mdSidemenuContent.svgIcon}}"></md-icon>`

md-content spilling when sub-items reach a certain number

Hello,
I have noticed that increasing the number of sub-items under a certain md-content affects the view thereby making the items spill out on to the parent view. can you help fix this. I have an attachment showing the spill space.
P.s I made the height of md-content and button to be 62px in css, and i currently have 8 sub items under category 1. At about 6 sub-items, it shows just fine without the large space. Help please.

Thanks.

TypeError: Cannot read property '$parent' of undefined

angular-material-sidemenu version: 1.0.5
I am using gulp to build and serve my web app.
When I am using gulp-serve the project is starting from my root/src/main/ folder and angular-material-sidemenu is working properly.

but when I do gulp-build, a build is getting generated and saved in root/build/www and angular-material-sidemenu is getting compressed and saved in vendor.js file.

                 <md-sidemenu-group>
                      <md-sidemenu-button ui-sref="journal">
                          <md-icon md-svg-src="content/images/PL_Services.svg">book</md-icon>
                          <span data-translate="sidebar.menu.journal">journal</span>
                      </md-sidemenu-button>
                  </md-sidemenu-group>

This is working correctly and journal state is loaded, but

                  <md-sidemenu-group>
                    <md-sidemenu-content collapse-other="true" md-svg-icon="content/images/PL_Contacts.svg" md-heading="{{'sidebar.menu.contacts.title'|translate}}" md-arrow="true">
                      <md-sidemenu-button ui-sref="contacts">
                        <md-icon class="ng-binding ng-scope material-icons" role="img">person</md-icon>
                        <span data-translate="sidebar.menu.contacts.view">View</span>
                      </md-sidemenu-button>

                      <md-sidemenu-button ui-sref="trustContact">
                        <md-icon class="ng-binding ng-scope material-icons" role="img">person_add</md-icon>
                        <span data-translate="sidebar.menu.contacts.new">Add</span>
                      </md-sidemenu-button>
                    </md-sidemenu-content>
                  </md-sidemenu-group>

is not expanding and showing the two buttons inside the md-sidemenu-content.

It's throwing error TypeError: Cannot read property '$parent' of undefined.

onHover causes open/close on touch screens

If using onHover, tapping a menu item on a touchscreen results in the menu group opening and then immediately closing. You have to tap it a second time for the menu group to stay open. Presumably, this is on account of the menu responding to both the hover and click events sent to it simultaneously.

md-icon in md-sidemenu-button

how to use md-icon in md-sidemenu-button...????

New Patch Release

Create new patch release, so we can get the latest update from your bower.json main , so wiredep can help inject the required distribution files instead of just the js

Can't change md-heading css

is there a way to change the font-weight and text-transform of the md-heading?

Wrong dependencies types

It seems that there are multiple devdependencies marked only as dependencies in package.json, like gulp for instance. This is causing build errors in my system since it is installing gulp-sass with an old version of node-sass that is not necessary.

Hiding submenu on Firefox

When menu is closed it looks like this:

When it's open it looks like this:

There is clearly whitespace that shouldn't be there when the menu is closed. This works on Chrome.

Original menu on material website approaches this by programmatically setting the hight of the element to 0 when closed and whatever needed when open.

Easier fix here might be to set the margin-top: -<calculated-hight>px; instead of currently margin-top: -120%

Menu Toggle

The menu uses the regular toggle feature but is there any toggle menu that displays a toggle menu like in the link below:
https://almsaeedstudio.com/themes/AdminLTE/index2.html

When the release v1.0.2?

How to use external svg icon with <md-svg-icon> ?

How to use external svg icon with ?
I am trying to use my own png/ svg icons for the sidemenu. Can you provide a working demo or an example?

md-icon not working

plz have a look at my code
`<md-sidemenulocked="true">

    <md-sidemenu-group>
            <md-subheader class="md-no-sticky">Menu</md-subheader>
            <md-divider></md-divider>
                 <md-sidemenu-content  md-icon="home" md-heading="Home" md-arrow="true" class="material-icons">
                <md-sidemenu-button  href="#">Index</md-sidemenu-button>
            </md-sidemenu-content>
        </md-sidemenu-group>

md-icon = "Home" is not working in <md-sidemenu-content>

Activate one of the menu button

How can I activate one of the menu buttons of the menus?
Also, how can I collapse the activate menu after another menu is activated?

menu won't render in IE11

Hi there, I'm using md-sidemenu in my app and it works great in chrome but does not render in IE11. Has anyone experienced this?

md-icon, md-arrow

Any alternative way to get those images in there cleanly? I am using https://klarsys.github.io/angular-material-icons.

After I removed references to those images the menu bar worked nicely - the image places holders were confusing.

Responsive menu

Is this menu inherently responsive or can it be made responsive by just adding a few layout classes ?

How can I use md-svg-icon for icon?

I need to use an external svg because I font awesome doesn't have the icon I need.
How can I accomplish that?

ui router errors: Cannot read property 'match' of undefined

I'm using ui router the normal way and as soon as i added my stateprovider .config, i'm seeing the following error. Am I missing something specific to sidemenu? Thank you

Is there a different way we should be using ui-sref?

My routeConfig.js is simple, like so:

(function () {
'use strict';

angular
    .module('myApp')
    .config(function($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise('home');

        $stateProvider

                .state('home', {
                    url: '/home',
                    templateUrl: 'views/main-home.html'
                })

               .state('contact', {
                    url: '/contact',
                    templateUrl: 'views/main-contact.html',
                    controller: 'contactController'
                });
});

})();

ngClick ?

What about add ng-click to the sidemenu-button ?
I needed to add locally in the sources by myself but this change will be override when i update future versions.

Using version 1.0.5

hi, im relatively new to npm, im trying to update/ reinstall to version 1.0.5

but im receiving this error :
npm ERR! notarget No compatible version found: angular-material-sidemenu@'>=1.0.5 <2.0.0'
npm ERR! notarget Valid install targets:
npm ERR! notarget 0.0.1, 0.0.2, 0.0.6, 0.0.7, 0.0.8, 0.0.9, 0.0.10, 1.0.0, 1.0.1, 1.0.2

and whenever ireinstall i always get the version 1.0.2

will appreciate any help thanks!