Panel
EuiPanel is a building block component. Use it as a layout helper for containing content. It is also commonly used as a base for other larger components like
EuiPage, EuiPopover and EuiCard.Padding
The most basic use is to simply add padding around your content.
Shadow and border
EuiPanel can give depth to your container with
hasShadow while hasBorder can add containment. Just be sure not to include too many nested panels with these settings.
Certain allowed combinations of shadow, border, and color depend on the current theme.
For instance, only plain or transparent panels can have a border and/or shadow. The default theme doesn't allow combining the hasBorder option with hasShadow.
Colors and corners
Use color to add background shading to your panel and provide an additional helpful aesthetic to your container in context. Be mindful to use color sparingly. You can also remove the rounded corners depending on the placement of your panel with borderRadius="none"
Passing color="transparent" can give you a quick empty box simply for adding padding to all sides.
Growing height
Using EuiPanel in an EuiFlexItem will always grow its height to match. This is great for rows of panels. However, you can also turn this feature off by setting grow={false}.
Props
EuiPanel
Prop | Description and type | Default value |
|---|---|---|
Prop element# | Description and type Type: "button" | "div" | Default value |
Prop hasShadow# | Description and type Adds a medium shadow to the panel; boolean | Default value true |
Prop hasBorder# | Description and type Adds a slight 1px border on all edges. boolean | Default value false |
Prop paddingSize# | Description and type Padding for all four sides "xs" | "s" | "m" | "l" | "xl" | "none" | Default value m |
Prop borderRadius# | Description and type Corner border radius "m" | "none" | Default value m |
Prop grow# | Description and type When true the panel will grow in height to match boolean | Default value true |
Prop panelRef# | Description and type Type: Ref<HTMLDivElement> | Default value |
Prop color# | Description and type Background color of the panel; PanelColor | Default value plain |
Prop className# | Description and type Type: string | Default value |
Prop aria-label# | Description and type Type: string | Default value |
Prop data-test-subj# | Description and type Type: string | Default value |
Prop css# | Description and type Type: Interpolation<Theme> | Default value |