DashboardGroup

Penggunaan

<SDashboardGroup>
  <SDashboardSidebar>
    <template #header>Acme Inc</template>
    <nav>...</nav>
  </SDashboardSidebar>
  <SDashboardResizeHandle />
  <SDashboardPanel>
    <SDashboardNavbar title="Overview" />
    <main>...</main>
  </SDashboardPanel>
</SDashboardGroup>

SDashboardGroup mengoordinasikan seluruh shell - letakkan DashboardSidebar, DashboardResizeHandle, dan DashboardPanel di dalamnya secara langsung (tidak dibungkus apa pun - ia perlu melihat ketiganya sebagai children-nya sendiri). Ia pembungkus bertema di sekitar Splitter - SDashboardSidebar/SDashboardPanel membungkus SSplitterPanel dengan cara yang sama, sehingga perilaku resize/collapse/remember-the-width semuanya berasal dari primitif general-purpose yang sama, bukan logika khusus shell dasbor.

Persistensi

Lebar sidebar (dan apakah ia di-collapse) diingat lintas reload via cookie, dikunci oleh autoSaveId - beri halaman yang tidak seharusnya berbagi satu layout yang diingat id berbeda masing-masing. Cookie alih-alih penyimpanan default localStorage milik Reka - dapat dibaca server same-origin, portabel lintas reload halaman penuh alih-alih hanya navigasi sisi-klien, dan berfungsi dengan perkakas privasi yang memblokir localStorage tetapi mengizinkan cookie first-party.

Sidebar yang di-render server menggunakan default piksel yang dikonfigurasi, menjaga panel utama tetap terlihat sebelum hydration. Lebar yang diingat dan state collapse berlaku setelah mounting: splitter memulihkannya ketika panel-panelnya terdaftar dan container dapat diukur. Pengunjung yang kembali pertama melihat lebar default, lalu layout yang tersimpan.

Mobile

Di bawah mobileBreakpoint (768px secara default), tidak ada panel resizable sama sekali - SDashboardSidebar beralih merender kontennya di dalam overlay Drawer, dan SDashboardResizeHandle tidak merender apa pun (tidak ada yang bisa di-drag setelah sidebar bukan bagian dari layout split). Coba resize jendela browser halaman ini sendiri lebih sempit dari ponsel untuk melihatnya beralih live.

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default saat ini untuk setiap slot - berikut adalah file tema DashboardGroup itu sendiri:

Props