کنترل Tab در انگولار متریال ۷ – آموزش انگولار متریال

چهارشنبه ۱۰ شهریور ۱۴۰۰
بازدید ۴۳۴ نفر
آرتین
(۵ امتیاز از ۱ رای)
Loading...

angular material 7 tabs 6395 تصویر

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

<mat-tab-group> یک دستورالعمل انگولار است که به منظور ایجا تب هایی با استایل متریال دیزاین مورد استفاده قرار می گیرد. در این بخش چگونگی استفاده از این دستورالعمل را با یک مثال ساده بررسی خواهیم کرد.

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

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

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

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatTabsModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-tab-group>
   <mat-tab label = "A"> Apple </mat-tab>
   <mat-tab label = "B"> Banana </mat-tab>
   <mat-tab label = "C"> Carrot </mat-tab>
</mat-tab-group>

<mat-tab-group>

<mat-tab label = "A"> Apple </mat-tab>

<mat-tab label = "B"> Banana </mat-tab>

<mat-tab label = "C"> Carrot </mat-tab>

</mat-tab-group>

نتیجه

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

angular material 7 tabs 6395 1 تصویر

جزئیات

در ابتدا ما با استفاده از دستورالعمل mat-tab-group یک تب ها را ایجاد کرده ایم.
سپس با استفاده از دستورالعمل mat-tab محتوای مربوط به هر تب را به آن اضافه نموده ایم.

انگولار متریال - Tree انگولار متریال - Stepper