Split Page Layout
Split Page Layout is a layout component that allows you to create a two-column layout with a main content area and a sidebar.
Splt Page Layout is a layout component that allows you to create a two-column layout with a main content area and a sidebar. It is designed to be flexible and responsive, adapting to different screen sizes and content requirements.
React examples
Settings Page
Danger zone
Delete account
Are you sure you don't want to just downgrade your account to a free account? We won't charge your credit card anymore.
Props
SplitPageLayout
Name | Default | Description |
---|---|---|
sx | SystemStyleObject |
SplitPageLayout.Header
Name | Default | Description |
---|---|---|
aria-label | string A unique label for the rendered main landmark | |
aria-labelledby | string An id to an element which uniquely labels the rendered main landmark | |
padding | 'normal' | | 'none' | 'condensed' | 'normal' The amount of padding inside the header. |
divider | 'line' | | 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' } |
hidden | false | | boolean | { narrow?: boolean regular?: boolean wide?: boolean } Whether the header is hidden. |
sx | SystemStyleObject |
SplitPageLayout.Content
Name | Default | Description |
---|---|---|
aria-label | string A unique label for the rendered main landmark | |
aria-labelledby | string An id to an element which uniquely labels the rendered main landmark | |
width | 'large' | | 'full' | 'medium' | 'large' | 'xlarge' The maximum width of the content region. |
padding | 'normal' | | 'none' | 'condensed' | 'normal' The amount of padding inside the content. |
hidden | false | | boolean | { narrow?: boolean regular?: boolean wide?: boolean } Whether the content is hidden. |
sx | SystemStyleObject |
SplitPageLayout.Pane
Name | Default | Description |
---|---|---|
aria-label | string | undefined Label for the pane. Required if the pane overflows and doesn't have aria-labelledby. | |
aria-labelledby | string | undefined Id of an element that acts as a label for the pane. Required if the pane overflows and doesn't have aria-label. | |
width | 'medium' | | 'small' | 'medium' | 'large' | { min: string max: string default: string } The width of the pane. If using custom widths, provide an object with keys 'min', 'max' and 'default'. |
minWidth | 256 | number The minimum width of the pane. |
resizable | false | boolean When true, the pane may be resized by the user. |
widthStorageKey | 'paneWidth' | string Provide a key used by localStorage to persist the size of the pane on the client. |
sticky | true | boolean Whether the pane should stick to the top of the screen while the content scrolls. |
offsetHeader | 0 | number | string 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 |
padding | 'normal' | | 'none' | 'condensed' | 'normal' The amount of padding inside the pane. |
divider | 'line' | | 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' } |
hidden | false | | boolean | { narrow?: boolean regular?: boolean wide?: boolean } Whether the pane is hidden. |
position | start | 'end' | 'start' | {narrow?: 'end' | 'start', narrow?: 'end' | 'start', wide?: 'end' | 'start'} Which side of the page the pane should be on. Can be changed for different viewport widths. |
sx | SystemStyleObject |
SplitPageLayout.Footer
Name | Default | Description |
---|---|---|
aria-label | string A unique label for the rendered main landmark | |
aria-labelledby | string An id to an element which uniquely labels the rendered main landmark | |
padding | 'normal' | | 'none' | 'condensed' | 'normal' The amount of padding inside the footer. |
divider | 'line' | | 'none' | 'line' | { narrow?: | 'none' | 'line' | 'filled' regular?: | 'none' | 'line' wide?: | 'none' | 'line' } |
hidden | false | | boolean | { narrow?: boolean regular?: boolean wide?: boolean } Whether the footer is hidden. |
sx | SystemStyleObject |