SplitPage
SplitPage allows you to create mobile friendly layouts with split panes.
- Beta
Buy Pro
- 0.40.0 (latest)
Import#
SplitPage
: The container component that manages composition.useSplitPage
: Access theSplitPage
context.
import { SplitPage, useSplitPage } from '@saas-ui-pro/react'
Usage#
SplitPage can be use to create horizontal and vertical layouts and is best used together with the Page
component.
Basic split page#
The SplitPage
requires 2 children. The first child is the left pane and the second child is the right pane for horizontal layouts.
import { Text } from '@chakra-ui/react'import {AppShell,EmptyState,StructuredList,StructuredListItem,StructuredListCell,PersonaAvatar,} from '@saas-ui/react'import { SplitPage, Page, PageHeader, PageBody } from '@saas-ui-pro/react'export default function Basic() {return (<AppShell><SplitPage breakpoint="sm"><Page borderRightWidth="1px" width="30%" maxW="300px"><PageHeader title="Inbox" /><PageBody p="0"></PageBody></Page><EmptyState title="Inbox zero" description="Time for some coffee" /></SplitPage></AppShell>)}
With content#
import { Text } from '@chakra-ui/react'import {AppShell,EmptyState,StructuredList,StructuredListItem,StructuredListCell,PersonaAvatar,} from '@saas-ui/react'import { SplitPage, Page, PageHeader, PageBody } from '@saas-ui-pro/react'const breakpoints = { base: true, sm: false }function InboxMessage() {const { onClose } = useSplitPage()const isMobile = useBreakpointValue(breakpoints)const nav = isMobile && <BackButton onClick={onClose} ms="-2" />return (<Page><PageHeadertitle="Elliot Alderson"description="A bug is never just a mistake"nav={nav}/><PageBody /></Page>)}function InboxList() {const { onOpen } = useSplitPage()return (<StructuredList><StructuredListItem href="#" onClick={onOpen}><StructuredListCell width="14"><PersonaAvatar name="Elliot Alderson" size="sm" presence="online" /></StructuredListCell><StructuredListCell flex="1"><Text fontWeight="bold">A bug is never just a mistake.</Text><Text fontSize="sm" color="muted" noOfLines={2}><Text as="span" color="app-text">Elliot Alderson</Text>{' '}— It represents something bigger. An error of thinking that makesyou who you are.</Text></StructuredListCell></StructuredListItem></StructuredList>)}export default function Inbox() {return (<AppShell><SplitPage defaultIsOpen={true} breakpoint="sm"><Page borderRightWidth="1px" width="30%" maxW="300px"><PageHeader title="Inbox" /><PageBody p="0"><InboxList /></PageBody></Page><InboxMessage /></SplitPage></AppShell>)}
Vertical layout#
import { Text, Box } from '@chakra-ui/react'import {AppShell,StructuredList,StructuredListItem,StructuredListCell,PersonaAvatar,} from '@saas-ui/react'import { SplitPage, Page, PageHeader, PageBody } from '@saas-ui-pro/react'import { FiCode } from 'react-icons/fi'function Queries() {const { onOpen } = useSplitPage()return (<StructuredList><StructuredListItem onClick={() => onOpen()}><StructuredListIcon color="muted"><FiCode /></StructuredListIcon><StructuredListCell px="2" flex="1">Get all users</StructuredListCell></StructuredListItem></StructuredList>)}export default function Vertical() {return (<AppShell><SplitPage defaultIsOpen={false} breakpoint="sm" orientation="vertical"><Page borderBottomWidth="1px" height="30%"><PageHeader title="Queries" /><PageBody p="0"><Queries /></PageBody></Page><Page><PageBody p="0"><Box_focus={{ outline: 0 }}minH="100%"p="4"contentEditabledangerouslySetInnerHTML={{ __html: 'SELECT * FROM users' }}/></PageBody></Page></SplitPage></AppShell>)}
Was this helpful?