Angular PrimeNG SpeedDial组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来做很好的造型，这个框架被用来做响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用SpeedDial组件。我们还将学习属性、事件和造型，以及在代码中使用的语法。

SpeedDial组件。它用于显示许多主要的动作，在按下按钮的同时，可以使用浮动按钮的动作来完成。

属性:

id。它是该元素的唯一标识符。它是字符串数据类型，默认值为空。
model : 它是MenuModel实例，用于定义动作项目。它是对象数据类型，默认值为空。
visible : 它指定了叠加的可见性。它是布尔数据类型，默认值是false。
className : 它是元素的风格类别。它是字符串数据类型，默认值为空。
style : 它是元素的内联样式。它是对象数据类型，默认值为空。
direction : 它指定了动作的开启方向。它是字符串数据类型，默认值是向上。
transitionDelay : 它是每个动作项目的过渡延迟步骤，它是数字数据类型，默认值是30。
type :它指定了行动的开放类型。它是字符串数据类型，默认值是线性。
radius : 它是*圆型的半径，它是数字数据类型，默认值是0。
mask : 它指定是否在快速拨号盘后面显示一个掩码元素，它是布尔数据类型，默认值是false。
disabled : 它指定该组件是否被禁用。它是布尔数据类型，默认值是false。
hideOnClickOutside : 它指定了在外面点击时是否关闭动作。它是布尔数据类型，默认值为true。
buttonClassName : 它是按钮元素的风格类别。它是字符串数据类型，默认值为空。
buttonStyle : 它是按钮元素的内联样式。它属于对象数据类型，默认值为null。
buttonTemplate : 它是按钮元素的模板。它接受任何类型的数据，默认值为空。
maskClassName : 它是掩码元素的风格类别。它是字符串数据类型，默认值为空。
maskStyle : 它是掩码元素的内联样式。它是对象数据类型，默认值为空。
showIcon : 它是按钮元素的显示图标。它的数据类型是字符串，默认值是pi-plus。
hideIcon : 它是按钮元素的隐藏图标。它的数据类型为字符串，默认值为null。
rotateAnimation : 当hideIcon不存在时，它用于定义旋转showIcon。它是布尔数据类型，默认值为true。

事件:

onVisibleChange : 这是一个回调，当元素的可见性改变时被触发。
onClick : 它是一个回调，当按钮元素被点击时被触发。
onShow : 它是一个回调，当动作可见时被触发。
onHide : 它是一个回调，当动作被隐藏时被触发。

样式:

p-speeddial。它是容器元素。
p-speeddial-button。它是快速拨号的按钮元素。
p-speeddial-mask。它是speeddial的掩码元素。
p-speeddial-list。它是行动的列表。
p-speeddial-item : 它用于执行列表上的每个行动项目。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

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

项目结构：它将看起来像如下。

Angular PrimeNG SpeedDial组件

例子1：这是一个基本的例子，说明了如何使用SpeedDial组件。

<div>
  <h2>GeeksforGeeks</h2>
  <h5>PrimeNG SpeedDial Component</h5>
  <p-speedDial [model]="gfg"></p-speedDial>
</div>

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 { SpeedDialModule } from "primeng/speeddial";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProgressSpinnerModule,
    SpeedDialModule,
    RippleModule,
    RouterModule.forRoot([{ path: "", 
        component: AppComponent }]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component, OnInit } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";
  
@Component({
  selector: "my-app",
  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-check",
      },
    ];
  }
}

输出:

Angular PrimeNG SpeedDial组件

例子2：在这个例子中，我们将知道如何在SpeedDial组件中使用radius属性。

<div class="card">
  <div style="height: 500px; position: relative" 
       class="speeddial-circle-demo">
    <p-speedDial
      [model]="gfg"
      radius="80"
      [transitionDelay]="80"
      type="circle"
      buttonClassName="p-button-warning">
    </p-speedDial>
  </div>
</div>

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 { SpeedDialModule } from "primeng/speeddial";
  
@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ProgressSpinnerModule,
    SpeedDialModule,
    RippleModule,
    RouterModule.forRoot([{ path: "", 
        component: AppComponent }]),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component, OnInit } from "@angular/core";
import { MenuItem, MessageService } from "primeng/api";
  
@Component({
  selector: "my-app",
  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-pencil",
      },
      {
        icon: "pi pi-refresh",
      },
      {
        icon: "pi pi-trash",
      },
      {
        icon: "pi pi-upload",
      },
      {
        icon: "pi pi-external-link",
      },
    ];
  }
}

输出:

Angular PrimeNG SpeedDial组件