How to achieve the following layout (with "plus" icon below the card layout) ? :
I tried the following code :
<section layout="column" style="background-color: black;">
<md-card flex="100">
<md-card-header style="background-color: greenyellow; ">
<h2>Card headline</h2>
</md-card-header>
<md-card-content class="inline">
Card content
</md-card-content>
</md-card>
</section>
How's this?
<div class="demo" ng-app="MyApp">
<md-content class="md-padding" flex-gt-xs="50">
<div layout="column" layout-align="center center">
<md-card>
<md-card-title>
...
</md-card-title>
</md-card>
<md-button class="md-fab" aria-label="Eat cake">
<md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>
</div>
</md-content>
</div>
Here's a Codepen modified from one of the original card examples.
Related
Part of my html file below:
<md-content class="md-padding" layout="row" layout-wrap>
<md-card flex="30" ng-repeat="classified in classifieds" class="classified">
<img src={{classified.image}} class="md-avatar"></img>
<md-card-content>
<div class="classified-info" ng-hide="showContact">
<h2 class="md-title">{{classified.title}}</h2>
<h3>{{classified.price | currency}}</h3>
<p>{{classified.description}}</p>
</div>
<div class="classfied-contact" ng-show="showContact">
<p><md-icon class="mdi mdi-account"></md-icon>{{classified.contact.name}}</p>
<p><md-icon class="mdi mdi-phone"></md-icon>{{classified.contact.phone}}</p>
<p><md-icon class="mdi mdi-account"></md-icon>{{classified.contact.email}}</p>
</div>
<div layout="row">
<md-button ng-hide="showContact" ng-click="showContact=true">Contact</md-button>
<md-button ng-show="showContact" ng-click="showContact=false">Details</md-button>
<md-button ng-hide="showAdmin" ng-click="showAdmin=true">Admin</md-button>
<md-button ng-show="showAdmin" ng-click="showAdmin=false">Close</md-button>
</div>
<div class="classified-admin" ng-if="showAdmin">
<h3>Admin</h3>
<div layout="row">
<md-button class="md-primary" ng-click="editClassifieds(classified)">Edit</md-button>
<md-button class="md-warn">Delete</md-button>
</div>
</div>
</md-card-content>
</md-card>
</md-content>
Despite having layout-wrap in my md-content tag, I have some content of the card spilling over when I click on an expanding button inside it(see below image):
I am trying to reproduce this codepen with Angular. However, Angular is not backwards compatible. How can this be done with Angular?
<div ng-controller="AppCtrl" class="carddemoBasicUsage" ng-app="MyApp">
<md-content class="md-padding">
<md-card layout="row"
layout-sm="column">
<div flex-gt-sm="33"
layout-align="center center"
layout="column">
<img src="http://i.imgur.com/2uL6DQ8.jpg"
flex
class="md-card-image">
</div>
<div layout="column" flex>
<md-card-content flex>
<h2 class="md-title">Paracosm</h2>
<p>
lorem ipsum
</p>
</md-card-content>
<div class="md-actions" layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</div>
</div>
</md-card>
<md-content>
</div>
For those who are interested in a horizontal card, just use flexbox and set the layout to row on the parent div.
<md-card>
<md-card-header>
<md-card-title> Title </md-card-title>
<md-card-subtitle> Subtitle</md-card-subtitle>
</md-card-header>
<div fxLayout="row">
<img md-card-image src="" fxFlex="25">
<span fxFlex="10"></span>
<md-card-content fxFlex="65">
<p>
content
</p>
</md-card-content>
</div>
<md-card-actions>
<button md-button>Action 1</button>
<button md-button>Action 2</button>
</md-card-actions>
</md-card>
Angular 1.x does not support material 2. If you want to use cards in material 2 then you can look here https://material.angular.io/components/component/card
<md-content flex class="md-padding page-content">
<div ui-view flex layout="column">
<div class="center" layout="row" flex>
<md-content layout="column" flex="30">
<md-list-item ng-repeat="entity in vm.entities">
<md-checkbox ng-model="entity.selected"></md-checkbox>
<p>{{entity.info}}</p>
<md-icon class="md-secondary"
ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
</md-list-item>
</md-content>
<md-divider></md-divider>
<md-content layout="column" flex="70">
Details here!
</md-content>
</div>
</div>
</md-content>
In my code above, the outermost md-content occupies the complete page; however with the ui-view gived column layout and flex class, I expected it to occupy the complete height of the page, however it occupies the height consumed by the content only.
Can you please help with the error in the code, so ui-view can occupy the complete page?
Here you go - CodePen
You need to utilise layout-fill. From the docs
In order for this to work an upper element must occupy the full screen. In the above example it is <body>.
Markup
<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp" layout-fill>
<md-content layout-fill flex class="md-padding page-content">
<div ui-view flex layout="column" layout-fill>
<div class="center" layout="row" flex>
<md-content id="list" layout="column" flex="30">
<md-list-item ng-repeat="entity in vm.entities" flex="none">
<md-checkbox ng-model="entity.selected"></md-checkbox>
<p>{{entity.info}}</p>
<md-icon class="md-secondary"
ng-click="doSecondaryAction($event)" aria-label="Chat">message</md-icon>
</md-list-item>
</md-content>
<md-divider></md-divider>
<md-content id="details" layout="column" flex="70">
Details here!
</md-content>
</div>
</div>
</md-content>
</div>
CSS
.page-content {
background: yellow
}
#list {
overflow-y: auto;
overflow-x: hidden;
}
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 want to design a page just like the official angular-material website . The toolbar and side nav is fixed while the main content scrolls . I am trying to do that for few hours but haven't been got any success .
here is my html template for profile
profile.html
<div layout="row" flex>
<md-sidenav class="md-sidenav-left md-whiteframe-z2 profileSidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
<md-toolbar layout="row" class="md-hue-2">
<h1 class="md-toolbar-tools" layout-align-gt-sm="center">Hello World</h1>
</md-toolbar>
<md-content>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
</md-content>
</md-sidenav>
<div layout="column" flex>
<md-toolbar layout="row" class="profileToolBar">
<button ng-click="toggleSidenav('left')" hide-gt-sm>
<span class="visually-hidden">Menu</span>
</button>
<h1 class="md-toolbar-tools">Hello World</h1>
</md-toolbar>
<md-content layout="column" flex class="md-padding">
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
<div class="checkDiv">
jello
</div>
</md-content>
</div>
</div>
sidenav and toolbar has been given custom class with position:fixed ; values , but after making position fixed for sidenav the toolbar and content hides behind it
you can ise $mdSticky to make element fixed
app.directive('sticky', function($mdSticky, $compile) {
var SELECT_TEMPLATE =
'<md-content><md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> <md-card layout="column"> <md-card-content> <h2>Card headline</h2> <p>Card content</p> </md-card-content> <md-card-footer> Card footer </md-card-footer> <div class="md-actions" layout="column"> <md-button>content</md-button> </div> </md-card> </md-content>';
return {
restrict: 'A',
replace: true,
//template: SELECT_TEMPLATE, // you can use template HTML or load HTML with templateURL as we do it in next line
templateUrl:appInfo.template_directory+'templates/sticky-sidebar.directive.html',
link: function(scope,element) {
$mdSticky(scope, element, $compile(SELECT_TEMPLATE)(scope));
}
};
});
as described here:
https://www.coditty.com/code/angular-material-how-to-make-custom-elements-sticky-using-mdsticky
I solve it with this code:
index.html:
<body layout="column">
<div flex layout="column" ng-include="'app/layout/shell.html'"></div>
</body>
shell.html
<div layout="row" flex style="height: inherit; overflow: hidden; background-color: transparent" ng-controller="Shell" layout-fill class="fondo">
<div ng-include="'app/layout/left-side-nav.html'"></div>
<md-content flex layout="column" role="main" style="height: inherit; background-color: transparent; " class="">
<div ng-include="'app/layout/app-toolbar.html'"></div>
<div layout="row" layout-align="space-around" ng-if="dataLoading.init" class="loader">
<md-progress-circular class="md-accent" md-mode="indeterminate"></md-progress-circular>
</div>
<md-content flex style="background-color: transparent; flex-direction: column;" ng-hide="dataLoading.init" >
<div ui-view="main" class="noscrollbar" style=" margin:auto"></div>
</md-content>
</md-content>
<div ng-include="'app/layout/right-side-nav.html'"></div>
</div>
Use this attribute md-is-locked-open="true" on <md-sidenav> tag.