SplitPage

SplitPage allows you to create mobile friendly layouts with split panes.

Import

  • SplitPage: The container component that manages composition.
  • useSplitPage: Access the SplitPage 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>
<PageHeader
title="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 makes
you 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"
contentEditable
dangerouslySetInnerHTML={{ __html: 'SELECT * FROM users' }}
/>
</PageBody>
</Page>
</SplitPage>
</AppShell>
)
}

Was this helpful?