DashboardSidebar

Penggunaan

<SDashboardSidebar :default-size="260" :min-size="200" :max-size="400">
  <template #header="{ isCollapsed }">
    {{ isCollapsed ? 'A' : 'Acme Inc' }}
  </template>
  <template #default="{ isCollapsed }">
    <nav>
      <a href="/">
        <Icon name="..." />
        <span v-if="!isCollapsed">Dashboard</span>
      </a>
    </nav>
  </template>
  <template #footer>...</template>
</SDashboardSidebar>

Harus menjadi child langsung dari DashboardGroup - lihat halamannya sendiri untuk perilaku resize/collapse/persistence/mobile-drawer, semuanya dibagi lintas seluruh shell alih-alih dimiliki sidebar saja. header/default/footer mencerminkan bentuk slot milik PageAside - konten default scroll (via ScrollArea) independen dari header/footer yang tetap.

Di desktop, SplitterPanel bertema (collapsible, minSize/maxSize/defaultSize diteruskan langsung); di bawah mobileBreakpoint, konten yang sama dirender di dalam Drawer. Ukuran dalam piksel secara default (sizeUnit="px") alih-alih default persentase milik SplitterPanel sendiri - lebar sidebar terbaca lebih alami dalam piksel daripada sebagai fraksi lebar halaman.

Mengontrol collapse dari luar

Bind v-model:collapsed untuk mengatur state rail desktop dan menerima update dari resizing atau DashboardSidebarToggle. Nilai eksplisit lebih diutamakan daripada state collapse yang tersimpan. Hilangkan untuk menjaga sizing dan persistensi yang ada tanpa kontrol.

<SDashboardSidebar v-model:collapsed="collapsed" />

Ref komponen juga mengekspos collapse(), expand(), toggle(), dan isCollapsed. collapse() dan expand() beroperasi pada panel desktop dan memulihkan lebar expanded sebelumnya. Mereka tidak melakukan apa pun di mobile atau ketika collapsible adalah false. toggle() mempertahankan perilaku drawer mobile yang normal. Model collapsed tidak mengontrol drawer mobile; nilainya diterapkan saat kembali ke desktop. Gunakan model untuk menangkap pilihan pengguna saat ini sebelum collapse sementara untuk sebuah halaman, lalu pulihkan pilihan itu saat pergi.

Custom :ui

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

Props

Slots

isCollapsed selalu false di mobile, yang tidak memiliki state antara - hanya drawer terbuka atau tertutup. Gunakan untuk menukar logo header ke mark yang lebih sempit, atau menyembunyikan teks label item nav, setelah sidebar collapse ke icon rail - contoh live di atas melakukan keduanya, sekaligus menyembunyikan nama footer di samping avatar.

Events