کنترل SideNav در انگولار متریال 7 – آموزش انگولار متریال

یکشنبه ۷ شهریور ۱۴۰۰
بازدید ۵۷۰ نفر
آرتین
(5 امتیاز از 1 رای)
Loading...

تصویر angular-material-7-sidenav_6375 کنترل SideNav در انگولار متریال 7 – آموزش انگولار متریال

کنترل SideNav در انگولار متریال

<mat-sidenav> یک دستورالعمل انگولار است که به منظور ایجاد Side Navigation و یک پنل که شامل محتوای صفحه است، مورد استفاده قرار می گیرد.

بخش های یک یک Side Navigation:

<mat-sidenav-container> : ظرفی است که شامل محتوا و بخش پنل کناری (Side Panel) است.
<mat-sidenav-content> : پنلی است که محتوای صفحه را نمایش می دهد.
<mat-sidenav> : پنل کناری (Side Panel) را نمایش می دهد.

دراین بخش چگونگی استفاده از این دستورالعمل انگولار را با یک مثال ساده بررسی خواهیم کرد.

ایجاد برنامه انگولار

در ادامه برنامه ای که در بخش ایجاد پروژه در انگولار ایجاد کرده بودیم را برای استفاده از کنترل <mat-sidenav> تغییر می دهیم.

محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:

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

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MatSidenavModule} from '@angular/material'

import {FormsModule, ReactiveFormsModule} from '@angular/forms';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatSidenavModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

محتوای فایل app.component.css:

.tp-container {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: #eee;
}
.tp-section {
   display: flex;
   align-content: center;
   align-items: center;
   height: 60px;
   width:100px;
}

.tp-container {

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

background: #eee;

}

.tp-section {

display: flex;

align-content: center;

align-items: center;

height: 60px;

width:100px;

}

محتوای فایل app.component.html:

<mat-sidenav-container class = "tp-container">
   <mat-sidenav mode = "side" opened>
      <section class = "tp-section">
         <span>File</span>
      </section>
      <section class = "tp-section">
         <span>Edit</span>
      </section>
   </mat-sidenav>
   <mat-sidenav-content>Main content</mat-sidenav-content>
</mat-sidenav-container>

<mat-sidenav-container class = "tp-container">

<mat-sidenav mode = "side" opened>

</section>

</section>

</mat-sidenav>

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

</mat-sidenav-container>

نتیجه

بعد از اجرا برنامه خروجی زیر را مشاهده خواهید کرد:

تصویر angular-material-7-sidenav_6375_1 کنترل SideNav در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

در ابتدا ما با استفاده از دستورالعمل mat-sidenav-container یک ظرف (Container) که کل صفحه را می گیرد، ایجاد کرده ایم.
سپس گزینه های مربوطه را در بخش mat-sidenav اضافه کرده ایم.
و در آخر با استفاده از دستورالعمل mat-sidenav-content یک پنل که محتوا در آن قرار می گیرد را اضافه کرده ایم.

انگولار متریال - Toolbar انگولار متریال - Menu