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.

Loading...

Props

EuiSplitPanel.Outer

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop children# ↦	Description and type Any number of _EuiSplitPanelInner components Type: ReactNode ↦	Default value ↵
Prop direction# ↦	Description and type Changes the flex-direction Type: "column" | "row" ↦	Default value column ↵
Prop responsive# ↦	Description and type Stacks row display on small screens. Remove completely with false or provide your own list of breakpoint sizes to stack on. Type: false | string[] ↦	Default value ['xs', 's'] ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop hasBorder# ↦	Description and type Adds a slight 1px border on all edges. Only works when color="plain | transparent" Type: boolean ↦	Default value ↵
Prop hasShadow# ↦	Description and type Adds a medium shadow to the panel; Only works when color="plain" Type: boolean ↦	Default value ↵
Prop borderRadius# ↦	Description and type Corner border radius Type: "m" | "none" ↦	Default value ↵
Prop grow# ↦	Description and type When true the panel will grow in height to match EuiFlexItem Type: boolean ↦	Default value ↵
Prop panelRef# ↦	Description and type Type: Ref<HTMLDivElement> ↦	Default value ↵

𐘂𐘂

EuiSplitPanel.Inner

Extends HTMLAttributes

𐘂𐘂

✄𐘗✄𐘗

Prop ↦	Description and type ↦	Default value ↵
Prop className# ↦	Description and type Type: string ↦	Default value ↵
Prop aria-label# ↦	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: string ↦	Default value ↵
Prop css# ↦	Description and type Type: Interpolation<Theme> ↦	Default value ↵
Prop data-test-subj# ↦	Description and type Type: string ↦	Default value ↵
Prop paddingSize# ↦	Description and type Padding for all four sides Type: "xs" | "s" | "m" | "l" | "xl" | "none" ↦	Default value ↵
Prop grow# ↦	Description and type When true the panel will grow in height to match EuiFlexItem Type: boolean ↦	Default value ↵
Prop panelRef# ↦	Description and type Type: Ref<HTMLDivElement> ↦	Default value ↵

𐘂𐘂