Examples
With custom toggle content
By using the toggleContent prop, you can pass in content other than a simple string such as an icon or a badge. When passing in custom content in this way, you should not pass in any interactive element such as a button.
Props
ExpandableSection
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the Expandable Component | |
| className | string | '' | Additional classes added to the Expandable Component |
| contentId | string | '' | ID of the content of the expandable section |
| displaySize | 'default' | 'large' | 'default' | Display size variant. Set to large for disclosure styling. |
| isActive | boolean | false | Forces active state |
| isDetached | boolean | false | Indicates the expandable section has a detached toggle |
| isExpanded | boolean | Flag to indicate if the content is expanded | |
| isIndented | boolean | false | Flag to indicate if the content is indented |
| isWidthLimited | boolean | false | Flag to indicate the width of the component is limited. Set to true for disclosure styling. |
| onToggle | (isExpanded: boolean) => void | (isExpanded): void => undefined | Callback function to toggle the expandable content. Detached expandable sections should use the onToggle property of ExpandableSectionToggle. |
| toggleContent | React.ReactNode | React node that appears in the attached toggle in place of toggle text | |
| toggleText | string | '' | Text that appears in the attached toggle |
| toggleTextCollapsed | string | '' | Text that appears in the attached toggle when collapsed (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) |
| toggleTextExpanded | string | '' | Text that appears in the attached toggle when expanded (will override toggleText if both are specified; used for uncontrolled expandable with dynamic toggle text) |
ExpandableSectionToggle
| Name | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | Content rendered inside the expandable toggle. | |
| className | string | '' | Additional classes added to the expandable toggle. |
| contentId | string | ID of the toggle's respective expandable section content. | |
| direction | 'up' | 'down' | 'down' | Direction the toggle arrow should point when the expandable section is expanded. |
| isExpanded | boolean | false | Flag indicating if the expandable section is expanded. |
| onToggle | (isExpanded: boolean) => void | Callback function to toggle the expandable content. |
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--MinWidth | 1em | ||
| .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-c-expandable-section__content--MaxWidth | auto | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-limit-width__content--MaxWidth | 46.875rem | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg--BoxShadow | 0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06) | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__toggle--PaddingTop | 1rem | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__toggle--PaddingRight | 1rem | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__toggle--PaddingBottom | 1rem | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__toggle--PaddingLeft | 1rem | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__content--MarginTop | 0 | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__content--PaddingRight | 1.5rem | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__content--PaddingBottom | 1.5rem | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg__content--PaddingLeft | 1.5rem | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg--after--BackgroundColor | transparent | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg--after--Width | 3px | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-display-lg--m-expanded--after--BackgroundColor | #06c | ||
| .pf-c-expandable-section | --pf-c-expandable-section--m-indented__content--PaddingLeft | calc(calc(0.25rem + 0.5rem) + 1em) | ||
| .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-expanded | --pf-c-expandable-section--m-display-lg--after--BackgroundColor | #06c | ||
| .pf-c-expandable-section.pf-m-detached | --pf-c-expandable-section__content--MarginTop | 0 | ||
| .pf-c-expandable-section.pf-m-limit-width | --pf-c-expandable-section__content--MaxWidth | 46.875rem | ||
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__toggle--PaddingTop | 1rem | ||
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__toggle--PaddingRight | 1rem | ||
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__toggle--PaddingBottom | 1rem | ||
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__toggle--PaddingLeft | 1rem | ||
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__content--PaddingRight | 1.5rem | ||
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__content--PaddingBottom | 1.5rem | ||
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__content--PaddingLeft | 1.5rem | ||
| .pf-c-expandable-section.pf-m-display-lg | --pf-c-expandable-section__content--MarginTop | 0 | ||
| .pf-c-expandable-section.pf-m-indented | --pf-c-expandable-section__content--PaddingLeft | calc(calc(0.25rem + 0.5rem) + 1em) | ||
| .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
