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 name text for label group category. If supplied, label group will have category styling applied
- Default Slot
-
Default slot for
<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-
Text for collapsed overflow label. Use
${remaining}to indicate number of hidden labels.- DOM Property
collapsedText- Type
-
string - Default
-
'${remaining} more'
expanded-text-
Text for expanded overflow label.
- DOM Property
expandedText- Type
-
string - Default
-
'show less'
num-labels-
Number of labels to show before creating an overflow label.
- DOM Property
numLabels- Type
-
number - Default
-
3
open-
Whether the overflow labels are visible (expanded state).
- 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-
Fired when label group is expanded to show all labels
Event Type:unknown
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-label__c-button--FontSize |
var(--pf-global--FontSize--xs, 0.75rem)
|
|
--pf-global--FontSize--xs |
0.75rem
|
|
--pf-c-label__c-button--PaddingTop |
var(--pf-global--spacer--xs, 0.25rem)
|
|
--pf-c-label__c-button--PaddingRight |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-label__c-button--PaddingBottom |
var(--pf-global--spacer--xs, 0.25rem)
|
|
--pf-global--spacer--xs |
0.25rem
|
|
--pf-c-label__c-button--PaddingLeft |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-label__c-button--MarginTop |
-0.5rem
|
|
--pf-c-label__c-button--MarginRight |
-0.5rem
|
|
--pf-c-label__c-button--MarginBottom |
-0.5rem
|
|
--pf-c-label__c-button--MarginLeft |
0.25rem
|
|
--pf-c-label--m-compact--PaddingTop |
0
|
|
--pf-c-label--m-compact--PaddingRight |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-c-label--m-compact--PaddingBottom |
0
|
|
--pf-c-label--m-compact--PaddingLeft |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-global--spacer--sm |
0.5rem
|
CSS Shadow Parts
None
