xandor-io / angular-material-sidemenu Goto Github PK
View Code? Open in Web Editor NEWA small component to make sidenav menus using Angular Material
License: MIT License
A small component to make sidenav menus using Angular Material
License: MIT License
Hello! Could you please provide demo on github pages or somewhere else. It will be nice to see component in action without downloading the source
how to use md-icon in md-sidemenu-button...????
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.
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!
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?
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!
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
Is this menu inherently responsive or can it be made responsive by just adding a few layout classes ?
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%
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.
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'
});
});
})();
angular.js:13550 TypeError: Cannot read property 'match' of undefined
at parseStateRef (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js:4109:22)
at link (https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js:4229:20)
at invokeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:9694:9)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:9093:11)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:8397:13)
at nodeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:9088:24)
at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:8397:13)
at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:8277:30)
at lazyCompilation (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:8615:25)
at boundTranscludeFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js:8414:16)
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?
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.
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>
export default function ($rootScope, $scope) {
$scope.clickButton = function () {
$rootScope.$broadcast('info:clicked');
}
}
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.
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.
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
@marcosmoura There are couple of PRs with some very useful features.
Could you please merge them and release a new version.
Thanks.
Prerak
is there a way to change the font-weight and text-transform of the md-heading?
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.
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
Hi Marcos, could you please tell us how to enable one of the md-sidemenu-content by default on load
Please update the main property in your bower.json file to include the dest/**.css file as well.
"main": [
"dest/angular-material-sidemenu.js",
"dest/angular-material-sidemenu.css"
],
Hi! It would be a nice idea to submit a demo to see the working demo
I need to use an external svg because I font awesome doesn't have the icon I need.
How can I accomplish that?
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?
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.
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>`
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.