Компонент оформления ручки формы Angular PrimeNG

Опубликовано: 23 Февраля, 2023

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

Technical Scripter Picked AngularJS

Компонент оформления ручки формы Angular PrimeNG

HTML

CSS

Javascript

Javascript

HTML

CSS

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ