En este artículo, sabremos cómo usar el componente Knob en Angular PrimeNG.
Componente de perilla: Es un componente de formulario que se utiliza para definir una perilla de tipo marcador que contiene etiquetas y algunos valores de datos.
Propiedades:
- tamaño: Se utiliza para establecer el tamaño del componente en píxeles. Es de tipo de dato numérico, el valor por defecto es 100.
- disabled: Especifica que el elemento debe estar deshabilitado. Es del tipo de dato booleano, el valor por defecto es falso.
- readonly: Se utiliza para especificar que el componente no se puede editar. Es del tipo de dato booleano, el valor por defecto es falso.
- min: Se utiliza para establecer el valor límite mínimo. Es de tipo de dato numérico, el valor por defecto es 0.
- max: Se utiliza para establecer el valor límite máximo. Es de tipo de dato numérico, el valor por defecto es 100.
- paso: Se utiliza para establecer el factor de paso para incrementar/decrementar el valor. Es de tipo de dato numérico, el valor por defecto es nulo.
- valueColor: Se utiliza para establecer el fondo del valor. Es de tipo de datos de string, el valor predeterminado es nulo.
- rangeColor: Se utiliza para establecer el color de fondo del rango. Es de tipo de dato numérico, el valor por defecto es nulo.
- textColor: Se utiliza para establecer el color del texto de valor. Es de tipo de dato numérico, el valor por defecto es nulo.
- strokeWidth: se utiliza para establecer el ancho del trazo de la perilla. Es de tipo de dato numérico, el valor por defecto es 14.
- showValue: se utiliza para especificar si mostrar el valor dentro de la perilla. Es del tipo de datos booleano, el valor predeterminado es verdadero.
- valueTemplate: se utiliza para establecer la string de plantilla del valor. Es de tipo de datos de string, el valor predeterminado es valor.
- estilo: Se utiliza para establecer el estilo Inline del elemento. Es de tipo de datos de objeto, el valor predeterminado es nulo.
- styleClass: Se utiliza para establecer la clase de estilo del elemento. Es de tipo de datos de string, el valor predeterminado es nulo.
Eventos:
- onChange: Es una devolución de llamada que se activa cuando cambia el valor.
Estilo:
- p-knob: Es un elemento contenedor de estilo.
- p-knob-text: es un elemento de estilo de texto.
- p-knob-value: Es un elemento de estilo Value.
- p-knob-text: es un elemento de estilo de texto.
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 : después de completar el proceso de instalación, tendrá el siguiente aspecto.
Ejemplo 1: En este paso, veremos el ejemplo básico que ilustra el uso del componente de perilla.
app.component.html
<h2 style="color: green">GeeksforGeeks</h2> <h5>PrimeNG Knob component</h5> <div class="p-field p-col-12 p-md-4"> <h4>Basic</h4> <p-knob [size]="150" [strokeWidth]="9" valueColor="green" rangeColor="navy"> </p-knob> <h4>Disabled</h4> <p-knob [size]="150" [strokeWidth]="9" valueColor="Green" rangeColor="grey" [disabled]="true"> </p-knob> </div>
app.module.ts
import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppComponent } from "./app.component"; import { KnobModule } from "primeng/knob"; @NgModule({ imports: [BrowserModule, BrowserAnimationsModule, KnobModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule {}
Producción:
Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de pasos y trazo en el componente de perilla.
app.component.html
<h2 style="color: green">GeeksforGeeks</h2> <h5>PrimeNG Knob component</h5> <div class="p-field p-col-12 p-md-4"> <h5>Step</h5> <p-knob [size]="150" [strokeWidth]="9" valueColor="Green" rangeColor="Blue" [step]="10"> </p-knob> </div> <div class="p-field p-col-12 p-md-4"> <h5>Stroke</h5> <p-knob [size]="150" [strokeWidth]="9" valueColor="Green" rangeColor="Blue" [step]="10" [strokeWidth]="5"> </p-knob> </div>
app.module.ts
import { NgModule } from "@angular/core"; import { BrowserModule } from "@angular/platform-browser"; import { FormsModule } from "@angular/forms"; import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppComponent } from "./app.component"; import { KnobModule } from "primeng/knob"; @NgModule({ imports: [BrowserModule, BrowserAnimationsModule, KnobModule, FormsModule], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule {}
Producción:
Referencia: https://primefaces.org/primeng/showcase/#/knob