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

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

تصویر angular-material-7-grid-list_6388 کنترل Grid List در انگولار متریال 7 – آموزش انگولار متریال

کنترل Grid List در انگولار متریال

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

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

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

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

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatGridListModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

mat-grid-tile {
   background: lightblue;
}

mat-grid-tile {

background: lightblue;

}

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

<mat-grid-list cols = "4" rowHeight = "100px">
   <mat-grid-tile
   [colspan] = "3"
   [rowspan] = "1">1
   </mat-grid-tile>
   <mat-grid-tile
   [colspan] = "1"
   [rowspan] = "2">2
   </mat-grid-tile>
   <mat-grid-tile
   [colspan] = "1"
   [rowspan] = "1">3
   </mat-grid-tile>
   <mat-grid-tile
   [colspan] = "2"
   [rowspan] = "1">4
   </mat-grid-tile>
</mat-grid-list>

<mat-grid-list cols = "4" rowHeight = "100px">

<mat-grid-tile

[colspan] = "3"

[rowspan] = "1">1

</mat-grid-tile>

<mat-grid-tile

[colspan] = "1"

[rowspan] = "2">2

</mat-grid-tile>

<mat-grid-tile

[colspan] = "1"

[rowspan] = "1">3

</mat-grid-tile>

<mat-grid-tile

[colspan] = "2"

[rowspan] = "1">4

</mat-grid-tile>

</mat-grid-list>

نتیجه

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

تصویر angular-material-7-grid-list_6388_1 کنترل Grid List در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

در ابتدا ما با استفاده از دستورالعمل mat-grid-list یک لیست به صورت گرید ایجاد کرده ایم.
سپس با استفاده از دستورالعمل mat-grid-tile آیتم های مورد نظر را به صورت کاشی به این لیست اضافه نموده ایم.

انگولار متریال - List انگولار متریال - Expansion Panel