Значки
PrimeNG/Badge (opens in a new tab)
Компонент badge используется, чтобы маркировать, классифицировать или упорядочивать элементы. Можно использовать как индикатор состояния для другого компонента, например строки таблицы, количества сообщений или обозначение статуса.
С чего начать
Подключите модуль
import { BadgeModule } from 'primeng/badge';Встройте компонент с помощью тэга p-badge.
Text
Основные цвета
Дополнительные цвета
Numbers
Основные цвета
Дополнительные цвета
Dots
Чтобы получить p-badge в виде точки не передавайте значение в поле value и добавьте в styleClassdot.
Small Dots
Чтобы получить точку маленького размера, добавьте в styleClass класс p-badge-sm.
Positioned Badge
Inline Button Badge
Размеры
Значение по умолчанию (не указанное) или null для параметра size соответствуют старому small
Свойства
| Name | Type | Default | Description |
|---|---|---|---|
| value | any | null | Value to display inside the badge. |
| severity | string | null | Severity type of the badge. |
| size | string | null | Size of the badge, valid options are "large" and "xlarge". |
| style | object | null | Inline style of the component. |
| styleClass | string | null | Style class of the component. |
Стилизация
| Name | Element |
|---|---|
| p-badge | Badge element |
| p-overlay-badge | Wrapper of a badge and its target. |
| p-badge-dot | Badge element with no value. |
| p-badge-success | Badge element with success severity. |
| p-badge-info | Badge element with info severity. |
| p-badge-warning | Badge element with warning severity. |
| p-badge-danger | Badge element with danger severity. |
| p-badge-lg | Large badge element |
| p-badge-xl | Extra large badge element |