SplitPageLayout
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.
import {SplitPageLayout} from '@primer/react'
If you need a more flexible layout component, consider using the PageLayout component.
| Name | Type | Default | Description |
|---|---|---|---|
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |
| Name | Type | Default | Description |
|---|---|---|---|
| padding | | 'none' | 'condensed' | 'normal' | 'normal' | The amount of padding inside the header. |
| divider | | 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' } | 'line' | |
| hidden | | boolean | { narrow?: boolean regular?: boolean wide?: boolean } | false | Whether the header is hidden. |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |
| Name | Type | Default | Description |
|---|---|---|---|
| width | | 'full' | 'medium' | 'large' | 'xlarge' | 'large' | The maximum width of the content region. |
| padding | | 'none' | 'condensed' | 'normal' | 'normal' | The amount of padding inside the content. |
| hidden | | boolean | { narrow?: boolean regular?: boolean wide?: boolean } | false | Whether the content is hidden. |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |
| Name | Type | Default | Description |
|---|---|---|---|
| position | | 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' } | 'start' | |
| width | | 'small' | 'medium' | 'large' | 'medium' | The width of the pane. |
| minWidth | number | 256 | The minimum width of the pane. |
| resizable | boolean | false | When true, the pane may be resized by the user. |
| widthStorageKey | string | 'paneWidth' | Provide a key used by localStorage to persist the size of the pane on the client. |
| sticky | boolean | true | Whether the pane should stick to the top of the screen while the content scrolls. |
| offsetHeader | number | string | 0 | Use offsetHeader along with the sticky prop to push the sticky pane down to make room for a sticky header if necessary. Use the type `string` to specify the height with a unit i.e. 5rem; otherwise the type `number` will be taken as px. |
| padding | | 'none' | 'condensed' | 'normal' | 'normal' | The amount of padding inside the pane. |
| divider | | 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' } | 'line' | |
| hidden | | boolean | { narrow?: boolean regular?: boolean wide?: boolean } | false | Whether the pane is hidden. |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |
| Name | Type | Default | Description |
|---|---|---|---|
| padding | | 'none' | 'condensed' | 'normal' | 'normal' | The amount of padding inside the footer. |
| divider | | 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' } | 'line' | |
| hidden | | boolean | { narrow?: boolean regular?: boolean wide?: boolean } | false | Whether the footer is hidden. |
| sx | SystemStyleObject | Style overrides to apply to the component. See also overriding styles. |