Тумблер

PrimeNG/ToggleButton (opens in a new tab)

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

С чего начать

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

import { ToggleButtonModule } from 'primeng/togglebutton';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-togglebutton',
  templateUrl: './prime-togglebutton.component.html',
  styleUrls: ['./prime-togglebutton.component.scss']
})
export class PrimeTogglebuttonComponent implements OnInit {
 
  checked1: boolean = false;
  checked2: boolean = true;
 
  constructor() { }
 
  ngOnInit(): void {
  }
}

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

<p-toggleButton [(ngModel)]="checked"></p-toggleButton>

Basic

<p-toggleButton [(ngModel)]="checked1" onIcon="pi pi-check" offIcon="pi pi-times"></p-toggleButton>

Customized

<p-toggleButton [(ngModel)]="checked2" onLabel="I confirm" offLabel="I reject" onIcon="pi pi-check" offIcon="pi pi-times" [style]="{'width': '10em'}"></p-toggleButton>

Свойства

Name	Type	Default	Description
onLabel	string	null	Label for the on state.
offLabel	string	null	Label for the off state.
onIcon	string	null	Icon for the on state.
offIcon	string	null	Icon for the off state.
iconPos	string	left	Position of the icon, valid values are "left" and "right".
style	string	null	Inline style of the element.
styleClass	string	null	Style class of the element.
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.

События

Name	Parameters	Description
onChange	event.originalEvent: browser event<br>event.checked: boolean value to represent checked state.	Callback to invoke on state change.

Стилизация

Name	Element
p-togglebutton	Container element
p-button-icon-left	Icon element.
p-button-icon-right	Icon element.
p-button-text	Label element.

Toast Tooltip