Komponen / Tata letak

SplitView

Kerangka layar BizOps: sidebar kaca berisi NavList, area isi (Toolbar + daftar/detail/form), dan inspector opsional di kanan. Di layar sempit sidebar menjadi panel yang bisa dibuka/ditutup.

React · BetaFigma · siapFigma Sumber

Import

tsx

import { SplitView, NavList, Drawer } from '@divistant/circca-react';

Props · SplitView

Juga menerima atribut <div>. Lebar diukur dari bingkai SplitView sendiri (ResizeObserver), bukan viewport.

Prop	Tipe	Default	Keterangan
sidebar	ReactNode	—	Isi sidebar kaca, biasanya <NavList iconStyle="tile">.
children	ReactNode	—	Isi layar: Toolbar/PageHeader lalu konten. Area isi bergulir sendiri.
inspector	ReactNode	—	Inspector opsional di kanan, biasanya <Drawer> (properti Figma "Inspector").
sidebarLabel	string	'Navigasi'	Nama landmark sidebar dan judul tersembunyi panel overlay.
landmarks	boolean	true	Render <aside> (sidebar) dan <main> (isi). Matikan bila disarangkan di layout yang sudah punya <main>.
collapseBelow	number	720	Lebar bingkai (px) di bawahnya sidebar menjadi panel overlay.
inspectorCollapseBelow	number	1024	Lebar bingkai (px) di bawahnya inspector Drawer menjadi overlay.
sidebarOpen / onSidebarOpenChange	boolean / (open) => void	—	Kendalikan panel sidebar overlay (layar sempit).
closeOnNavigate	boolean	true	Tutup panel overlay saat tautan di dalamnya diklik.
toggleLabel	string	'Tampilkan navigasi'	Label tombol toggle bawaan.
className	string	—	Kelas tambahan, mis. h-dvh untuk layar penuh.

Props · SplitView.SidebarToggle

IconButton (Ghost) yang hanya tampil saat SplitView sempit. Bila dipasang, toggle bawaan (baris sendiri di atas isi) tidak dirender.

Prop	Tipe	Default	Keterangan
label	string	'Tampilkan navigasi'	Label aksesibel & tooltip.
variant / size	'secondary' \| 'ghost' / 'sm' \| 'md' \| 'lg'	'ghost' / 'md'	Diteruskan ke IconButton.

Sumber

Kode komponen ada di packages/react/src/components/split-view. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.