I'm starting to learn AngularJS and Angular Material.
I have a problem on understanding the md-tabs.
<section layout="row">
<div layout="column"><img id="ApplicationLogo" src="https://material.angularjs.org/latest/img/icons/angular-logo.svg"></div>
<div layout="column" id="ApplicationTitle" layout-align="center start">Application Title</div>
<div layout="column" id="ApplicationWelcome" flex layout-align="center end">Angemeldet als Test User</div>
<div layout="column" layout-align="center center"><img id="ApplicationAvatar" src="http://findicons.com/files/icons/1072/face_avatars/300/d05.png"></div>
</section>
Here is a demo: http://plnkr.co/edit/72ZNb70BjSM6xP7RnSvH?p=preview
Any hint why my tabs do not change their content?
you linked to wrong angular material css version.
you used angular-material.js 1.0.7 and angular-material.css 1.1.0-rc2.
changed to the correct version of css should work. (/1.0.7/angular-material.css)
The reason that it didn't work was that the required css class md-visually-hidden in 1.0.7 is renamed to _md-visually-hidden in the 1.1.0.
Don't want to go into too much detail unless you ask for. But try to correct the version and see what happen.
Related
I am trying to understand Angular Material layout. I have a section of HTML that is always floated to the right and it contains several lines in a column. That section is rendered as expected when using a smaller device. However, when the device is a small hand-held, in addition to adjusting the right-floating section, I don't want to include some of the lines in that column.
For example, on a large screen device the layout would be:
left-panel middle-panel right-panel-line 1
right-panel-line 2
right-panel-line 3
and then on a small screen device the layout would be:
left-panel
middle-panel
right-panel-line 1
where the 2nd and 3rd lines in the right-floating panel is not displayed.
Question: how do I conditional use the Angular Material layout directives to do this?
Thanks,
-Andres
Available Plunker here
As you can see in angular-material layout extra options documentation, you can conditionally show and hide elements depending on the screen size.
Code for reference, see plunker for the complete details:
<div layout="row" layout-xs="column">
<div flex>left-panel</div>
<div flex>middle-panel</div>
<div layout="column" flex>
<div flex>right-panel-line 1</div>
<div flex hide-xs>right-panel-line 2</div>
<div flex hide-xs>right-panel-line 3</div>
</div>
</div>
Hope it helps.
Here you go - CodePen
Markup
<div ng-controller="AppCtrl" ng-cloak="" ng-app="MyApp" layout-fill layout-gt-xs="row" layout-xs="column">
<div style="background:red" flex></div>
<div style="background:green" flex></div>
<div flex layout="column">
<div style="background:purple" flex></div>
<div style="background:yellow" flex hide-xs></div>
<div style="background:cyan" flex hide-xs></div>
</div>
</div>
The trick is to use layout and hide depending on screen size.
https://material.angularjs.org/latest/layout/container
https://material.angularjs.org/latest/layout/options
I'm designing a simple user interface in Angular Material for a web application, but I have the following problem with the <md-sidenav> directive:
The md-is-locked-open attribute seems not to be working. I tried to set it to false, but the sidenav is anyway displayed, I tried to set it using $mdMedia service, but the sidenav is not hidden on smaller screens. How can I make it work? My HTML below:
<body ng-app="test" layout="column">
<md-toolbar class="md-toolbar-tools" layout-align="center">
<p>EASYRASH</p>
</md-toolbar>
<div layout="row" flex>
<md-sidenav md-is-locked-open="$mdMedia('gt-md')" class="md-sidenav-left md-whiteframe-6dp" md-component-id="left">
</md-sidenav>
</div>
</body>
And JS:
var app = angular.module("test", ['ngMaterial']);
As discussed in the comments, the angular material version he was using was outdated. When he updated it everything started working as expected =)
This question might seem silly question. But I'm really stuck with it.
I am trying to create a carousel with above center title and below centered Description text. There are lot of example on google but I couldn't find anything appropriate.
I am using angular-material and there is no carousel implemented in angular-material till now.
there is awesome carousel in materializecss but when I am adding materialize in project lot of element CSS conflicting because of angular-material and materializecss.
then I decided to use some other directives like JK carousel it is not allowing me create text on image.
there is carousel in ui.bootstrap it also getting conflict with drop downs component.
Could anyone please tell me how can I achieve my requirement?
I have to use angular-material, there's no other choice. So any help using angular-material will be a great support.
I am currently using angular 3d carousel in my angular-material project. It has html slide version. You can build all your angular material classes in that slide html.
<carousel3d-slide ng-repeat="slide in app.slides2 track by $index" ng-style="{'background': slide.bg}">
<div style="padding: 20px; color: #fff">
<md-card md-theme="{{ showDarkTheme ? 'dark-grey' : 'default' }}" md-theme-watch>
<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>
</carousel3d-slide>
I have this code , here when screen size is more than small layout-align is working well but when it is smaller than Small layout align is not working
<div layout-gt-sm="row" layout-lt-sm="column" flex layout-align="space-around center">
<!-- main content like jokes and news will go here -->
<div flex-gt-sm="55" flex="80">
<md-card class="md-whiteframe-5dp">
hello</md-card>
</div>
<!-- todo and upcoming event will go here -->
<div flex-gt-sm="35" flex="80">
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
<div>
<ng-include src="'templates/dashboard/todo.html'"></ng-include>
</div>
</div>
</div>
thanks
Angular Material no longer offers the layout-lt-* directives. Instead, you should just do:
<div layout="column" layout-gt-sm="row">
This is likely causing your layout align directives to not work because they do not currently have a parent layout in your code.
You can read a bit more here: https://material.angularjs.org/HEAD/layout/container
i want to use
<div layout="row" layout-align="space-around center">
<div style="width:200px;background-color:#00f">left</div>
<div style="width:300px;background-color:#0f0" ng-include="'views/home/interests.html'"></div>
<div style="width:500px;background-color:#f00">right</div>
</div>
as defined in this page https://material.angularjs.org/latest/layout/alignment
What i must include in my project, is there an Angular-Layout.js to install with bower ?
It should be aligned in a Row, but here the result :
As it is a part of the Angular Material library, you must include that library in your page.
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
See: https://material.angularjs.org/latest/getting-started