Угловой материал - боковая навигация, боковые переключатели и ползунки

Angular Material - популярный UI-фреймворк, основанный на Material Design для Angular.

В этой статье мы рассмотрим, как использовать Angular Material в нашем проекте Angular.

Sidenav

Angular имеет компонент sidenav.

Мы можем добавить это, написав:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSidenavModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.module.html

<div>
  <mat-drawer-container class="example-container" autosize>
    <mat-drawer #drawer class="example-sidenav" mode="side">
      <p>Auto-resizing sidenav</p>
      <p *ngIf="showFiller">Lorem, ipsum dolor sit amet consectetur.</p>
      <button (click)="showFiller = !showFiller" mat-raised-button>
        Toggle extra text
      </button>
    </mat-drawer>
    <div class="example-sidenav-content">
      <button type="button" mat-button (click)="drawer.toggle()">
        Toggle sidenav
      </button>
    </div>
  </mat-drawer-container>
</div>

app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showFiller = false;
}

styles.css

.example-container {
  height: 100vh;
}

Мы добавляем боковую навигацию с mat-drawer-container в качестве контейнера.

mat-drawer - выдвижной ящик с боковой навигацией.

Кнопка Toggle sidenav показывает ящик.

Кнопка «Переключить дополнительный текст» закрывает ящик.

Отображение текста-заполнителя контролируется showFiller.

drawer.toggle() позволяет нам переключать ящик.

Переключатели слайдов

Мы можем добавить переключатель с компонентом mat-slide-toggle.

Например, мы можем написать:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSlideToggleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>
  <mat-slide-toggle color="red" [checked]="true" [disabled]="false">
    Slide me!
  </mat-slide-toggle>
</div>

Мы добавляем MatSlideToggleModule в наш модуль, чтобы мы могли добавить компонент mat-slide-toggle в шаблон.

checked устанавливает отмеченное состояние.

disabled отключает его, если true.

color устанавливает цвет.

Слайдер

Мы можем добавить слайдер с компонентом mat-slider.

Например, мы можем написать:

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';
import { MatCardModule } from '@angular/material/card';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSliderModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

<div>
  <mat-card class="example-result-card">
    <mat-card-content>
      <mat-slider min="1" max="5" step="0.5" value="1.5"></mat-slider>
    </mat-card-content>
  </mat-card>
</div>

Добавление MatSliderModule позволяет нам добавить mat-slider в наш шаблон.

min имеет минимально допустимое значение.

max имеет максимально допустимое значение.

step имеет интервал, который мы можем установить.

value - значение ползунка.

Заключение

Мы можем добавить боковые навигации, переключатели слайдов и ползунки в наше приложение Angular с помощью Angular Material.