From 0d364bb8f9feb79e2d5ca9b9386aea5c231f4fd0 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Thu, 30 Jun 2022 10:48:06 -0700 Subject: [PATCH] SplitPageLayout API (#2144) * Draft SplitPageLayout API docs * Update docs/content/SplitPageLayout.mdx Co-authored-by: Vinicius Depizzol * Update docs/content/SplitPageLayout.mdx * visible -> hidden prop Co-authored-by: Vinicius Depizzol --- docs/content/SplitPageLayout.mdx | 313 +++++++++++++++++++++++++++++++ 1 file changed, 313 insertions(+) create mode 100644 docs/content/SplitPageLayout.mdx diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx new file mode 100644 index 00000000000..739e18c3b40 --- /dev/null +++ b/docs/content/SplitPageLayout.mdx @@ -0,0 +1,313 @@ +--- +title: SplitPageLayout +componentId: split_page_layout +status: Draft +description: Provides structure for a split page layout, including independent scrolling for the pane and content regions. Useful for responsive list/detail patterns, when an item in the pane updates the page content on selection. +--- + +Not implemented yet + +## Examples + +### Default + +```jsx + + + + + + + + + + + + + + +``` + +### With pane hidden on narrow viewports + +```jsx + + + + + + + + + + + + +``` + +### With content hidden on narrow viewports + +```jsx + + + + + + + + + + + + +``` + +### Without dividers + +```jsx + + + + + + + + + + + + + + +``` + +### With pane on right + +```jsx + + + + + + + + + + + + + + +``` + +### Without padding + +```jsx + + + + + + + + + + + + + + +``` + +### Without header or footer + +```jsx + + + + + + + + +``` + +### With non-sticky pane + +```jsx + + + + + + + + + + + + + + +``` + +## Props + +### SplitPageLayout + + + + + +### SplitPageLayout.Header + + + `} + defaultValue="'line'" + /> + `} + defaultValue="false" + description="Whether the header is hidden." + /> + + + + +### SplitPageLayout.Content + + + + `} + defaultValue="false" + description="Whether the content is hidden." + /> + + + + +### SplitPageLayout.Pane + + + `} + defaultValue="'start'" + /> + + `} + defaultValue="'line'" + /> + `} + defaultValue="false" + description="Whether the pane is hidden." + /> + + + + +### SplitPageLayout.Footer + + + `} + defaultValue="'line'" + /> + `} + defaultValue="false" + description="Whether the footer is hidden." + /> + + + + +## Status + +