Parent-child layout
Parent-child layout
Resources
ParentChildLayout displays a larger child content area and a smaller parent content area. The parent area influences the content in the child area, 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.