Examples
Props
ExpandableSection
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | React.ReactNode | No | Content rendered inside the Expandable Component | |
className | string | No | '' | Additional classes added to the Expandable Component |
isActive | boolean | No | false | Forces active state |
isExpanded | boolean | No | Flag to indicate if the content is expanded | |
onToggle | (isExpanded: boolean) => void | No | (isExpanded): void => undefined | Callback function to toggle the expandable content |
toggleText | string | No | '' | Text that appears in the toggle |
toggleTextCollapsed | string | No | '' | Text that appears in the toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) |
toggleTextExpanded | string | No | '' | Text that appears in the toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) |
CSS variables
.pf-c-expandable-section | --pf-c-expandable-section__toggle--PaddingTop | 0.375rem | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle--PaddingRight | 1rem | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle--PaddingBottom | 0.375rem | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle--PaddingLeft | 0 | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle--Color | #06c | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle--hover--Color | #004080 | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle--active--Color | #004080 | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle--focus--Color | #004080 | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle--m-expanded--Color | #004080 | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle-icon--Color | #151515 | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle-icon--Transition | .2s ease-in 0s | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle-icon--Rotate | 0 | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate | 0 | |
.pf-c-expandable-section | --pf-c-expandable-section--m-expanded__toggle-icon--Rotate | 90deg | |
.pf-c-expandable-section | --pf-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate | -90deg | |
.pf-c-expandable-section | --pf-c-expandable-section__toggle-text--MarginLeft | calc(0.25rem + 0.5rem) | |
.pf-c-expandable-section | --pf-c-expandable-section__content--MarginTop | 1rem | |
.pf-c-expandable-section.pf-m-expanded | --pf-c-expandable-section__toggle--Color | #004080 | |
.pf-c-expandable-section.pf-m-expanded | --pf-c-expandable-section__toggle-icon--Rotate | 90deg | |
.pf-c-expandable-section.pf-m-expanded | --pf-c-expandable-section__toggle-icon--m-expand-top--Rotate | -90deg | |
.pf-c-expandable-section.pf-m-detached | --pf-c-expandable-section__content--MarginTop | 0 | |
.pf-c-expandable-section__toggle:hover | --pf-c-expandable-section__toggle--Color | #004080 | |
.pf-c-expandable-section__toggle:active | --pf-c-expandable-section__toggle--Color | #004080 | |
.pf-c-expandable-section__toggle:focus | --pf-c-expandable-section__toggle--Color | #004080 | |
.pf-c-expandable-section__toggle-icon.pf-m-expand-top | --pf-c-expandable-section__toggle-icon--Rotate | 0 | |
View source on GitHub