DashboardSidebarToggle

Penggunaan

<SDashboardNavbar title="Overview">
  <template #leading>
    <SDashboardSidebarToggle />
  </template>
</SDashboardNavbar>

Tidak ada yang merendernya untuk Anda - letakkan di slot leading milik DashboardNavbar (kasus umum, ditunjukkan di atas), atau di mana pun dalam DashboardGroup yang sama yang masuk akal untuk layout tertentu - di dalam header milik DashboardSidebar sendiri alih-alih navbar, misalnya, atau toolbar kustom.

Tidak merender apa pun sampai ada DashboardSidebar sibling yang aktual dalam DashboardGroup yang sama untuk dikontrol.

Menggantikan tombol sepenuhnya

Slot default menyerahkan trigger yang sepenuhnya kustom fungsi toggle dan state isCollapsed yang sama dengan yang digunakan Button bawaan secara internal, alih-alih hanya menukar props padanya:

<SDashboardSidebarToggle v-slot="{ toggle, isCollapsed, attrs }">
  <button v-bind="attrs" type="button" @click="toggle">
    {{ isCollapsed ? 'Show' : 'Hide' }} sidebar
  </button>
</SDashboardSidebarToggle>

Mengkustomisasi ikon atau tombol

Pembungkus tipis di sekitar Button - icon menukar glyph, dan apa pun yang diterima Button (color, variant, size, ui, ...) diteruskan langsung:

<SDashboardSidebarToggle icon="lucide:menu" color="primary" variant="soft" />

Ikon default (hugeicons:sidebar-left-01) mencerminkan horizontal setelah sidebar collapse, alih-alih bertukar ke ikon kedua - icon kustom mendapat perlakuan yang sama, jadi pilih yang tetap terbaca benar saat dibalik.

Props

Slots