Live Docs

Navigation

Layout Shells /

new

Split Layout

Shell workspace/POS: topbar opsional di atas dua kolom — area kerja utama yang lebar di samping panel sekunder yang sticky. Menumpuk jadi satu kolom di layar kecil.

import { SplitLayout } from "@naraya/ui";

Overview

SplitLayout dipakai untuk layar kerja dua-panel: kasir/POS (produk + keranjang), editor + inspector, atau chat + detail. Panel sekunder (aside) tetap terlihat (sticky) saat panel utama discroll, dan otomatis turun ke bawah saat layar menyempit (< 768px).

Examples

POS / cashier shell

Naraya POS
Products

Latte

$4.50

Cappuccino

$4.50

Espresso

$4.50

Mocha

$4.50

Croissant

$4.50

Muffin

$4.50

<SplitLayout
  topbar={<Topbar brand={<strong>Naraya POS</strong>} />}
  primary={<section>...product grid...</section>}
  aside={<Card>...cart summary...</Card>}
/>

Props

PropTypeDefaultDescription
topbarReactNode—Topbar di atas area split (opsional).
primary*ReactNode—Kolom kerja utama (lebar).
aside*ReactNode—Panel sekunder (sticky).
ratiostring"2fr 1fr"grid-template-columns untuk split.
asideStickybooleantruePin aside saat primary discroll.
containerSizeContainerSize"2xl"Max-width area split.

Accessibility

  • Panel sekunder memakai landmark <aside>.
  • Saat menumpuk di mobile, urutan DOM menjaga primary tetap dibaca lebih dulu.
  • Sticky aside menghormati scroll; pastikan tinggi konten tidak menjebak fokus.