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

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

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

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

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

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

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

محتوای فایل 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 کنترل Tab در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

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

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