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
