使用 Angular Material 创建响应式工具栏 [英] Create a Responsive Toolbar using Angular Material

问题描述

我使用 Angular Material 创建了一个工具栏.但是，它没有响应.如何使工具栏响应?

工具栏代码:

<button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class="icon-20">home</md-icon>&nbsp;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()">&nbsp;联系人卡片</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>

</mat-toolbar><mat-sidenav-container fxFlexFill class="example-container"><mat-sidenav #sidenav fxLayout=列"><div fxLayout=列"><a (click)="sidenav.toggle()";href="#";mat-button>关闭</a><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>

</mat-sidenav><mat-sidenav-content fxFlexFill>主要内容</mat-sidenav-content></mat-sidenav-container>

I have created a toolbar using Angular Material. However, it is not responsive. How can I make the toolbar responsive?

Code for toolbar:

<md-toolbar color = "primary">
    <button md-button class="md-primary" [routerLink]="['/basic']"><md-icon class = "icon-20">home</md-icon> &nbsp;Angular Concepts</button>
    <button md-button [mdMenuTriggerFor]="bMenu">Basic Concepts</button>
    <md-menu #bMenu="mdMenu">
      <button md-menu-item [routerLink]="['/a4']">Angular Component</button>
      <button md-menu-item [routerLink]="['/cli ']">Angular CLI</button>
      <button md-menu-item [routerLink]="['/inout']">Event Emitters</button>
      <button md-menu-item [routerLink]="['/template']">Template Driven Forms</button>
      <button md-menu-item [routerLink]="['/reactive']">Data Driven Forms</button>
      <button md-menu-item [routerLink]="['/directives']">Angular Custom Directives</button>
      <button md-menu-item [routerLink]="['/pipes']">Custom Pipes</button>
      <button md-menu-item [routerLink]="['/viewchild']">View Child</button>
      <button md-menu-item [routerLink]="['/view']">View Encapsulation</button>
    </md-menu>

    <button md-button [mdMenuTriggerFor]="aMenu">Advanced Concepts</button>
    <md-menu #aMenu="mdMenu">
      <button md-menu-item [routerLink]="['/ngrx']">Angular Redux using ngrx/store</button>
      <button md-menu-item [routerLink]="['/guard']">Angular Guards</button>
      <button md-menu-item [routerLink]="['/host']">Host & Host-Context</button>
    </md-menu>

    <button md-button (click)="openDialog()">&nbsp;Contact Card</button>
  </md-toolbar>

解决方案

Problem

You need a way to make your navigation bar responsive.

Solution

You can use Material Angular with ToolBar and Flex-Layout.

Example

npm install @angular/flex-layout --save

Example Angular Material Toolbar with Flex Layout.

<div style="height: 100vh;">

  <mat-toolbar color="primary">

    <span>Responsive Navigation</span>

    <span class="example-spacer"></span>

    <div fxShow="true" fxHide.lt-md="true">

      <!-- The following menu items will be hidden on both SM and XS screen sizes -->

      <a href="#" mat-button>Menu Item 1</a>

      <a href="#" mat-button>Menu Item 2</a>

      <a href="#" mat-button>Menu Item 3</a>

      <a href="#" mat-button>Menu Item 4</a>

      <a href="#" mat-button>Menu Item 5</a>

      <a href="#" mat-button>Menu Item 6</a>

    </div>

    <div fxShow="true" fxHide.gt-sm="true">

      <a href="#" (click)="sidenav.toggle()">Show Side Menu</a>

    </div>

  </mat-toolbar>

  <mat-sidenav-container fxFlexFill class="example-container">

    <mat-sidenav #sidenav fxLayout="column">

      <div fxLayout="column">

        <a (click)="sidenav.toggle()" href="#" mat-button>Close</a>

        <a href="#" mat-button>Menu Item 1</a>

        <a href="#" mat-button>Menu Item 2</a>

        <a href="#" mat-button>Menu Item 3</a>

        <a href="#" mat-button>Menu Item 4</a>

        <a href="#" mat-button>Menu Item 5</a>

        <a href="#" mat-button>Menu Item 6</a>

      </div>

    </mat-sidenav>

    <mat-sidenav-content fxFlexFill>Main content</mat-sidenav-content>

  </mat-sidenav-container>

</div>

这篇关于使用 Angular Material 创建响应式工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！