问题描述
我使用 Angular Material 创建了一个工具栏.但是,它没有响应.如何使工具栏响应?
工具栏代码:
<button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class="icon-20">home</md-icon> Angular 概念</button><button md-button [mdMenuTriggerFor]="bMenu">基本概念</button><md-menu #bMenu="mdMenu"><button md-menu-item [routerLink]="['/a4']">Angular 组件</button><button md-menu-item [routerLink]="['/cli ']">Angular CLI</button><button md-menu-item [routerLink]="['/inout']">事件发射器</button><button md-menu-item [routerLink]="['/template']">模板驱动表单</button><button md-menu-item [routerLink]="['/reactive']">数据驱动表单</button><button md-menu-item [routerLink]="['/directives']">Angular 自定义指令</button><button md-menu-item [routerLink]="['/pipes']">自定义管道</button><button md-menu-item [routerLink]="['/viewchild']">查看子项</button><button md-menu-item [routerLink]="['/view']">视图封装</button></md-菜单><button md-button [mdMenuTriggerFor]="aMenu">高级概念</button><md-menu #aMenu="mdMenu"><button md-menu-item [routerLink]="['/ngrx']">Angular Redux 使用 ngrx/store</button><button md-menu-item [routerLink]="['/guard']">Angular Guards</button><button md-menu-item [routerLink]="['/host']">Host &主机上下文</md-菜单><button md-button (click)="openDialog()"> 联系人卡片</button></md-工具栏>
问题
您需要一种使导航栏响应的方法.
解决方案
您可以将 Material Angular 与 工具栏 和 Flex-布局.
示例
npm install @angular/flex-layout --save
带有 Flex 布局的 Angular Material Toolbar 示例.
<mat-toolbar color="primary"><span>响应式导航</span><span class="example-spacer"></span><div fxShow="true";fxHide.lt-md=真"><!-- 以下菜单项将在 SM 和 XS 屏幕尺寸上隐藏--><a href="#";mat-button>菜单项1</a><a href="#";mat-button>菜单项2</a><a href="#";mat-button>菜单项3</a><a href="#";mat-button>菜单项4</a><a href="#";mat-button>菜单项5</a><a href="#";mat-button>菜单项6</a><div fxShow="true";fxHide.gt-sm=真"><a href="#";(click)=sidenav.toggle()">显示侧边菜单</a>