How can I design a nav-bar styled like the one Google+ has using
angular material ?
I don't know how to get this nav bar, and with the search box styled this way,
it thought material design made by google was used for this, but i can't see such things in angular material implementation.
I wanted to make a style similar to G+ for an app, coz it's very nice and suitable for that one.
Here you go!
It´s not exactly as the design but it´s a good starting point for you..
http://codepen.io/mackelito/pen/VKxGmR
Note: it´s just placeholders so no functionality yet.. have fun! :)
for the icons I have added
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
in the head tag
First of all, angular material provides no way to put in an input in that specific style. It implements the material spec; as it turns out, even google does not completely follow it. The navbar present on google+ other various google apps is not in the spec. This
<md-toolbar ng-show="!showSearch">
<div class="md-toolbar-tools">
<md-button ng-click="toggleSidenav('left')" hide-gt-md aria-label="Menu">
<ng-md-icon icon="menu"></ng-md-icon>
</md-button>
<h3>
Dashboard
</h3>
<span flex></span>
<md-button aria-label="Search" ng-click="showSearch = !showSearch">
<ng-md-icon icon="search"></ng-md-icon>
</md-button>
<md-button aria-label="Open Settings" ng-click="showListBottomSheet($event)">
<ng-md-icon icon="more_vert"></ng-md-icon>
</md-button>
</div>
<md-tabs md-stretch-tabs class="md-primary" md-selected="data.selectedIndex">
<md-tab id="tab1" aria-controls="tab1-content">
Latest
</md-tab>
<md-tab id="tab2" aria-controls="tab2-content">
Favorites
</md-tab>
</md-tabs>
</md-toolbar>
is a great example of a material toolbar.
Also keep in mind that the input has no special integration with the toolbar, so you might have some problems.
Related
I develop a small angular material application. My objective is to obtain the following design for a card, that fit on every kind of media (desktop, mobile, tablette)
my "app.component.html" is the following
<mat-toolbar color="primary">
<div style="width:100%;" class="md-toolbar-tools" >
Liste des annonces
<span flex></span>
</div>
</mat-toolbar>
<div fxLayout="row">
<div fxFlex="20%"></div>
<div fxFlex="60%">
<mat-card *ngFor="let annonce of annonces; let i = index" style="border:red">
<mat-card-content style="border:blue">
<img src="./../assets/image/image{{i+1}}.jpg" alt="Avatar" style="position:absolute;top:0px;left:0px;width:40%;height:100%">
<div class="container" style="left: 45%; top:10px;">
<div style="left:70%;">{{annonce.dateConstruction | date:'dd MMMM yyyy'}}</div>
<div>
<span>{{annonce.type}}</span>
<span style="float:right">{{annonce.prix}}</span>
</div>
<h4>{{annonce.surface}}</h4>
<h4>{{annonce.adresse}}</h4>
<div style="left:45%;">
<p>{{annonce.description}}</p>
</div>
</div>
</mat-card-content>
</mat-card>
</div>
<div fxFlex="20%"></div>
</div>
<router-outlet></router-outlet>
I am terrible in placing elements and text in html pages, and therefore in a material card. I obtain the following output in the browser
Furthermore when I shrink my browser, I can't see the element and text on the rigth of the image placed correctly. I tried to reproduce the same on stackblitz (https://stackblitz.com/edit/angular-pexq15?file=package.json), but I got trouble with the angular material tags that are not taken in account.
So could you help me and tell me what is going wrong and comment the correct code so I improve myself in html/css. Thanks a lot
You should try leveraging the #angular/flex-layout Library for this. Additionally, you should consider moving your styles to your CSS File, since this will make your HTML File a lot cleaner and the styles more reusable. In your stackblitz you missed to include the styles for #angular/material in your SCSS File and you did not import the #angular/flex-layout module, which is why your stylings were messed up.
I tried to fix your example on Stackblitz. To get the desired spacings for your text, simply add paddings or margins to the left of those elements. Also beware of your image: You have to add a fitting height property, or it will become cropped/stretched.
I am learner and i would like to know what is the diff b/w ionic and HTML tags and which tags are good for Hybrid mobile developing apps,Can some one suggest me please below two code working fine in my mobile app but which tags are most preferable?
<div class="list">
<div class="item item-divider"> <!-- this creates the divider -->
</div>
<a class="item" href="#">
</a>
<ion-list>
<ion-item class="item-toggle">
Enable Friends
<label class="toggle">
<input type="checkbox" ng-model="settings.enableFriends">
<div class="track">
<div class="handle"></div>
</div>
</label>
</ion-item>
</ion-list>
The difference between the two are the pure html that just use the
css, or the directives that have extended the functionality.
The ion- prefixed directives, ion-list,ion-item, etc, are angular
directives that let you have extended features (swipe to delete,
reorder, etc).
link
As mentioned here, main difference is that ionic tags serves more functionalities, and other than that.
ion-list comes with certain styles already applied to it so that you do not have to write custom CSS for them to look presentable. Also ion-list has features that come out of box enabling you to put together a quick prototype. It also includes features like swipe which are normal actions taken by users on mobile so that developers dont have to write custom javascript to enable such features.
I recently started using angular-material and am struggling/unsure about opening/closing a mat-menu... I see in the examples on the angular-material documentation site that they assign an id to the menu and then apply a directive to the button that is used to toggle the menu. e.g. [matMenuTriggerFor]="menu"
How can I go about writing a directive that does that? I'm not sure how to pass a reference to a specific menu to a directive that then calls the toggle() method on the DOM element with that id?
The following code produces the errors:
Can't bind to 'matMenuTriggerFor' since it isn't a known property of 'button'.
There is no directive with "exportAs" set to "matMenu".
My code:
<li>
<button mat-icon-button [matMenuTriggerFor]="stockSystemMenu">
<mat-icon class="sn-item">
<i class="material-icons">archive</i>
</mat-icon>
</button>
<span class="sn-item" (click)="toggleMenu(stockSystemMenu)">Stok System</span>
<mat-menu #stockSystemMenu="matMenu">
<button mat-menu-item>
<mat-icon>
<i class="material-icons">chevron_right</i>
</mat-icon>
<span>Service 1</span>
</button>
</mat-menu>
</li>
There is confusion because Material introduced a breaking change as I understand it.. See material 2 Changelog - Breaking Changes
Starting with Material 2.0.0-beta.12. Use mat instead of md-*.. Seems only some of the docs at material.angular.io are updated with mat. Specifically, if you click view source and see md, I believe they have yet to replace it with mat.
So either update to Material 2.0.0-beta.12 and use mat-*, or use md-*.
"Your code is correct, you don't need to write matMenuTriggerFor directive, it is part of the API, make sure you have imported the MatMenuModule, MatButtonModule, and MatIconModule into your app module." - from comments
Here is my first project (I'm not a web dev, it's an example).
https://codepen.io/Ziratsu/pen/EWyoLN
I've put anchors in my Header, for the different parts of my portfolio, but they aren't working when I click on them..
I've put the correct "ID", I don't know why this don't work.
<button class="btn" id="Bouton1" type="button">About</button>
And here is the reference of my anchor, with the same ID.
<p id="textb"> Front-End Developer and UX/UI designer,</br> with practical experience in project management, branding strategy,</br> and creative direction; devoted to functional programming and information architecture.</br>Web Developer - User Experience Designer - Graphic Artist</p> </div>
Thank's if you take time to reply!
Try to use a anchor tag instead of a button:
<a class="btn btn-primary" href="#textb">About</a>
You can use the btn class to make it look like a button if you're using bootstrap, which I asumed because of the btn class.
Try removing the button element:
About
Just design the a if you want to make it have a button-like appearance
I am building Android application using Angularjs, Angular material and Cordova.
Can somebody help on below issues. Can someone suggest tips/tricks to improve/fix below points?
Issue ~1:
Animations are very very slow on android device. Mainly ripple effects/animations given to md-button are slow. See below Html .
Code:
<div>
<md-content>
<md-list>
<md-item ng-repeat="item in tags">
<md-item-content>
<md-button class="md-grid-item-content tile"
aria-label="{{item.name}}"
ui-sref="crop({cropId: item.id})">
<div class="md-tile-center">
<img ng-src="{{item.imageSource}}" class="face" alt="{{item.name}}" height="64" width="64">
</div>
</md-button>
<div class="md-tile-content">
<h3>{{item.name}}</h3>
<h4>{{item.text}}</h4>
</div>
</md-item-content>
</md-item>
</md-list>
</md-content>
</div>
Issue ~2:
Multiple click on md-button makes application not responding. Does not give intuition of which button is active or focus.
Issue ~3:
I observed that with Crome browser on Laptop, there are few problems for demo site also (https://material.angularjs.org), md-button icons are not visible. However same works in firefox. May be md-icon has changed in new build?
See : Git issue 1177