آموزش انگولار متریال

مباحث پایه انگولار متریال

Form Controls در انگولار متریال

Navigation در انگولار متریال

Layout در انگولار متریال

Buttons - Indicators در انگولار متریال

Popups - Modals در انگولار متریال

Data Table در انگولار متریال

تبلیغات

آیکون ها (Icons) در انگولار متریال 7 – آموزش انگولار متریال

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

تصویر angular-material-7-icons_6409 آیکون ها (Icons) در انگولار متریال 7 – آموزش انگولار متریال

آیکون ها (Icons) در انگولار متریال

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MatIconModule} from '@angular/material'

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

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,

BrowserAnimationsModule,

MatIconModule,

FormsModule,

ReactiveFormsModule

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<mat-icon>home</mat-icon>

1	<mat-icon>home</mat-icon>

نتیجه

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

تصویر angular-material-7-icons_6409_1 آیکون ها (Icons) در انگولار متریال 7 – آموزش انگولار متریال

جزئیات

در مثال فوق ما با استفاده از دستورالعمل mat-icon و بسته آیکون های متریال گوگل یک ایکون خانه ایجاد کرده ایم.

انگولار متریال - Progress Spinner انگولار متریال - Chip

دسته ها: آموزش ها - فریم ورک Angular Material

کتاب های مرتبط

ابزار های مرتبط

مقاله های مرتبط

ثبت نظر

نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است