Label Group
A label group is a collection of labels that can be grouped by category
and used to represent one or more values assigned to a single attribute.
When the number of labels exceeds numLabels, additional labels will be
hidden using an overflow label.
Overview
Installation
npm install @patternfly/elementsUsage
Slots
-
category -
category Category name text for label group category. If this slot is populated, the label group will have category styling applied.
- Default Slot
-
<pf-label>elements.
Attributes
orientation-
Orientation of the label group.
- DOM Property
orientation- Type
-
'horizontal' | 'vertical' - Default
-
'horizontal'
accessible-label-
Accessible label for the label group when no category name is provided.
- DOM Property
accessibleLabel- Type
-
string - Default
-
''
accessible-close-label-
Accessible label for the close button.
- DOM Property
accessibleCloseLabel- Type
-
string - Default
-
'Close'
collapsed-text-
Customizable "more" template string. Use variable
${remaining}for the overflow label count.- DOM Property
collapsedText- Type
-
string - Default
-
'${remaining} more'
expanded-text-
Customizable "show less" text string.
- DOM Property
expandedText- Type
-
string - Default
-
'show less'
num-labels-
Number of labels to show before overflow.
- DOM Property
numLabels- Type
-
number - Default
-
3
open-
Whether overflow labels are visible.
- DOM Property
open- Type
-
boolean - Default
-
false
closeable-
Whether the label group can be closed.
- DOM Property
closeable- Type
-
boolean - Default
-
false
Methods
None
Events
expand-
Fires when label group is expanded to show all labels
Event Type:PfLabelGroupExpandEvent remove-
Fires when label group is closed/removed
Event Type:PfLabelGroupRemoveEvent
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-global--BackgroundColor--200 |
#f0f0f0
|
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-global--Color--100 |
#151515
|
|
--pf-global--spacer--xs |
0.25rem
|
|
--pf-global--BorderRadius--sm |
3px
|
|
--pf-c-label-group--m-category--PaddingTop |
—
|
|
--pf-c-label-group--m-category--PaddingRight |
—
|
|
--pf-c-label-group--m-category--PaddingBottom |
—
|
|
--pf-c-label-group--m-category--PaddingLeft |
—
|
|
--pf-c-label-group--m-category--BackgroundColor |
—
|
|
--pf-c-label-group__list--MarginRight |
—
|
|
--pf-c-label-group__list--MarginBottom |
calc(var(--pf-global--spacer--xs, 0.25rem) * -1)
|
|
--pf-global--FontFamily--sans-serif |
"RedHatTextUpdated", "Overpass", overpass, helvetica, arial, sans-serif
|
|
--pf-global--FontSize--sm |
14px
|
|
--pf-global--FontWeight--normal |
400
|
|
--pf-c-label-group__list-item--MarginRight |
—
|
|
--pf-c-label-group__list-item--MarginBottom |
—
|
|
--pf-c-label-group__label--MaxWidth |
—
|
|
--pf-c-label-group__label--MarginRight |
—
|
|
--pf-c-label-group__label--FontSize |
—
|
|
--pf-c-label-group__close--MarginTop |
—
|
|
--pf-c-label-group__close--MarginBottom |
—
|
CSS Shadow Parts
None
