It's my first time using Angular Material and I'm just asking if you guys can help me on adding an horizontal nav bar for my project using Angular Material? I'm having some trouble looking for one. Thank you in advance! Stay awesome :)
Look at this example:
<div layout="row" layout-padding class="bg-dark-blue nav-dark" layout-align="space-between center">
<div>
<md-button>Home</md-button>
<md-button>Item 1</md-button>
<md-button>Item 2</md-button>
<md-menu>
<md-button md-menu-origin ng-click="$mdOpenMenu()">Help</md-button>
<md-menu-content width="2">
<md-menu-item>
<md-button>Help</md-button>
</md-menu-item>
<md-menu-item>
<md-button>About</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
<div class="nav-buttons">
<md-button class="md-raised md-accent">My profile</md-button>
<md-button class="md-raised md-warn">Log Out</md-button>
</div>
Some of it's classes are just for colorizing the content,don't pay attention to much to them :)
As per the official documentation, the horizontal navbar creation is as easy as using a md-toolbar.
<md-toolbar layout="row" class="md-whiteframe-z3" style="padding:0px;margin:0px;position:fixed;">
<h2>Sample navbar</h2>
</md-toolbar>`
You can add as many items you want inside the navbar and alignment of each items can be fixed using <span flex></span>.
In the span flex we can also specify values to it for specific alignments.
This is how u create a navbar in angular material:
(I have used angular-material-icons here too:)
<md-content class="md-padding" style="background:#086A87">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">
<ng-md-icon icon="phone" style="fill:wheat" size="20"></ng-md-icon>Personal Information
</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">
<ng-md-icon icon="mode_edit" style="fill: wheat" size="20"></ng-md-icon>Edit
</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">
<ng-md-icon icon="print" style="fill: wheat" size="20"></ng-md-icon>Print Detail1
</md-nav-item>
<md-nav-item md-nav-click="goto('page4')" name="page4">
<ng-md-icon icon="print" style="fill: wheat" size="20"></ng-md-icon>Print Detail2
</md-nav-item>
</md-nav-bar>
</md-content>
Related
I'm following angular material starter application example, but in side nav bar there is lot of extra space between list items. When I open the page in Mozilla I don't have the issue but It doesn't loook good in Chrome.
<md-toolbar layout="row">
<h1>Angular Material - Starter App</h1>
</md-toolbar>
<div layout="row" flex>
<md-sidenav layout="column" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')"
class="md-whiteframe-z2">
<md-list>
<md-subheader class="md-no-sticky">Favorites</md-subheader>
<md-list-item class="md-1-line">
<h3>Bio</h3>
</md-list-item>
<md-divider></md-divider>
<md-list-item class="md-1-line">
<h3>Professional</h3>
</md-list-item>
</md-list>
</md-sidenav>
<md-content flex id="content">
<p>Main Content will come here</p>
</md-content>
</div>
I'm trying to create angular material sidenav with list of menu items. When Im running the code on local machine, Each md-list-items takes fullpage width and sidenav have long scroll bar.
But When I run the same code on codepen.io, It displayed correctly.
<section layout="row" ng-controller="AppCtrl">
<md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" >
<md-toolbar ng-controller="LeftCtrl">
<div class="md-toolbar-tools">
<h1>Sidenav Right</h1>
<span flex></span>
<md-button class="md-icon-bitton" aria-label="Close Menu" ng-click="close()">
<md-tooltip md-direction="right">Close this menu</md-tooltip>
<md-icon md-font-icon="material-icons">close</md-icon>
</md-button>
</div>
</md-toolbar>
<md-content flex role="navigation">
<md-list>
<md-list-item>
<md-button>First Option</md-button>
</md-list-item>
<md-list-item>
<md-button>First Option</md-button>
</md-list-item>
<md-list-item>
<md-button>First Option</md-button>
</md-list-item>
</md-list>
</md-content>
</md-sidenav>
<md-content flex>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-icon-button" aria-label="Settings" ng-click="toggleLeft()" ng-hide="isOpenLeft()">
<md-icon md-font-icon="material-icons">menu</md-icon>
</md-button>
<h2>
<span>Application Title</span>
</h2>
</div>
</md-toolbar>
</md-content>
</section>
Here is the codepen:http://codepen.io/nhere/pen/yOwJxE
Try to use the following structure
<md-list>
<md-item>
<md-item-content>
[Content Here]
</md-item-content>
</md-item>
</md-list>
I haven't found an answer that works for me... Here's my code. My content doesn't scroll. I'm getting my ng-view from a basic template. It's just a bunch of lorem ipsum intended to extend past the end of the page so that I can test this code.
What do I need to do to make my content scrollable? I can't scroll the page at all.
I am running this on a grunt serve dev server. Everything was installed via bower. Ang-material is included properly. Everything looks like it is supposed to, it just doesn't scroll.
(As a side note, my FAB was in it's proper place at the bottom-right last night, I just decided that this is more important so I'm not focusing on it's position right now. It's floating in the middle-right of the page.)
<body ng-app="webApp" layout="column">
<!--[if lte IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<md-toolbar class="md-whiteframe-4dp">
<div class="md-toolbar-tools">
<!-- left side -->
<span flex></span>
<!-- right side -->
<md-button class="md-raised" aria-label="Learn More" ng-href="#/contact">
Contact Me
</md-button>
</div>
</md-toolbar>
<md-content layout="row" flex>
<md-content id="content" flex>
<md-content class="container md-whiteframe-6dp">
<md-content hide show-gt-sm flex layout-padding class="main-text main-view">
<div ng-view></div>
</md-content>
<md-content hide show-sm show-xs flex layout-padding class="main-text">
<div ng-view></div>
</md-content>
</md-content>
</md-content>
<div ng-controller="FabCtrl as fab" class="lock-size" layout-align="end end">
<div class="corner-pad">
<md-fab-speed-dial md-open="fab.isOpen" md-direction="{{fab.selectedDirection}}" ng-class="fab.selectedMode" ng-mouseenter="fab.isOpen=true" ng-mouseleave="fab.isOpen=false" ng-cloak>
<md-fab-trigger>
<md-button aria-label="menu" class="md-fab md-primary md-hue-4 md-whiteframe-4dp" ng-href="tel:9106507122">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Call Me</md-tooltip>
<ng-md-icon icon="phone" size="25"></ng-md-icon>
</md-button>
</md-fab-trigger>
<md-fab-actions>
<md-button aria-label="email" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="mailto:jacobkdick#gmail.com">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Email Me</md-tooltip>
<ng-md-icon icon="email"></ng-md-icon>
</md-button>
<md-button aria-label="phone" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="tel:9106507122">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Follow Me</md-tooltip>
<ng-md-icon icon="twitter"></ng-md-icon>
</md-button>
<md-button aria-label="github" class="md-fab md-raised md-mini md-primary md-whiteframe-4dp" href="https://github.com/jacobkdick" target="_blank">
<md-tooltip md-direction="left" md-visible="tooltipVisible">Fork Me</md-tooltip>
<ng-md-icon icon="github-circle"></ng-md-icon>
</md-button>
</md-fab-actions>
</md-fab-speed-dial>
</div>
</div>
</md-content>
</body>
EDIT: Just applied the overflow scroll tags on my css. Here's a funky result from the bottom-right corner. Both scrollbars are disabled
scrollbars overlay disabled << click here for the picture
I want to create nested list (tree) in my application exactly like below. Please suggest me how can i create list like this .
As of Angular 1.2 you can use ng-start/ng-end to create nested trees/iterate over nested lists.
<md-list flex>
<md-list-item style="margin-left: 10px;"ng-repeat-start="item in nestedList">{{item.id}}</md-list-item>
<md-list-item style="margin-left: 50px;" ng-repeat-end ng-repeat="child in item.children">{{child.id}}</md-list-item>
</md-list>
http://codepen.io/jdeyrup/pen/JRPNyW
Unfortunately, as to the last releases of angular material, there is no such directive to make a tree menu like that, you should combine different directive such as the sidebar and the vertical menu.
I used the sidebar in my project:
<section class="wrapper" layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z3 background-red" md-component-id="left" md-is-locked-open="$mdMedia('gt-md')">
<md-toolbar>
<img class="logo" src="images/logo.png" />
</md-toolbar>
<md-content ng-controller="LeftCtrl">
<menu></menu>
<md-button ng-click="close()" class="md-primary" hide-gt-md>
Close Sidenav Left
</md-button>
</md-content>
<div flex></div>
<div class="copy">Copyright © 2015</div>
</md-sidenav>
<md-content class="wrapper" flex>
<div class="wrapper ngview-wrapper" layout="column" layout-fill layout-align="top center" ng-view></div>
<div flex></div>
</md-content>
</section>
You won't need the part that handle opening and closing of the sidebar.
Inside the menu directive you will be able to put everything you want as menu
I have added angular-material to my meanjs project and was playing with styling first elements. I also made sure every other styles were removed from that project.. so only default angular styles are being loaded.
Now, for example, I created a md-menu in a md-toolbar using this code here:
<md-menu md-position-mode="target-right target">
<md-button aria-label="Open profile actions" ng-click="openMenu($mdOpenMenu, $event)" md-menu-origin>
<img alt="{{authentication.user.displayName}}" class="header-profile-image" data-ng-src="{{authentication.user.profileImageURL}}"/>
<span data-ng-bind="authentication.user.displayName"></span>
</md-button>
<md-menu-content width="4">
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.profile">
<ng-md-icon icon="account_circle"></ng-md-icon>
<span md-menu-align-target>Edit Profile</span>
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.picture">
<ng-md-icon icon="photo" md-menu-align-target></ng-md-icon>
Change Profile Picture
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active" data-ng-show="authentication.user.provider === 'local'">
<md-button data-ui-sref="settings.password">
<ng-md-icon icon="lock" md-menu-align-target></ng-md-icon>
Change Password
</md-button>
</md-menu-item>
<md-menu-item data-ui-sref-active="active">
<md-button data-ui-sref="settings.accounts">
<ng-md-icon icon="share" md-menu-align-target></ng-md-icon>
Manage Social Accounts
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item data-ui-sref-active="active">
<md-button href="/api/auth/signout" target="_self">
<ng-md-icon icon="logout" md-menu-align-target></ng-md-icon>
Signout
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
However this results in a menu with mispositioned texts and icons, even if I delete the icons. They should be vertically centered like you can see here:
https://material.angularjs.org/HEAD/#/demo/material.components.menu
Same problem came up creating a menu icon like this:
<md-button aria-label="Open the sidebar" class="md-icon-button menu" ng-click="toggleSideNav()">
<ng-md-icon icon="menu" style="fill: #fff;" md-menu-align-target></ng-md-icon>
</md-button>
Which results in this here
However.. it's no problem for me to solve this with some css rules.. but I guess the problem must be somewhere else? anybody has an idea? I checked the angular-material documentation a thousand times and can't figure out what's wrong.
thanks!
It's because you're mixing Angular Material with Angular Material Icons (ng-md-icon), two different projects, but the ng-md-icon guys have patched their library to run alongside Angular Material, but you have to use the Angular Material directive md-icon like so:
Instead of:
<ng-md-icon icon="account_circle"></ng-md-icon>
You would use:
<md-icon ng-md-icon icon="account_circle"></md-icon>