Компоненты PrimeNG
Checkbox

Чекбокс

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

Свойства

NameTypeDefaultDescription
namestringnullName of the checkbox group.
valueanynullValue of the checkbox.
labelstringnullLabel of the checkbox.
disabledbooleanfalseWhen present, it specifies that the element should be disabled.
binarybooleanfalseAllows to select a boolean value instead of multiple values.
tabindexnumbernullIndex of the element in tabbing order.
inputIdstringnullIdentifier of the focus input to match a label defined for the component.
ariaLabelledBystringnullEstablishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabelstringnullUsed to define a string that labels the input element.
styleobjectnullInline style of the component.
styleClassstringnullStyle class of the component.
labelStyleClassstringnullStyle class of the label.
checkboxIconstringpi pi-checkIcon class of the checkbox icon.
readonlybooleanfalseWhen present, it specifies that the component cannot be edited.
requiredbooleanfalseWhen present, it specifies that checkbox must be checked before submitting the form.
trueValueanynullValue in checked state.
falseValueanynullValue in unchecked state.

События

NameParametersDescription
onChangechecked: Boolean value to represent new state of checkbox. originalEvent: Browser eventCallback to invoke on checkbox click.

Методы

NameParametersDescription
focus-Applies focus.

Стилизация

NameElement
p-chkboxContainer element
p-chkbox-boxContainer of icon.
p-chkbox-iconIcon element.
p-chkbox-labelLabel element.
p-label-activeLabel element of a checked state.
p-label-focusLabel element of a focused state.
p-label-disabledLabel element of a disabled state.