Как сделать отзывчивую навигационную панель с использованием материала Angular 2?

Я пытаюсь создать панель навигации, используя Angular материал 2, который сворачивается на маленьких экранах, таких как мобильные устройства и планшеты.

Мне удалось найти только md-button но не md-menu-bar как было в материале Angular.

Ответы

Ответ 1

Вот что я использовал для создания адаптивной nav-bar используя Angular2+ Material 2 и flex-layout в приложении angular-cli.

(Пожалуйста, посетите Установить угловой материал и угловой CDK)

1) Установите flex-layout

npm install @angular/flex-layout -save

2) Включите flex-layout в ваш app.module.ts

import {FlexLayoutModule} from "@angular/flex-layout";

3) Импорт

imports: [
 BrowserModule,
 FormsModule,
 HttpModule,
 RoutingModule,
 FlexLayoutModule,
MyOwnCustomMaterialModule // Please visit the link above "Install Angular Material and Angular CDK", and check (Step 3: Import the component modules).
],

app.component.html

<mat-toolbar color="primary">

    <button mat-button routerLink="/">
    <mat-icon>home</mat-icon> 
        {{title}}</button>

    <!-- This fills the remaining space of the current row -->
    <span class="fill-remaining-space"></span>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
        <button mat-button routerLink="/products">Products</button>
        <button mat-button routerLink="/dashboard">Dashboard</button>
    </div>
    <button mat-button [mat-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
     <mat-icon>menu</mat-icon>
    </button>

</mat-toolbar>
<mat-menu x-position="before" #menu="matMenu">
    <button mat-menu-item routerLink="/products">Products</button>
    <button mat-menu-item routerLink="/dashboard">Dashboard</button>
    <!--<button mat-menu-item>Help</button>-->
</mat-menu>

Ответ 2

Самый простой способ создать адаптивный Navbar с материалом является использование угловых 6 CLI схемы.

Обновите ваш Angular проект до 6 или создайте новый проект
нг добавить @угловой/материал
ng generate @angular/material: material-nav --name = my-nav

(Если вы получаете "Коллекция" @angular/material "не может быть разрешена" при запуске ng add @angular/material, см. Это)

Затем используйте сгенерированный компонент <app-my-nav></app-my-nav> Добавьте вышеуказанный тег в ваш основной компонент

Отзывчивый вид на настольном ПК:

Адаптивное свернутое меню с низким разрешением:

Первоначально это было замечено в блоге Angular.

Ответ 3

Вот мой любимый способ создания адаптивной панели навигации в Angular. Если вы используете Angular 6, убедитесь, что вы используете версию 6. 1+
Рабочий пример для Stackblitz: https://stackblitz.com/edit/angular-v6xwte

Пример на меньшем экране:

Пример на большом экране:

Вот точные шаги, как это сделать:

1) Установите необходимые пакеты. Введите в своем терминале:

npm install --save @angular/material @angular/cdk @angular/animations

npm install @angular/flex-layout --save

2) Импортируйте необходимые модули в ваш app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import {
  MatIconModule, MatButtonModule, MatSidenavModule, MatToolbarModule
} from '@angular/material';

Не забудьте добавить эти модули в массив импорта ниже.

3) Добавьте ссылку на значки материалов в ваш index.html
Ссылка должна идти перед любым угловым контентом.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

4) В вашем styles.css добавьте угловую тему и установите поля на 0%

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";
body{
    margin: 0%;
}

5) Добавьте HTML-код панели инструментов в ваш app.component.html

<div style="height: 100vh;"> 
<mat-toolbar color="primary">
    <div fxShow="true" fxHide.gt-sm="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>
    <a mat-button class="companyName" routerLink="/">
      <span>Site name</span>
    </a>
    <span class="example-spacer"></span>
    <div fxShow="true" fxHide.lt-md="true">
      <a mat-button routerLink="/about-us">About us</a>
      <a mat-button routerLink="/prices">Prices</a>
      <a mat-button routerLink="/start-page">Start page</a>
      <a mat-button routerLink="/offer">Offer</a>
      <a mat-button routerLink="/contact">Contact</a>
    </div>
  </mat-toolbar>
  <mat-sidenav-container fxFlexFill class="example-container">
    <mat-sidenav color="primary" #sidenav fxLayout="column" mode="over" opened="false" fxHide.gt-sm="true">
      <div fxLayout="column">
        <a mat-button routerLink="/about-us">About us</a>
        <a mat-button routerLink="/prices">Prices</a>
        <a mat-button routerLink="/start-page">Start page</a>
        <a mat-button routerLink="/offer">Offer</a>
        <a mat-button routerLink="/contact">Contact</a>
      </div>
    </mat-sidenav>
    <mat-sidenav-content fxFlexFill>
      Awesome content
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

6) Стиль панели инструментов в вашем app.component.css

.companyName{
    font-size: 150%;
}
div {
    overflow: inherit;
}
a{
    text-decoration: none;
    font-size: 110%;
    white-space: normal;
}
button{
    font-size: 110%;
    min-width: min-content;
}
.example-icon {
    padding: 0 14px;
  }

  .example-spacer {
    flex: 1 1 auto;
  }
  .mat-sidenav-content{
      font-size: 200%;
      text-align: center;
  }

Ответ 4

Посмотрите на angular2-material проекта на github. Вот список компонентов дизайна материалов, которые они опубликовали до сих пор:

https://www.npmjs.com/~angular2-material

Кроме того, я думаю, что вы ищете md-sidenav или md-toolbar.

md-sidenav - https://www.npmjs.com/package/@angular2-material/sidenav

md-toolbar - https://www.npmjs.com/package/@angular2-material/toolbar

Примечание: проект все еще находится в альфа-версии, что означает, что могут быть серьезные изменения в их API. Не рекомендуется использовать в производстве.

Ответ 5

Моя грубая попытка изменить ответ с помощью панели инструментов с реализацией ящика с новыми именами компонентов на angular -material 5.0.2

Чтобы сделать: необходимо, чтобы CSS всех ссылок заголовка был исправлен. Значок меню должен быть прозрачным.

https://responsivematerial2.stackblitz.io/

.mat-sidenav-container {
  background: rgba(0, 0, 0, 0.08);
}

.blank-grow {
  flex: 1 1 auto;
}

<mat-sidenav-container fullscreen>
  <mat-sidenav #sidenav>
    <mat-nav-list>
      <a mat-list-item>
        <mat-icon mat-list-icon>home</mat-icon>
        <span mat-line>home</span>
      </a>

      <a mat-list-item>
        <mat-icon mat-list-icon>backup</mat-icon>
        <span mat-line>Backup</span>
      </a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-toolbar color="primary">
    <button mat-icon-button (click)="sidenav.open()" fxHide="false" fxHide.gt-sm>
      <mat-icon>menu</mat-icon>
    </button>
    <span> Big Header</span>
    <span class="blank-grow"></span>
    <div fxLayout="row" fxShow="false" fxShow.gt-sm>
      <a>
        <mat-icon mat-list-icon>home</mat-icon>
        <span mat-line>home</span>
      </a>

      <a>
        <mat-icon mat-list-icon>backup</mat-icon>
        <span mat-line>Backup</span>
      </a>
    </div>
  </mat-toolbar>
</mat-sidenav-container>

Ответ 6

Вы можете создать mat-sidenav меню, используя mat-toolbar, mat-sidenav и flex-layout (fxFlexFill ,...).

Смотрите пример Stackblitz.

Больше информации...

Ответ 7

Я отредактировал ответ user2662006 с некоторыми исправлениями и оптимизацией кода ниже. Обратите внимание, что мои точки StackOverflow в настоящее время слишком малы, чтобы даже предоставить мне право отправлять комментарии, не говоря уже о редактировании.

1) Установите угловой материал и угловой CDK

2) Установите flex-layout

npm install @angular/flex-layout -save

3) Включите flex-layout в ваш app.module.ts

import {FlexLayoutModule} from "@angular/flex-layout";

4) Импорт связанных материалов и гибких модулей

imports: [
 ...,
 FlexLayoutModule,
 MatToolbarModule,
 MatIconModule,
 MatMenuModule,
 MatButtonModule,
],

app.component.html

<mat-toolbar color="primary">
    <button mat-button routerLink="/">
        <mat-icon>home</mat-icon> 
        {{title}}
    </button>

    <span class="fill-remaining-space"></span>

    <div fxLayout="row" fxHide fxShow.gt-sm>
        <button mat-button routerLink="/products">Products</button>
        <button mat-button routerLink="/dashboard">Dashboard</button>
    </div>
    <button mat-button [mat-menu-trigger-for]="menu" fxShow fxHide.gt-sm>
     <mat-icon>menu</mat-icon>
    </button>

</mat-toolbar>
<mat-menu x-position="before" #menu>
    <button mat-menu-item routerLink="/products">Products</button>
    <button mat-menu-item routerLink="/dashboard">Dashboard</button>
</mat-menu>

app.component.css

.fill-remaining-space {
   /*This fills the remaining space, by using flexbox.  
  Every toolbar row uses a flexbox row layout. */
  flex: 1 1 auto;
}

Заметки:

измените размер страницы, чтобы протестировать адаптивный макет
взгляните на документацию по API Flex-layout

Ответ 8

Моя презентация " Создание корпоративных интерфейсов, которая понравится вашим пользователям", описывает некоторые из этих шаблонов для Angular Material. Ссылки на примеры StackBlitz находятся в примечаниях докладчика.

Отзывчивая панель кнопок с меню переполнения: она может быть расположена внутри или под TopNav. https://stackblitz.com/edit/material-responsive-button-bar?file=app%2Fbutton-bar%2Fbutton-bar.component.ts

Динамическое вложенное меню TopNav: обратите внимание, что это меню доступно не полностью. Для полноценной поддержки хорошего опыта требуется больше работы. https://stackblitz.com/edit/dynamic-nested-topnav-menu?file=app/app.component.ts

Динамическое вложенное меню SideNav: если вы используете шаблон преобразования для переключения TopNav на SideNav на мобильном устройстве, это показывает, как создать динамическое меню SideNav. https://stackblitz.com/edit/dynamic-nested-sidenav-menu?file=app%2Fapp.component.html