Чекбокс
PrimeNG/Checkbox (opens in a new tab)
Чекбокс - это расширение стандартного элемента флажка с тематизацией.
С чего начать
Подключите модуль
import { CheckboxModule } from 'primeng/checkbox';
В .ts файле
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-prime-checkbox',
templateUrl: './prime-checkbox.component.html',
styleUrls: ['./prime-checkbox.component.scss']
})
export class PrimeCheckboxComponent implements OnInit {
constructor() { }
selectedCities: string[] = [];
selectedCategories: any[] = ['Technology', 'Sports'];
categories: any[] = [{ name: 'Accounting', key: 'A' }, { name: 'Marketing', key: 'M' }, { name: 'Production', key: 'P' }, { name: 'Research', key: 'R' }];
checked: boolean = false;
ngOnInit(): void {
this.selectedCategories = this.categories.slice(1, 3);
}
}
Встройте компонент с помощью тэга p-checkbox.
Basic
checked
Multiple
New YorkSan FranciscoLos AngelesChicago
Dynamic Values, Preselection, Value Binding and Disabled Option
category.name
Свойства
Name | Type | Default | Description |
---|---|---|---|
name | string | null | Name of the checkbox group. |
value | any | null | Value of the checkbox. |
label | string | null | Label of the checkbox. |
disabled | boolean | false | When present, it specifies that the element should be disabled. |
binary | boolean | false | Allows to select a boolean value instead of multiple values. |
tabindex | number | null | Index of the element in tabbing order. |
inputId | string | null | Identifier of the focus input to match a label defined for the component. |
ariaLabelledBy | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
ariaLabel | string | null | Used to define a string that labels the input element. |
style | object | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
labelStyleClass | string | null | Style class of the label. |
checkboxIcon | string | pi pi-check | Icon class of the checkbox icon. |
readonly | boolean | false | When present, it specifies that the component cannot be edited. |
required | boolean | false | When present, it specifies that checkbox must be checked before submitting the form. |
trueValue | any | null | Value in checked state. |
falseValue | any | null | Value in unchecked state. |
События
Name | Parameters | Description |
---|---|---|
onChange | checked: Boolean value to represent new state of checkbox. originalEvent: Browser event | Callback to invoke on checkbox click. |
Методы
Name | Parameters | Description |
---|---|---|
focus | - | Applies focus. |
Стилизация
Name | Element |
---|---|
p-chkbox | Container element |
p-chkbox-box | Container of icon. |
p-chkbox-icon | Icon element. |
p-chkbox-label | Label element. |
p-label-active | Label element of a checked state. |
p-label-focus | Label element of a focused state. |
p-label-disabled | Label element of a disabled state. |