Componente de marcación rápida PrimeNG de Angular

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el componente SpeedDial en Angular PrimeNG. También aprenderemos sobre las propiedades, los eventos y el estilo junto con sus sintaxis que se utilizarán en el código.

Componente SpeedDial : se utiliza para mostrar muchas acciones principales que se pueden realizar mediante la acción del botón flotante mientras se presiona el botón.

Propiedades:

• id: Es el identificador único del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.
• model : Es la instancia de MenuModel para definir los elementos de acción. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• visible : Especifica la visibilidad de la superposición. Es de tipo de dato booleano, el valor por defecto es false.
• className : Es la clase de estilo del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.
• style : Es el estilo en línea del elemento. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• dirección : Especifica la dirección de apertura de las acciones. Es de tipo de datos de string, el valor predeterminado es arriba.
• TransitionDelay : es el paso de retraso de la transición para cada elemento de acción. Es del tipo de datos numéricos, el valor predeterminado es 30.
• type : Especifica el tipo de acciones de apertura. Es de tipo de datos de string, el valor predeterminado es lineal.
• radio : Es el radio para *tipos de círculo, es de tipo de dato numérico, el valor por defecto es 0.
• mask : Especifica si mostrar un elemento de máscara detrás de la marcación rápida. Es de tipo de datos booleano, el valor predeterminado es falso.
• disabled : Especifica si el componente está deshabilitado. Es de tipo de dato booleano, el valor por defecto es false.
• hideOnClickOutside : especifica si las acciones se cierran cuando se hace clic fuera. Es de tipo de datos booleano, el valor predeterminado es verdadero.
• buttonClassName : Es la clase de estilo del elemento botón. Es de tipo de datos de string, el valor predeterminado es nulo.
• buttonStyle : Es el estilo en línea del elemento del botón. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• buttonTemplate : Es la plantilla del elemento botón. Acepta cualquier tipo de datos y el valor predeterminado es nulo.
• maskClassName : Es la clase de estilo del elemento máscara. Es de tipo de datos de string, el valor predeterminado es nulo.
• maskStyle : Es el estilo en línea del elemento de máscara. Es de tipo de datos de objeto, el valor predeterminado es nulo.
• showIcon : Es el icono de mostrar del elemento de botón. Es de tipo de datos de string, el valor predeterminado es pi pi-plus.
• hideIcon : Es el icono Ocultar del elemento botón. Es de tipo de datos de string, el valor predeterminado es nulo.
• Animación de rotación : se utiliza para definir la rotación de showIcon cuando hideIcon no está presente. Es de tipo de datos booleano, el valor predeterminado es verdadero.

Eventos: 

• onVisibleChange : es una devolución de llamada que se activa cuando cambia la visibilidad del elemento.
• onClick : es una devolución de llamada que se activa cuando se hace clic en el elemento del botón.
• onShow : es una devolución de llamada que se activa cuando las acciones están visibles.
• onHide : es una devolución de llamada que se activa cuando las acciones están ocultas.

Estilo:

• p-speeddial: Es el elemento contenedor.
• p-speeddial-button: Es el elemento de botón de marcación rápida.
• p-speeddial-mask: Es el elemento de máscara de la marcación rápida.
• p-speeddial-list: Es la lista de las acciones.
• p-speeddial-item : se utiliza para realizar cada elemento de acción de la lista.

Creación de aplicaciones angulares e instalación de módulos:

Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto: Tendrá el siguiente aspecto:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente 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",
      },
    ];
  }
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de radio en el Componente SpeedDial.

<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",
      },
    ];
  }
}

Producción:

Referencia: https://primefaces.org/primeng/showcase/#/speeddial