Parent-child layout
Parent-childLayout provides a parent content area alongside a dependent child content area and responsively stacks them at a given breakpoint. It is used for interactions where selection in the parent (master) determines detail displayed in the child, such as navigation for a preferences dialog.
| Salt package | @salt-ds/core |
|---|---|
| Available since | 1.25.0 |
A parent-child layout displays the parent component to the left and child component to the right.
The parent-child layout component changes to a collapsed view once it approaches a specified breakpoint. Only one of the regions remains visible and fills the width of the parent.
The breakpoint and visible view can customized using the collapsedAtBreakpoint and visibleView props.
You can customize or disable the animations using the prefers-reduced-motion CSS media feature.
This is an example of a preferences dialog using the parent-child layout.