Компонент оформления ручки формы Angular PrimeNG
Angular PrimeNG — это набор компонентов пользовательского интерфейса, созданных для приложений Angular. Это позволяет разработчикам легко создавать красивые и эффективные веб-интерфейсы, не тратя много времени. В этой статье мы увидим компонент стилизации Angular PrimeNG Form Knob.
Компонент Knob используется для ввода числовых данных от пользователя с помощью циферблата. Значение ручки может быть ограничено числовой переменной, определенной в файле app.component.ts . Ниже перечислены 3 класса структурных стилей для компонента ручки.
Классы оформления ручки формы Angular PrimeNG:
- p-knob: это элемент-контейнер ручки.
- p-knob-text: это текстовый элемент ручки.
- p-knob-value: это элемент значения ручки.
Свойства стиля Angular PrimeNG Form Knob:
- step: это значение, на которое значение регулятора будет увеличиваться/уменьшаться.
- valueColor: это цвет фона значения.
- rangeColor: это цвет фона диапазона.
- textColor: это цвет текста значения.
- strokeWidth: это ширина хода ручки.
- стиль: это встроенный стиль компонента.
- styleClass: это класс стиля компонента.
Синтаксис:
// In File: app.component.html <p-knob [step]="..." textColor="..." ... [(ngModel)]="..."> </p-knob> // In file: app.component.css :host ::ng-deep .StylingClass { // CSS }
Создание приложения Angular и установка модулей:
Шаг 1: Создайте приложение Angular, используя следующую команду.
ng new myapp
Шаг 2: После создания папки проекта, т. е. myapp, перейдите к ней с помощью следующей команды.
cd myapp
Шаг 3: Установите PrimeNG в указанный вами каталог.
npm install primeng --save npm install primeicons --save
Структура проекта: после выполнения вышеуказанных шагов структура будет выглядеть следующим образом.
Пример 1. В этом примере мы использовали класс «p-knob-text», чтобы изменить размер и вес шрифта текста ручки. Кроме того, мы использовали свойство textColor, чтобы изменить цвет текста на зеленый.
app.component.html
HTML
< h2 style = "color: green" > GeeksforGeeks </ h2 > < h3 > Angular PrimeNG Form Knob Styling Component </ h3 > < h4 >Normal Knob</ h4 > < p-knob [step]="10" [(ngModel)]="knobValue1"> </ p-knob > < h4 >Knob with Big and Bold Text</ h4 > < p-knob class = "knob" [step]="10" textColor = "green" [(ngModel)]="knobValue2"> </ p-knob > |
app.component.css
CSS
:host ::ng-deep .knob text.p-knob-text { font-size : 30px ; font-weight : bold ; } |
app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ], }) export class AppComponent { knobValue1?: number; knobValue2?: number; } |
app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { FormsModule } from "@angular/forms" ; import { KnobModule } from "primeng/knob" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, KnobModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Пример 2. В этом примере мы используем класс стиля «p-knob-value», чтобы изменить цвет и ширину обводки значения. Здесь мы устанавливаем оранжевый цвет и ширину обводки 5 пикселей.
app.component.html
HTML
< h2 style = "color: green" > GeeksforGeeks </ h2 > < h3 > Angular PrimeNG Form Knob Styling Component </ h3 > < h4 > Knob with custom styling using the < i >p-knob-value</ i > Styling Class </ h4 > < p-knob class = "knob" [step]="5" [(ngModel)]="knobValue"> </ p-knob > |
app.component.css
CSS
:host ::ng-deep .knob path.p-knob-value { stroke: orange; stroke- width : 5px ; } |
app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ], }) export class AppComponent { knobValue?: number; } |
app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { FormsModule } from "@angular/forms" ; import { KnobModule } from "primeng/knob" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, KnobModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Пример 3: В этом примере мы использовали свойства стиля, чтобы изменить диапазон и цвет значения компонента ручки. Оранжевый цвет был установлен на красный, а цвет значения — на зеленый.
app.component.html
HTML
< h2 style = "color: green" > GeeksforGeeks </ h2 > < h3 > Angular PrimeNG Form Knob Styling Component </ h3 > < h4 >Normal Knob</ h4 > < p-knob [step]="10" [(ngModel)]="knobValue1"> </ p-knob > < h4 >Knob with Custom Range and Value Color</ h4 > < p-knob [step]="10" rangeColor = "red" valueColor = "green" [(ngModel)]="knobValue2"> </ p-knob > |
app.component.ts
Javascript
import { Component } from "@angular/core" ; @Component({ selector: "app-root" , templateUrl: "./app.component.html" , styleUrls: [ "./app.component.css" ], }) export class AppComponent { knobValue1?: number; knobValue2?: number; } |
app.module.ts
Javascript
import { NgModule } from "@angular/core" ; import { BrowserModule } from "@angular/platform-browser" ; import { BrowserAnimationsModule } from "@angular/platform-browser/animations" ; import { AppComponent } from "./app.component" ; import { FormsModule } from "@angular/forms" ; import { KnobModule } from "primeng/knob" ; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, KnobModule ], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule { } |
Выход:
Ссылка: https://www.primefaces.org/primeng/knob