Радиокнопка

PrimeNG/RadioButton (opens in a new tab)

Радиокнопка - это расширение стандартной радиокнопки с тематизацией.

С чего начать

Подключите модуль

import { RadioButtonModule } from 'primeng/radiobutton';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-radiobutton',
  templateUrl: './prime-radiobutton.component.html',
  styleUrls: ['./prime-radiobutton.component.scss']
})
export class PrimeRadiobuttonComponent implements OnInit {
 
  constructor() { }
 
  city: string;
  selectedCategory: any = null;
  categories: any[] = [{name: 'Accounting', key: 'A'}, {name: 'Marketing', key: 'M'}, {name: 'Production', key: 'P'}, {name: 'Research', key: 'R'}];
 
  ngOnInit(): void {
    this.selectedCategory = this.categories[1];
  }
}

Встройте компонент с помощью тэга p-radioButton.

<p-radioButton name="city" value="Chicago" [(ngModel)]="city" inputId="city1"></p-radioButton>

Basic

ChicagoLos AngelesNew YorkSan Francisco

<div class="p-field-radiobutton">
  <p-radioButton name="city" value="Chicago" [(ngModel)]="city" inputId="city1"></p-radioButton>
  <label for="city1">Chicago</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton name="city" value="Los Angeles" [(ngModel)]="city" inputId="city2"></p-radioButton>
  <label for="city2">Los Angeles</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton name="city" value="New York" [(ngModel)]="city" inputId="city3"></p-radioButton>
  <label for="city3">New York</label>
</div>
<div class="p-field-radiobutton">
  <p-radioButton name="city" value="San Francisco" [(ngModel)]="city" inputId="city4"></p-radioButton>
  <label for="city4">San Francisco</label>
</div>

Dynamic Values, Preselection, Value Binding and Disabled Option

category.name

<div *ngFor="let category of categories" class="p-field-checkbox">
  <p-radioButton [inputId]="category.key" name="category" [value]="category" [(ngModel)]="selectedCategory" [disabled]="category.key === 'R'"></p-radioButton>
  <label [for]="category.key"> { { category.name } } </label>
</div>

Свойства

Name	Type	Default	Description
name	string	null	Name of the radiobutton group.
value	any	null	Value of the radiobutton.
label	string	null	Label of the radiobutton.
disabled	boolean	false	When present, it specifies that the element should be disabled.
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.

События

Name	Parameters	Description
onClick	event: Click event	Callback to invoke on radio button click.
onFocus	event: Focus event	Callback to invoke when the radio button receives focus.
onBlur	event: Blur event	Callback to invoke when the radio button loses focus.

Методы

Name	Parameters	Description
focus	-	Applies focus.

Стилизация

Name	Element
p-radiobutton	Container element
p-radiobutton-box	Container of icon.
p-radiobutton-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.

ProgressSpinner Ripple