Expandable section
ExamplesPropsCSS VariablesProps
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| children | React.ReactNode | Yes | Content rendered inside the Expandable Component | |
| className | string | No | '' | Additional classes added to the Expandable Component |
| isExpanded | boolean | No | Flag to indicate if the content is expanded | |
| toggleText | string | No | '' | Text that appears in the toggle |
| 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) |
| 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) |
| onToggle | () => void | No | (): any => undefined | Callback function to toggle the expandable content |
| isActive | boolean | No | false | TODO: Use once core reimplements. Forces active state |
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--FontWeight | 500 | ||
| .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--m-expanded__toggle-icon--Transform | rotate(90deg) | ||
| .pf-c-expandable-section | --pf-c-expandable-section__content--MarginTop | 1rem | ||
| .pf-c-expandable-section | --pf-c-expandable-section__toggle-text--MarginLeft | calc(0.25rem + 0.5rem) | ||
| .pf-c-expandable-section.pf-m-expanded | --pf-c-expandable-section__toggle--Color | #004080 | ||
| .pf-c-expandable-section .pf-c-expandable-section__toggle:hover | --pf-c-expandable-section__toggle--Color | #004080 | ||
| .pf-c-expandable-section .pf-c-expandable-section__toggle:active | --pf-c-expandable-section__toggle--Color | #004080 | ||
| .pf-c-expandable-section .pf-c-expandable-section__toggle:focus | --pf-c-expandable-section__toggle--Color | #004080 | ||
| .pf-m-redhat-font .pf-c-expandable-section__toggle | --pf-c-expandable-section__toggle--FontWeight | 400 | ||
