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
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):
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.
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.
I got following markup
<div layout="column" layout-align="space-around center" ng-cloak>
<div flex="85">
<div layout="row" layout-align="space-around center">
<div flex>
<md-button class="md-fab md-warn" ui-sref="settings">
<ng-md-icon icon="settings" style="fill:white"></ng-md-icon>
</md-button>
<span class="md-subhead">Configuraciones</span>
</div>
<div flex>
<md-button class="md-fab md-primary" aria-label="Eat cake" ng-click="watch()">
<ng-md-icon icon="play_arrow" style="fill:white"></ng-md-icon>
</md-button>
</div>
</div>
</div>
<div flex="15">
<div layout="row" layout-align="space-around center">
<div flex>
<img src="public/img/buap-logo.png" class="img-rounded img-responsive center-block finalcut-img-small" style=""/>
</div>
<div flex>
<img src="public/img/lke-logo.jpg" class="img-rounded img-responsive center-block finalcut-img-small" style=""/>
</div>
</div>
</div>
</div>
Producing following:
However I need the buttons div to take 85% of its parent container height, that's why I've added flex="85" attribute, while the div with images should be 15% of the height.
I'm not sure how I should set their properties to get it like that. According to docs that should make it work.
Flex only works with width. There's no way to use flex to tell the height of a div.
The property layout="column" only means the divs are showing from top to bottom, and row from left to right.
From material.angular.org
column: Items arranged vertically. max-width = 100% and max-height is the height of the items in the container.
You can use in the img tag a css style like 'height:15vh' and give it a try
Currently I have requirement where I need to convert HTML to PDF , since I'm using angular material inputs to render UI, angular material tags are not recognized by the PDF converter tools.
Need to know if there is any way or some setting within framework where it will render the angular material tags as HTML in browser?
below is HTML which renders angular material
<div ng-controller="AppCtrl" ng-cloak>
<md-content class="md-padding" layout="row" layout-wrap layout-align="center start" layout-xs="column">
<div flex="50" flex-sm="100" flex-xs="100" layout="column">
<md-card>
<md-card-title>
<md-card-title-text>
<span class="md-headline">Card with image</span>
<span class="md-subhead">Large</span>
</md-card-title-text>
<md-card-title-media>
<div class="md-media-lg card-media"></div>
</md-card-title-media>
</md-card-title>
<md-card-actions layout="row" layout-align="end center">
<md-button>Action 1</md-button>
<md-button>Action 2</md-button>
</md-card-actions>
</md-card>
</div>
</md-content>
</div>