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

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

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

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

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

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

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

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

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

  • یکشنبه ۱۴ شهریور ۱۴۰۰
  • بازدید ۵۷ نفر

angular material 7 tooltip 6424 تصویر

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

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

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

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

محتوای فایل app.module.ts را مانند نمونه زیر تغییر دهید:

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

import { NgModule } from ‘@angular/core’;

import { AppComponent } from ‘./app.component’;

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

نتیجه

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

angular material 7 tooltip 6424 1 تصویر

جزئیات

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

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