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

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

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

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

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

بخش های یک ToolBar:

: نشان دهنده ظرف (container) اصلی است.
: یک سطر جدید به نوار ابزار اضافه می کند.

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

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

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

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

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatToolbarModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

.filler {
   flex: 1 1 auto;
}
.gap {
   margin-right: 10px;
}

.filler {

flex: 1 1 auto;

}

.gap {

margin-right: 10px;

}

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

<mat-toolbar color = "primary">
   <span class = "gap">File</span>
   <span>Edit</span>
   <span class = "filler"></span>
   <span>About</span>
</mat-toolbar>

<mat-toolbar color = "primary">

File

Edit

About

</mat-toolbar>

نتییجه

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

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