Info alert:Beta feature
Examples
Scrollable
Main content
Main content
Main content
Main content
Main content
Main content
Main content
Main content
Props
Panel
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the panel | |
className | string | Class to add to outer div | |
isScrollable | boolean | Flag to add scrollable styling to the panel | |
variant | 'raised' | 'bordered' | Adds panel variant styles |
PanelMain
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the panel main div | |
className | string | Class to add to outer div | |
maxHeight | string | Max height of the panel main div as a string with the value and unit |
PanelMainBody
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the panel main body div | |
className | string | Class to add to outer div |
PanelHeader
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the panel header | |
className | string | Class to add to outer div |
PanelFooter
Name | Type | Default | Description |
---|---|---|---|
children | React.ReactNode | Content rendered inside the panel footer | |
className | string | Class to add to outer div |
CSS variables
.pf-c-panel | --pf-c-panel--Width | auto | ||
.pf-c-panel | --pf-c-panel--MinWidth | auto | ||
.pf-c-panel | --pf-c-panel--MaxWidth | none | ||
.pf-c-panel | --pf-c-panel--ZIndex | auto | ||
.pf-c-panel | --pf-c-panel--BackgroundColor | #fff | ||
.pf-c-panel | --pf-c-panel--BoxShadow | none | ||
.pf-c-panel | --pf-c-panel--before--BorderWidth | 0 | ||
.pf-c-panel | --pf-c-panel--before--BorderColor | #d2d2d2 | ||
.pf-c-panel | --pf-c-panel--m-bordered--before--BorderWidth | 1px | ||
.pf-c-panel | --pf-c-panel--m-raised--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-panel | --pf-c-panel--m-raised--ZIndex | 200 | ||
.pf-c-panel | --pf-c-panel__header--PaddingTop | 1rem | ||
.pf-c-panel | --pf-c-panel__header--PaddingRight | 1rem | ||
.pf-c-panel | --pf-c-panel__header--PaddingBottom | 1rem | ||
.pf-c-panel | --pf-c-panel__header--PaddingLeft | 1rem | ||
.pf-c-panel | --pf-c-panel__main--MaxHeight | none | ||
.pf-c-panel | --pf-c-panel__main--Overflow | visible | ||
.pf-c-panel | --pf-c-panel__main-body--PaddingTop | 1rem | ||
.pf-c-panel | --pf-c-panel__main-body--PaddingRight | 1rem | ||
.pf-c-panel | --pf-c-panel__main-body--PaddingBottom | 1rem | ||
.pf-c-panel | --pf-c-panel__main-body--PaddingLeft | 1rem | ||
.pf-c-panel | --pf-c-panel__footer--PaddingTop | 1rem | ||
.pf-c-panel | --pf-c-panel__footer--PaddingRight | 1rem | ||
.pf-c-panel | --pf-c-panel__footer--PaddingBottom | 1rem | ||
.pf-c-panel | --pf-c-panel__footer--PaddingLeft | 1rem | ||
.pf-c-panel | --pf-c-panel__footer--BoxShadow | none | ||
.pf-c-panel | --pf-c-panel--m-scrollable__main--MaxHeight | 18.75rem | ||
.pf-c-panel | --pf-c-panel--m-scrollable__main--Overflow | auto | ||
.pf-c-panel | --pf-c-panel--m-scrollable__footer--BoxShadow | 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16) | ||
.pf-c-panel.pf-m-bordered | --pf-c-panel--before--BorderWidth | 1px | ||
.pf-c-panel.pf-m-raised | --pf-c-panel--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-panel.pf-m-raised | --pf-c-panel--ZIndex | 200 | ||
.pf-c-panel.pf-m-scrollable | --pf-c-panel__main--MaxHeight | 18.75rem | ||
.pf-c-panel.pf-m-scrollable | --pf-c-panel__main--Overflow | auto | ||
.pf-c-panel.pf-m-scrollable | --pf-c-panel__footer--BoxShadow | 0 -0.3125rem 0.25rem -0.25rem rgba(3, 3, 3, 0.16) | ||
View source on GitHub