Кнопка выбора

PrimeNG/SelectButton (opens in a new tab)

Кнопка selectbutton используется для выбора одного или нескольких элементов из списка с помощью кнопок.

С чего начать

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

import { SelectButtonModule } from 'primeng/selectbutton';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-selectbutton',
  templateUrl: './prime-selectbutton.component.html',
  styleUrls: ['./prime-selectbutton.component.scss']
})
export class PrimeSelectbuttonComponent implements OnInit {
 
  stateOptions: any[] = [];
  paymentOptions: any[] = [];
  justifyOptions: any[] = [];
  value1: string = 'off';
  value2: any;
  value3: any;
 
  constructor() {
    this.stateOptions = [{ label: 'Off', value: 'off' }, { label: 'On', value: 'on' }];
 
    this.paymentOptions = [
      { name: 'Option 1', value: 1 },
      { name: 'Option 2', value: 2 },
      { name: 'Option 3', value: 3 }
    ];
 
    this.justifyOptions = [
      { icon: 'pi pi-align-left', justify: 'Left' },
      { icon: 'pi pi-align-right', justify: 'Right' },
      { icon: 'pi pi-align-center', justify: 'Center' },
      { icon: 'pi pi-align-justify', justify: 'Justify' }
    ];
  }
 
  ngOnInit(): void {
  }
}

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

<p-selectButton [options]="stateOptions" [(ngModel)]="value1" optionLabel="label" optionValue="value"></p-selectButton>

Single Selection

<p-selectButton [options]="stateOptions" [(ngModel)]="value1" optionLabel="label" optionValue="value"></p-selectButton>

Multiple Selection

<p-selectButton [options]="paymentOptions" [(ngModel)]="value2" multiple="multiple" optionLabel="name" optionValue="value"></p-selectButton>

Custom Template

<p-selectButton [options]="justifyOptions" [(ngModel)]="value3" optionLabel="icon">
  <ng-template let-item>
    <i [class]="item.icon"></i>
  </ng-template>
</p-selectButton>

Размеры

<p-selectButton styleClass="p-selectbutton-xs" [options]="stateOptions" [(ngModel)]="value1" optionLabel="label" optionValue="value"></p-selectButton>
<p-selectButton styleClass="p-selectbutton-sm" [options]="stateOptions" [(ngModel)]="value1" optionLabel="label" optionValue="value"></p-selectButton>
<p-selectButton [options]="stateOptions" [(ngModel)]="value1" optionLabel="label" optionValue="value"></p-selectButton>
<p-selectButton styleClass="p-selectbutton-lg" [options]="stateOptions" [(ngModel)]="value1" optionLabel="label" optionValue="value"></p-selectButton>
 
<p-selectButton styleClass="p-selectbutton-xs" [options]="justifyOptions" [(ngModel)]="value3" optionLabel="icon">
  <ng-template let-item>
    <i [class]="item.icon"></i>
  </ng-template>
</p-selectButton>
<p-selectButton styleClass="p-selectbutton-sm" [options]="justifyOptions" [(ngModel)]="value3" optionLabel="icon">
  <ng-template let-item>
    <i [class]="item.icon"></i>
  </ng-template>
</p-selectButton>
<p-selectButton [options]="justifyOptions" [(ngModel)]="value3" optionLabel="icon">
  <ng-template let-item>
    <i [class]="item.icon"></i>
  </ng-template>
</p-selectButton>
<p-selectButton styleClass="p-selectbutton-lg" [options]="justifyOptions" [(ngModel)]="value3" optionLabel="icon">
  <ng-template let-item>
    <i [class]="item.icon"></i>
  </ng-template>
</p-selectButton>

Свойства

Name	Type	Default	Description
options	array	null	An array of selectitems to display as the available options.
optionLabel	string	label	Name of the label field of an option.
optionValue	string	value	Name of the value field of an option.
optionDisabled	string	disabled	Name of the disabled field of an option.
multiple	boolean	false	When specified, allows selecting multiple values.
tabindex	number	0	Index of the element in tabbing order.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
disabled	boolean	false	When present, it specifies that the element should be disabled.
dataKey	string	null	A property to uniquely identify a value in options.

События

Name	Parameters	Description
onChange	event.originalEvent: browser event<br>event.value: single value or an array of values that are selected	Callback to invoke when value changes.
onOptionClick	event.originalEvent: browser event<br>event.option: SelectItem instance of the clicked button<br>event.index: Index of the clicked button	Callback to invoke when a button is clicked.

ScrollPanel Sidebar