Кнопки

Кнопка - это расширение к стандартному HTML-тегу с пиктограммами и возможностью темизации.

С чего начать

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

import { ButtonModule } from 'primeng/button';

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

Basic

Icons

Severities

Raised Buttons

Rounded Buttons

Text Buttons

Raised Text Buttons

Outlined Buttons

Rounded Icon Buttons

Rounded Text Icon Buttons

Rounded and Outlined Icon Buttons

Badges

Templating

PrimeNG

Button Set

Размеры

Размеры для кнопок с иконкой

Использование p-button с q-icon

Директива

Если Вы хотите использовать кнопку от prime как директиву в сочетании с иконкой qpalette, то для корректного отображения кнопки необходимо обязательно использовать классp-button-icon-only.

Компонент

Если Вы хотите использовать кнопку от prime как компонент в сочетании с иконкой qpalette, то для корректного отображения кнопки необходимо обязательно использовать styleClassp-button-q-icon.

Свойства pButton

Name	Type	Default	Description
label	string	null	Text of the button.
icon	string	null	Name of the icon.
iconPos	string	left	Position of the icon, valid values are "left" and "right".
loading	boolean	false	Whether the button is in loading state.
loadingIcon	string	pi pi-spinner pi-spin	Icon to display in loading state.

Свойства p-button

Name	Type	Default	Description
type	string	null	Type of the button.
label	string	null	Text of the button.
icon	string	null	Name of the icon.
iconPos	string	left	Position of the icon, valid values are "left" and "right".
badge	string	null	Value of the badge.
badgeClass	string	null	Style class of the badge.
loading	boolean	false	Whether the button is in loading state.
loadingIcon	string	pi pi-spinner pi-spin	Icon to display in loading state.
disabled	boolean	false	When present, it specifies that the component should be disabled.
style	string	null	Inline style of the element.
styleClass	string	null	Style class of the element.
onClick	event	null	Callback to execute when button is clicked.
onFocus	event	null	Callback to execute when button is focused.
onBlur	event	null	Callback to execute when button loses focus.

Шаблоны

Name	Parameters
content	-

Стилизация

Name	Element
p-button	Button element
p-button-icon	Icon element
p-button-label	Label element of the button

Breadcrumbs Calendar