35 lines
1.0 KiB
TypeScript
35 lines
1.0 KiB
TypeScript
import Layout from '../components/Layout'
|
|
import Split from '../components/Split'
|
|
|
|
export default function LayoutShowcase() {
|
|
return (
|
|
<Layout>
|
|
<div className="container-fluid py-4">
|
|
<h3>Horizontal Split</h3>
|
|
<div style={{ height: 240 }} className="mb-4">
|
|
<Split direction="horizontal" gutter={12} variant="solid">
|
|
<Split.Panel size={1} accent="yellow">
|
|
<div className="p-3">Left</div>
|
|
</Split.Panel>
|
|
<Split.Panel size={2}>
|
|
<div className="p-3">Right</div>
|
|
</Split.Panel>
|
|
</Split>
|
|
</div>
|
|
|
|
<h3>Vertical Split</h3>
|
|
<div style={{ height: 360 }} className="mb-4">
|
|
<Split direction="vertical" gutter={12} accent="pink">
|
|
<Split.Panel size={1}>
|
|
<div className="p-3">Top</div>
|
|
</Split.Panel>
|
|
<Split.Panel size={3}>
|
|
<div className="p-3">Bottom</div>
|
|
</Split.Panel>
|
|
</Split>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
)
|
|
}
|