Split
Split
creates a two column layout when the available horizontal space makes it possible. If not, it renders as a single column. Its slots generally contain components like Box
or DataView
.import { Box, DataView, Main, Split } from '@aragon/ui'
function App() {
return (
<Main>
<Split
primary={<DataView />}
secondary={<Box heading="Secondary">Secondary content</Box>}
/>
</Main>
)
}
TYPE | DEFAULT VALUE |
---|---|
React node | None |
In two columns mode, this takes the wider space. It appears on the left (for left-to-right languages) or the right if
invert
is set to horizontal
.In single column mode, it appears above the
secondary
slot, or below if invert
is set to vertical
.TYPE | DEFAULT VALUE |
---|---|
React node | None |
In two columns mode, this is the narrower part. It appears on the right (for left to right languages) or the left if
invert
is set to horizontal
.In single column mode, it appears below the
primary
slot, or above if invert
is set to vertical
.TYPE | DEFAULT VALUE |
---|---|
"none" , "horizontal" or "vertical" | "none" |
Invert the two slots, vertically or horizontally.
Last modified 6mo ago