i would like to create a toolbar for angular md-cards.
something similar to this image
<md-card layout="column" >
<md-toolbar>
<div class="md-toolbar-tools">
<h3>Card Header</h3>
<span flex></span>
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-calendar" class="fa" aria-label="open menu"></md-icon>
</md-button>
<md-button class="md-icon-button">
<md-icon md-font-icon="fa-user" class="fa" aria-label="open menu"></md-icon>
</md-button>
</div>
</md-toolbar>
</md-card-content>Card Content</md-card-content>
</md-card>
is there any current directives for ngMaterial -angular material- that can
be used to get such nice toolbar for cards or do i have to make custom css for it ?
Angular Material toolbar is using your theme primary color as the toolbar's background-color by default.
toolbar-theme.scss implementation:
https://github.com/angular/material/blob/master/src/components/toolbar/toolbar-theme.scss
One way to use the background-colors you like is to override the css with !important
md-toolbar {
background-color: white !important;
}
Another way is to set your accent color as white, you can follow this on how to configure theme colors in your app:
https://material.angularjs.org/0.11.4/Theming/03_configuring_a_theme
Then, you can use md-accent in your toolbar directive, for example:
<md-toolbar class="md-accent">
<h2>title</h2>
</md-toolbar>
But this method is under the assumption your accent theme color is white. If you are following Google material design, then you should set multiple themes as charlietfl said.
If you want the font, text size, and color like the picture you showed, you can inspect elements on your browser to get the styles it is using and put it to your CSS.
Related
I'm using my own colors palette to set some special colors in some buttons in a section of my app. So, when I use the default palete and md-primary for example if I set ng-disabled=true the button become not clickable and the color is setted of gray. The problem is when I use myown palette, if I use ng-disabled=true I can't push the button but the color doesn't change and I would like that this happens.
This is an example of use:
<md-button
ng-disabled="true"
ng-click="..."
class="md-icon-button">
<md-icon ng-if="..." md-colors="{'color': 'specialpalette-pastelGreen'}" >
check_circle
</md-icon>
<md-icon ng-if="..." md-colors="{'color': 'specialpalette-pastelRed'}">
cancel
</md-icon>
</md-button>
One solution is to configure in a ng-class like: ng-disabled="classEnabled==false" ng-class="{'diabled-class': !classEnabled}", I'm not sure if there is any way to customize the disabled color.
I copied this sidenav demo from the angular material docs.
https://material.angularjs.org/latest/demo/sidenav
And added the first toolbar demo to it from https://material.angularjs.org/latest/demo/toolbar
What I want is the toolbar to be fixed.
Codepen demo: http://codepen.io/gvorster/pen/BzWvGe
When adding this style the toolbar is fixed.
<md-toolbar class="md-hue-2" style="position:fixed !important">
But the icons on the right are gone.
Resizing the screen until the sidenav is hidden will show the right side icons.
Removing the style shows the right side icons but the toolbar is not fixed:
Is there a way to get a sticky toolbar and have the rigth side icons shown.
You have to use md-sidenav inside the md-content container. Plus try to use md-content instead of div tag. In your example you gave wrong values to layout-align attribute. Please check the appropriate values in the Docs.
Here is the basic structure for your requirement.
<md-content flex>
<md-toolbar>
</md-toolbar>
<md-content layout="column" layout-fill>
<!-- content -->
<md-sidenav>
</md-sidenav>
</md-content>
</md-content>
here is the working pen. http://codepen.io/next1/pen/xOqMjy
You need to add layouts for all containers and move the toolbar out of the md-content that should be scrolled.
<div layout="row" flex>
<md-sidenav></md-sidenav>
<div layout="column" flex>
<md-toolbar></md-toolbar>
<md-content></md-content>
</div>
<md-sidenav></md-sidenav>
</div>
Here's a working demo: http://codepen.io/anon/pen/EyWJKK?editors=1010
I've got a couple of layout issues with an Angular Material app. I'm quite new to AngularJS so hopefully it's just something obvious.
The first and most annoying is that I'm struggling with getting an Angular Material list looking as I'd like it to.
<md-content layout-padding>
<section>
<md-list ng-cloak>
<md-list-item class="md-3-line" ng-repeat="item in items | filter:filtered" go-click="item/{{item.id}}">
<md-icon class="material-icons">{{ item.acknowledgedBy ? 'assignment' : 'assessment'}}</md-icon>
<div class="md-list-item-text" layout="column" style="overflow: hidden; text-overflow: ellipsis;">
<h3>{{item.id}} - blah blah </h3>
<h4>2016-01-01 15:23:45</h4>
<h4>{{ item.description }}</h4>
</div>
<md-checkbox class="md-secondary" aria-label="Select {{item.id}}" ng-checked="selected.indexOf(item) > -1" ng-click="toggleSelection(item)"></md-checkbox>
</md-list-item>
</md-list>
</section>
</md-content>
The above worked as I expected until I added the checkbox to the list item. However this seems to prevent the text for the description being truncated with an ellipsis. Some of these descriptions can be large and I only want to show a lines worth, the primary action will show the info in full.
There is a plunker at https://plnkr.co/edit/thktG7C63cZv0FhqCzOD
My other niggle, on the same page is I'd like the both title bars to remain at the top of the page, the main app title and menu at the top and view specific title and menu options underneath. Currently the page specific one scolls up off the view.
Answer to your 2nd question.
Use md-content as the parent element since it will provide a scrollbar if needed.Now inside md-content whatever you place outside the 2nd md-content will not be scrollable and will work as a static header.
Here is a full code for that. I use simple ng-repeat and md-button to set more content and set header. You may use it as you like.
<md-content layout='column' layout-fill style='background-color:white'>
<md-toolbar class="md-whiteframe-glow-z1 site-content-toolbar">
<div class="md-toolbar-tools">
<md-menu>
<md-button aria-label="Menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
M
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button go-click="/">
Home
</md-button>
</md-menu-item>
<md-menu-item>
<md-button go-click="/items">
Items (12)
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<h2>Mobile App</h2>
<span flex></span>
<md-button ng-click="page='report';option='option'">
Report Problem
</md-button>
<md-button ng-click="page='unread';option='unread option'">
Unread Messages
</md-button>
</div>
</md-toolbar>
<div layout='row'>
<span>
Current Page -> {{page}}
</span>
<span flex></span>
<span>
Options - {{option}}
</span>
</div>
<md-content flex layout='column' style='background-color:yellow'>
<md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
<md-button ng-repeat="item in [1,2,3,4,5,6,7,8,9,0]"> {{item}}</md-button>
</md-content>
Here is a Working Example. http://codepen.io/next1/pen/yJyOvP
There are a few issues:
1. When screen is smaller than the line width of item.description things gets pushed out of the screen
This this caused by white-space: nowrap; on the <h4> tag. You can fix the layout by overriding it using white-space: normal;.
md-list-item.md-2-line .md-list-item-text h4, md-list-item.md-2-line > ._md-no-style .md-list-item-text h4, md-list-item.md-3-line .md-list-item-text h4, md-list-item.md-3-line > ._md-no-style .md-list-item-text h4 {
white-space: normal;
}
(I would actually use a <div> and give this a style instead of using <h4> tags because you get this kind of issues with most CSS frameworks.)
2. But now the text will wrap to the next line
I think it will be much easier to use the limitTo angular filter to do this with JavaScript than CSS. Set the value to something like 100, so it will show 100 characters of the string and hide the rest. Here's the original question: Limit the length of a string with AngularJS.
{{ "My String Is Too Long" | limitTo: 9 }} // outputs "My String"
3. Show both title bars
I think this is not possible unless you hack the Angular Material framework.
I am using angular material for my ionic app. I came across the fab tool bar and I have included it in my app.
Here is a demo provided in the angular material guide.
FAB toolbar demo.
This is my code:
<md-fab-toolbar md-open=true md-direction='left'>
<md-fab-trigger class="align-with-text">
<md-button aria-label="menu" class="md-fab md-primary">
<md-icon md-svg-src="img/icons/menu.svg"></md-icon>
</md-button>
</md-fab-trigger>
<md-toolbar>
<md-fab-actions class="md-toolbar-tools">
<md-button aria-label="comment" class="md-icon-button">
<md-icon md-svg-src="img/icons/ic_comment_24px.svg"></md-icon>
</md-button>
<md-button aria-label="label" class="md-icon-button">
<md-icon md-svg-src="img/icons/ic_label_24px.svg"></md-icon>
</md-button>
<md-button aria-label="photo" class="md-icon-button">
<md-icon md-svg-src="img/icons/ic_photo_24px.svg"></md-icon>
</md-button>
</md-fab-actions>
</md-toolbar>
The fab tool bar keeps getting closed whenever we press any button inside its content. Is there any way to keep the FAB toolbar open even after clicking a button inside it?
This looks like an open issue:
https://github.com/angular/material/issues/4973
As mentioned by lj-wizard, there is an open issue on github.
https://github.com/angular/material/issues/5124
You can try using md-fab-speed-dial as the issue does not occur.
https://material.angularjs.org/latest/api/directive/mdFabSpeedDial
If you do not set the animation, the buttons will be permanently visible.
I do have a toolbar
<md-toolbar layout="row">
<div class="md-toolbar-tools">
<md-button ng-click="mainCtrl.toggleSidenav('left')" ng-hide="$mdMedia('min-width: 16cm')"
class="md-icon-button">
<md-icon aria-label="Menu" md-svg-icon="https://s3-us-west-2.amazonaws.com/s.cdpn.io/68133/menu.svg">
</md-icon>
</md-button>
<h1>Test</h1>
</div>
The problem is with "'min-width: 16cm'"
I do have similar problems within a sidenav (with "ng-show="$mdMedia('max-width: 300px')") as well.
In the toolbar the button should vanish if the width is larger than 16cm. The button in the sidenav should only be visible if the with is smaller than 300.
The problem is the following: Either it is visible or not.
What am I doing wrong?
Thank you :)
Found it!
mdMedia was not referenced in the scope (Issue on Github).
So
$scope.$mdMedia = $mdMedia;
was all it needed ;)