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.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}.
Split panels
EuiSplitPanel is a composition of an outer and multiple inner EuiPanels. It is a namespaced component that you consume using EuiSplitPanel.Outer and EuiSplitPanel.Inner respectively. You can supply the same panel props to both components with the exception of a few to ensure the visual layout is correct. It also has two directions, column (default) and row.
For custom responsiveness, you can adjust at which breakpoints a row layout will stack by passing a new array of breakpoint names ['xs', 's'] to the responsive prop, or completely turn it off with 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; "transparent" | "accent" | "primary" | "success" | "warning" | "danger" | "plain" | "subdued" | 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 |