Я пытаюсь создать панель навигации, используя материал Angular 2, который сворачивается на маленьких экранах, например мобильные устройства и планшеты.
Мне удалось найти только md-button
, но не md-menu-bar
, как было в материалах Angular.
Я пытаюсь создать панель навигации, используя материал Angular 2, который сворачивается на маленьких экранах, например мобильные устройства и планшеты.
Мне удалось найти только md-button
, но не md-menu-bar
, как было в материалах Angular.
Вот что я использовал для создания адаптивного nav-bar
с использованием Angular2+ Material 2 и гибкого макета в приложении angular-cli
.
(Пожалуйста, посетите Установить Angular Material и Angular CDK)
1) Установить flex-макет
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>
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;
}
Примечание: для проверки измените размер страницы.
взгляните на flex-layout документы
md-menu-item
в меню, которое показывается в свернутом виде
- person Deniss M.; 11.08.2017
Вот мой любимый способ создания адаптивной панели навигации в 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
Ссылка должна идти перед любым содержимым Angular.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
4) В вашем styles.css добавьте тему Angular и установите поля на 0%
@import "~@angular/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;
}
Самый простой способ создать адаптивную панель навигации с помощью Material — использовать интерфейс командной строки Angular схема.
(Если вы получаете сообщение «Коллекция @angular/material не может быть разрешена» при запуске ng add @angular/material, см. это)
Затем используйте сгенерированный компонент <app-my-nav></app-my-nav>
Добавьте указанный выше тег к основному компоненту.
Адаптивное представление на ПК:
Отзывчивое свернутое меню с низким разрешением:
Первоначально это было замечено в блоге Angular.
Взгляните на проект 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 могут быть внесены критические изменения. Не рекомендуется использовать в производстве.
Моя грубая попытка изменить ответ с помощью панели инструментов с реализацией ящика с новыми именами компонентов с 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>
Я отредактировал ответ user2662006, добавив некоторые исправления и оптимизации кода ниже. Обратите внимание, что мои баллы StackOverflow в настоящее время слишком низки, чтобы даже предоставить мне право отправлять комментарии, не говоря уже о редактировании.
1) Установите Angular Material и Angular CDK
2) Установить flex-макет
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;
}
Заметки:
Моя презентация, Создавайте корпоративные пользовательские интерфейсы, которые понравятся вашим пользователям, охватывает некоторые из этих шаблонов для 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
Вы можете создать адаптивное меню, используя mat-toolbar
, mat-sidenav
и flex-layout
(fxFlexFill
, ...).