Parent-child layout
Parent-child Layout provides a parent content area alongside a dependent child content area and responsively stacks them at a given breakpoint. It is typically used for master-detail interactions, where selection in the parent (master) determines detail displayed in the child, such as navigation for a preferences dialog.
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.
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.
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.