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

دوشنبه ۸ شهریور ۱۴۰۰
بازدید ۶۳۵ نفر
AmRo
(5 امتیاز از 1 رای)
Loading...

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

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

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

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

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

محتوای فایل 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 {MatDividerModule, MatListModule} from '@angular/material'
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      BrowserAnimationsModule,
      MatDividerModule, MatListModule,
      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 {MatDividerModule, MatListModule} from '@angular/material'

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatDividerModule, MatListModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-list>
   <mat-list-item>Apple</mat-list-item>
   <mat-divider></mat-divider>
   <mat-list-item>Orange</mat-list-item>
   <mat-divider></mat-divider>
   <mat-list-item>Banana</mat-list-item>
</mat-list>

<mat-list>

<mat-list-item>Apple</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Orange</mat-list-item>

<mat-divider></mat-divider>

<mat-list-item>Banana</mat-list-item>

</mat-list>

نتیجه

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

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