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

یکشنبه ۱۴ شهریور ۱۴۰۰
بازدید ۶۰۱ نفر
AmRo
(5 امتیاز از 1 رای)
Loading...

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

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

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

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

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

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

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

import {MatButtonModule,MatTooltipModule} from '@angular/material'

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

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

BrowserAnimationsModule,

MatButtonModule,MatTooltipModule,

FormsModule,

ReactiveFormsModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

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

<button mat-raised-button
   matTooltip = "Sample Tooltip"
   aria-label = "Sample Tooltip">
   Click Me!
</button>

<button mat-raised-button

matTooltip = "Sample Tooltip"

aria-label = "Sample Tooltip">

Click Me!

</button>

نتیجه

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

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

جزئیات

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

انگولار متریال - Paginator انگولار متریال - SnackBar