Angular PrimeNG旋钮组件

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，这些组件被用来做很好的造型，这个框架被用来做响应式网站，非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用Knob组件。

旋钮组件：它是一个表单组件，用来定义一个拨号器类型的旋钮，包含标签和一些数据值。

属性:

size。它用于设置组件的尺寸，单位是像素。它是数字数据类型，默认值是100。
disabled。它指定该元素应被禁用。它是布尔数据类型，默认值是false。
readonly: 它用于指定该组件不能被编辑。它是布尔数据类型，默认值是false。
min：用于设置最小边界值。它是数字数据类型，默认值是0。
max:它用于设置最大边界值。它是数字数据类型，默认值是100。
step。用来设置增减值的步长因素。它是数字数据类型，默认值为空。
valueColor: 它用于设置值的背景。它是字符串数据类型，默认值为空。
rangeColor: 它用于设置范围的背景颜色。它是数字数据类型，默认值为空。
textColor: 它用于设置值文本的颜色。它是数字数据类型，默认值为空。
strokeWidth：用于设置旋钮行程的宽度。它是数字数据类型，默认值是14。
showValue。它用于指定是否显示旋钮内的值。它是布尔数据类型，默认值为真。
valueTemplate。它用于设置值的模板字符串。它是字符串数据类型，默认值为value。
style。它用于设置元素的内联样式。它是对象数据类型，默认值为空。
styleClass。它用于设置元素的风格类。它是字符串数据类型，默认值为空。

事件:

onChange。它是一个回调，当值发生变化时被触发。

样式:

p-knob：它是一个风格化的容器元素。
p-knob-text。它是一个造型的文本元素。
p-knob-value。它是一个风格化的Value元素。
p-knob-text。它是一个造型的文本元素。

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

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

ng new appname

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

cd appname

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

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

项目结构 。在完成安装过程后，它将看起来像如下。

Angular PrimeNG旋钮组件

例子1：在这一步，我们将看到说明旋钮组件使用的基本例子。

<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>

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 {}

输出:

Angular PrimeNG旋钮组件

实例2：在这个例子中，我们将知道如何在旋钮组件中使用步骤和笔画属性。

<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>

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 {}

输出:

Angular PrimeNG旋钮组件