Маска быстрого набора Angular PrimeNG

Опубликовано: 21 Декабря, 2022

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы узнаем, как использовать компонент маски SpeedDial в Angular PrimeNG. Мы также узнаем о свойствах и их синтаксисе, которые будут использоваться в коде.

Компонент SpeedDial используется для отображения многих основных действий, которые можно выполнить с помощью действия с плавающей кнопкой при ее нажатии.

Синтаксис:

<p-speedDial
    [model]="..."
    type="..."
    direction="..."
    showIcon="..."
    hideIcon="..."
    buttonClassName="..." >
</p-speedDial>

Свойства компонента маски быстрого набора Angular PrimeNG:

стиль: это встроенный стиль элемента. Это объектный тип данных, значение по умолчанию равно null.
направление: указывает направление открытия действий. Это строковый тип данных, значение по умолчанию — up.
тип: указывает тип открытия действий. Это строковый тип данных, значение по умолчанию — linear.
модель: это экземпляр MenuModel для определения элементов действия. Это объектный тип данных, значение по умолчанию равно null.
buttonClassName: это класс стиля элемента кнопки. Это строковый тип данных, значение по умолчанию равно null.
showIcon: это значок отображения элемента кнопки. Это строковый тип данных, значение по умолчанию — pi pi-plus.
hideIcon: это значок скрытия элемента кнопки. Это строковый тип данных, значение по умолчанию равно null.

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Это будет выглядеть следующим образом:

Шаги для запуска приложения: Запустите приведенную ниже команду, чтобы увидеть результат:

ng serve --open

Пример 1: Ниже приведен пример, иллюстрирующий использование компонента маски быстрого набора Angular PrimeNG.

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Mask Component</h5>
  
<div style="height: 300px; position: relative"
      class="speeddial-mask-demo">
    <p-speedDial
        [model]="gfg"
        direction="right"
        showIcon="pi pi-arrow-up-right"
        hideIcon="pi pi-times"
        buttonClassName="p-button-filled"
        [mask]="true">
    </p-speedDial>
</div>

app.component.ts:

Javascript

import {Component, OnInit} from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
    providers: [MessageService]
})
  
export class AppComponent { 
    gfg: MenuItem[];
  
    constructor(private messageService: MessageService) { }
  
    ngOnInit() {
        this.gfg = [
            {
               icon: "pi pi-linkedin",
               tooltipOptions: {
                    tooltipLabel: "LinkedIn"
               },
            },
            {
               icon: "pi pi-slack",
               tooltipOptions: {
                    tooltipLabel: "Slack"
               },
            },
            {
               icon: "pi pi-whatsapp",
               tooltipOptions: {
                    tooltipLabel: "Whatsapp"
               },
            }
        ];
    }    
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import {RouterModule} from "@angular/router";
import { BrowserAnimationsModule } 
   from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import {ProgressSpinnerModule} from "primeng/progressspinner";
import {RippleModule} from "primeng/ripple";
import { ToastModule } from "primeng/toast";
import { SpeedDialModule } from "primeng/speeddial";
  
@NgModule({
   imports: [
       BrowserModule,
       BrowserAnimationsModule,
       ProgressSpinnerModule,
       SpeedDialModule,
       ToastModule,
       RippleModule,
       RouterModule.forRoot([
           {path:"",component: AppComponent},
       ])
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
  
export class AppModule { }

Выход:

Пример 2: Ниже приведен еще один пример, который иллюстрирует использование компонента маски быстрого набора Angular PrimeNG с использованием type=”quarter-circle”.

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Mask Component</h5>
  
<div style="height: 300px; position: relative"
      class="speeddial-mask-demo">
    <p-speedDial
        [model]="gfg"
        direction="down-right"
        type="quarter-circle"
        showIcon="pi pi-arrow-up-right"
        hideIcon="pi pi-times"
        buttonClassName="p-button-filled"
        [mask]="true">
    </p-speedDial>
</div>

app.component.ts:

Javascript

import {Component, OnInit} from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.scss"],
    providers: [MessageService]
})
  
export class AppComponent { 
    gfg: MenuItem[];
  
    constructor(private messageService: MessageService) { }
  
    ngOnInit() {
        this.gfg = [
            {
               icon: "pi pi-linkedin",
               tooltipOptions: {
                    tooltipLabel: "LinkedIn"
               },
            },
            {
               icon: "pi pi-slack",
               tooltipOptions: {
                    tooltipLabel: "Slack"
               },
            },
            {
               icon: "pi pi-whatsapp",
               tooltipOptions: {
                    tooltipLabel: "Whatsapp"
               },
            }
        ];
    }    
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import {RouterModule} from "@angular/router";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import {ProgressSpinnerModule} from "primeng/progressspinner";
import {RippleModule} from "primeng/ripple";
import { ToastModule } from "primeng/toast";
import { SpeedDialModule } from "primeng/speeddial";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ProgressSpinnerModule,
        SpeedDialModule,
        ToastModule,
        RippleModule,
        RouterModule.forRoot([
           {path:"",component: AppComponent},
        ])
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
  
export class AppModule { }

Выход:

Ссылка: https://primefaces.org/primeng/speeddial

Technical Scripter Picked AngularJS

Маска быстрого набора Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ