未加星标

Angular Material: toolbar and sidenav

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

In a previouspost, I wrote about getting started with Angular Material.

In this post, I take a look at Angular Material's toolbar and sidenav components.

Navigation

The Material Design website includes a great introduction to navigation .

Angular Material Starter Components

Angular Material includes a set of starter components .

You can use the Angular CLI to generate a starter component that includes a toolbar and a sidenav :

ng generate @angular/material:material-nav --name=nav

A great way to learn about Angular Material is to look at sample code, so I generated the complete set of starter components and added them my App project's Shared module

After looking at the material-nav starter component's sample code I decided to generate a toolbar component and a sidenav component.

Toolbar

The App's toolbar will be an application-wide, single use component so we will add it to the App's Core module :

ng generate component core/components/toolbar --module=core/core

Launch the server:

ng serve --open

You should see output like:


Angular Material: toolbar and sidenav
Toolbar Tips Toolbar Fixed

You can fix the toolbar to the top of the sidenav's content:

.crm-toolbar-fixed { position: fixed; top: 0; left: 0; right: 0; z-index: 998; }

You should see output like:


Angular Material: toolbar and sidenav
Sidenav

The App's sidenav is an application-wide, single use component so we will add it to the App's Core module :

ng generate component core/components/nav --module=core/core

Launch the server:

ng serve --open

You should see output like:


Angular Material: toolbar and sidenav
Sidenav Tips Sidenav Selection

You can workaround the <mat-nav-list> selection issue (it always highlights the first <mat-list-item> ):


Angular Material: toolbar and sidenav

By using a zero height <mat-list-item> :

<mat-sidenav-container> <mat-sidenav #sidenav mode="over"> ... <mat-nav-list> <h2 matSubheader> {{ 'MY_WORK' | translate }} </h2> <a mat-list-item routerLink="/" style="height: 0;"></a> <a *ngFor="let item of myWorkRoutes" mat-list-item (click)="sidenav.close()" routerLinkActive #routerLinkActiveInstance="routerLinkActive" [class.list-item-active]="routerLinkActiveInstance.isActive" [routerLink]="[item.route]"> <mat-icon matListIcon class="app-nav-list-icon">{{item.icon}}</mat-icon> {{item.title}} </a> <h2 matSubheader> {{ 'CUSTOMERS' | translate }} </h2> ... </mat-nav-list> </mat-sidenav> <mat-sidenav-content> <app-toolbar (toggleSidenav)="sidenav.toggle()"></app-toolbar> <router-outlet></router-outlet> </mat-sidenav-content> </mat-sidenav-container>

You should see output like:


Angular Material: toolbar and sidenav

Note:Some other great sources of sample code are the Angular Material examples and the Teradata UI Platform .

Source Code: GitHub: Serendipity References: material.angular.io : Angular Material - Components

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

分页:12
转载请注明
本文标题:Angular Material: toolbar and sidenav
本站链接:https://www.codesec.net/view/611840.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(10)