DashboardZijbalk

Een aanpasbare en opvouwbare zijbalk om in een dashboard weer te geven.

Gebruik

De DashboardSidebar-component wordt gebruikt om een zijbalk in een dashboardindeling weer te geven. Het ondersteunt slepen om het formaat te wijzigen, staat persistentie en integreert met DashboardGroup, DashboardPanel en DashboardNavbar.

DashboardSidebar versus Sidebar: dit onderdeel is ontworpen voor dashboardlay-outs met slepen om het formaat te wijzigen, statuspersistentie en DashboardGroup-integratie. Gebruik in plaats daarvan Sidebar voor een eenvoudige, zelfstandige zijbalk (chatpaneel, instellingen, navigatie).

De status (grootte, samengevouwen, enz.) wordt opgeslagen op basis van de storage- en storage-key-rekwisieten die u aan de DashboardGroup -component levert.

Gebruik het in de standaardsleuf van de DashboardGroup component:

layouts/dashboard.vue

<template>
  <UDashboardGroup>
    <UDashboardSidebar />

    <slot />
  </UDashboardGroup>
</template>

Dit onderdeel heeft geen enkel root-element wanneer u de resizable-prop gebruikt, dus wikkel het in een container (bijv. <div class="flex flex-1">) als u paginaovergangen gebruikt of een enkele wortel voor lay-out.

Gebruik de header, default en footer slots om de zijbalk aan te passen en de body of content slots om het zijbalkmenu aan te passen.

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const items: NavigationMenuItem[][] = [[{
  label: 'Home',
  icon: 'i-lucide-house',
  active: true
}, {
  label: 'Inbox',
  icon: 'i-lucide-inbox',
  badge: '4'
}, {
  label: 'Contacts',
  icon: 'i-lucide-users'
}, {
  label: 'Settings',
  icon: 'i-lucide-settings',
  defaultOpen: true,
  children: [{
    label: 'General'
  }, {
    label: 'Members'
  }, {
    label: 'Notifications'
  }]
}], [{
  label: 'Feedback',
  icon: 'i-lucide-message-circle',
  to: 'https://github.com/nuxt-ui-templates/dashboard',
  target: '_blank'
}, {
  label: 'Help & Support',
  icon: 'i-lucide-info',
  to: 'https://github.com/nuxt/ui',
  target: '_blank'
}]]
</script>

<template>
  <UDashboardSidebar collapsible resizable :ui="{ footer: 'border-t border-default' }">
    <template #header="{ collapsed }">
      <Logo v-if="!collapsed" class="h-5 w-auto shrink-0" />
      <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
    </template>

    <template #default="{ collapsed }">
      <UButton
        :label="collapsed ? undefined : 'Search...'"
        icon="i-lucide-search"
        color="neutral"
        variant="outline"
        block
        :square="collapsed"
      >
        <template v-if="!collapsed" #trailing>
          <div class="flex items-center gap-0.5 ms-auto">
            <UKbd value="meta" variant="subtle" />
            <UKbd value="K" variant="subtle" />
          </div>
        </template>
      </UButton>

      <UNavigationMenu
        :collapsed="collapsed"
        :items="items[0]"
        orientation="vertical"
      />

      <UNavigationMenu
        :collapsed="collapsed"
        :items="items[1]"
        orientation="vertical"
        class="mt-auto"
      />
    </template>

    <template #footer="{ collapsed }">
      <UButton
        :avatar="{
          src: 'https://github.com/benjamincanac.png',
          loading: 'lazy' as const
        }"
        :label="collapsed ? undefined : 'Benjamin'"
        color="neutral"
        variant="ghost"
        class="w-full"
        :block="collapsed"
      />
    </template>
  </UDashboardSidebar>
</template>

Sleep de zijbalk naar de linkerrand van het scherm om deze samen te vouwen.

Aanpasbaar

Gebruik de resizable prop om de zijbalk aanpasbaar te maken.

resizable

<template>
  <UDashboardSidebar resizable>
    <Placeholder class="h-96" />
  </UDashboardSidebar>
</template>

Opvouwbaar

Gebruik de collapsible prop om de zijbalk inklapbaar te maken wanneer u naar de rand van het scherm sleept.

De DashboardSidebarCollapse heeft geen effect als de zijbalk niet collapsible is.

collapsible

<template>
  <UDashboardSidebar resizable collapsible>
    <Placeholder class="h-96" />
  </UDashboardSidebar>
</template>

U kunt toegang krijgen tot de collapsed-status in de sleufsteunen om de inhoud van de zijbalk aan te passen wanneer deze is samengevouwen.

Grootte

Gebruik de min-size, max-size, default-size en collapsed-size rekwisieten om de grootte van de zijbalk aan te passen.

minSize

defaultSize

maxSize

collapsedSize

<template>
  <UDashboardSidebar
    resizable
    collapsible
    :min-size="22"
    :default-size="35"
    :max-size="40"
    :collapsed-size="0"
  >
    <Placeholder class="h-96" />
  </UDashboardSidebar>
</template>

Maten worden standaard berekend als percentages. U kunt dit wijzigen met de unit prop op de DashboardGroup component.

De collapsed-size prop is standaard ingesteld op 0, maar de zijbalk heeft een min-w-16 om ervoor te zorgen dat deze zichtbaar is.

Zijde

Gebruik de side prop om de zijkant van de zijbalk te wijzigen. Standaard left.

side

<template>
  <UDashboardSidebar side="right" resizable collapsible>
    <Placeholder class="h-96" />
  </UDashboardSidebar>
</template>

Modus

Gebruik de mode prop om de modus van het zijbalkmenu te wijzigen. Standaard slideover.

Gebruik de body-sleuf om de menubalk (onder de kop) te vullen of de content-sleuf om het hele menu te vullen.

U kunt de menu prop gebruiken om het menu van de zijbalk aan te passen, deze zal zich aanpassen afhankelijk van de modus die u kiest.

mode

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

defineProps<{
  mode: 'drawer' | 'slideover' | 'modal'
}>()

const items: NavigationMenuItem[] = [{
  label: 'Home',
  icon: 'i-lucide-house',
  active: true
}, {
  label: 'Inbox',
  icon: 'i-lucide-inbox'
}, {
  label: 'Contacts',
  icon: 'i-lucide-users'
}]
</script>

<template>
  <UDashboardGroup>
    <UDashboardSidebar :mode="mode">
      <template #header="{ collapsed }">
        <Logo v-if="!collapsed" class="h-5 w-auto" />
        <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
      </template>

      <UNavigationMenu
        :items="items"
        orientation="vertical"
      />
    </UDashboardSidebar>

    <UDashboardPanel>
      <template #header>
        <UDashboardNavbar title="Dashboard" />
      </template>
    </UDashboardPanel>
  </UDashboardGroup>
</template>

Deze voorbeelden bevatten de DashboardGroup, DashboardPanel en DashboardNavbar componenten die nodig zijn om de zijbalk op mobiel te demonstreren.

Toggle

Gebruik de toggle-prop om de DashboardSidebarToggle component die op mobiel wordt weergegeven aan te passen.

U kunt elke eigenschap van de Button component doorgeven om deze aan te passen.

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const items: NavigationMenuItem[] = [{
  label: 'Home',
  icon: 'i-lucide-house',
  active: true
}, {
  label: 'Inbox',
  icon: 'i-lucide-inbox'
}, {
  label: 'Contacts',
  icon: 'i-lucide-users'
}]
</script>

<template>
  <UDashboardGroup>
    <UDashboardSidebar
      open
      :toggle="{
        color: 'primary',
        variant: 'subtle',
        class: 'rounded-full'
      }"
    >
      <template #header>
        <Logo class="h-5 w-auto" />
      </template>

      <UNavigationMenu
        :items="items"
        orientation="vertical"
      />
    </UDashboardSidebar>

    <UDashboardPanel>
      <template #header>
        <UDashboardNavbar title="Dashboard" />
      </template>
    </UDashboardPanel>
  </UDashboardGroup>
</template>

Zijde uitschakelen

Gebruik de toggle-side prop om de zijkant van de schakelknop te wijzigen. Standaard left.

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const items: NavigationMenuItem[] = [{
  label: 'Home',
  icon: 'i-lucide-house',
  active: true
}, {
  label: 'Inbox',
  icon: 'i-lucide-inbox'
}, {
  label: 'Contacts',
  icon: 'i-lucide-users'
}]
</script>

<template>
  <UDashboardGroup>
    <UDashboardSidebar
      open
      toggle-side="right"
    >
      <template #header>
        <Logo class="h-5 w-auto" />
      </template>

      <UNavigationMenu
        :items="items"
        orientation="vertical"
      />
    </UDashboardSidebar>

    <UDashboardPanel>
      <template #header>
        <UDashboardNavbar title="Dashboard" />
      </template>
    </UDashboardPanel>
  </UDashboardGroup>
</template>

Voorbeelden

Control open staat

U kunt de open status regelen met behulp van de open prop of de v-model:open richtlijn.

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const items: NavigationMenuItem[] = [{
  label: 'Home',
  icon: 'i-lucide-house',
  active: true
}, {
  label: 'Inbox',
  icon: 'i-lucide-inbox'
}, {
  label: 'Contacts',
  icon: 'i-lucide-users'
}]

const open = ref(true)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UDashboardSidebar v-model:open="open">
    <template #header="{ collapsed }">
      <Logo v-if="!collapsed" class="h-5 w-auto" />
      <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
    </template>

    <UNavigationMenu
      :items="items"
      orientation="vertical"
    />
  </UDashboardSidebar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'

const items: NavigationMenuItem[] = [{
  label: 'Home',
  icon: 'i-lucide-house',
  active: true
}, {
  label: 'Inbox',
  icon: 'i-lucide-inbox'
}, {
  label: 'Contacts',
  icon: 'i-lucide-users'
}]

const open = ref(true)

defineShortcuts({
  o: () => open.value = !open.value
})
</script>

<template>
  <UDashboardSidebar v-model:open="open">
    <template #header="{ collapsed }">
      <Logo v-if="!collapsed" class="h-5 w-auto" />
      <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
    </template>

    <UNavigationMenu
      :items="items"
      orientation="vertical"
    />
  </UDashboardSidebar>
</template>

In dit voorbeeld kunt u, gebruikmakend van defineShortcuts, de open status van de DashboardSidebar omschakelen door op: kbd{value="O"} te drukken.

Control samengevouwen staat

U kunt de samengevouwen status regelen met behulp van de collapsed prop of de v-model:collapsed-richtlijn.

<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const items: NavigationMenuItem[] = [{
  label: 'Home',
  icon: 'i-lucide-house',
  active: true
}, {
  label: 'Inbox',
  icon: 'i-lucide-inbox'
}, {
  label: 'Contacts',
  icon: 'i-lucide-users'
}]

const collapsed = ref(false)

defineShortcuts({
  c: () => collapsed.value = !collapsed.value
})
</script>

<template>
  <UDashboardSidebar v-model:collapsed="collapsed" collapsible>
    <template #header>
      <Logo v-if="!collapsed" class="h-5 w-auto" />
      <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
    </template>

    <UNavigationMenu
      :collapsed="collapsed"
      :items="items"
      orientation="vertical"
    />
  </UDashboardSidebar>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { NavigationMenuItem } from '@nuxt/ui'

const items: NavigationMenuItem[] = [{
  label: 'Home',
  icon: 'i-lucide-house',
  active: true
}, {
  label: 'Inbox',
  icon: 'i-lucide-inbox'
}, {
  label: 'Contacts',
  icon: 'i-lucide-users'
}]

const collapsed = ref(false)

defineShortcuts({
  c: () => collapsed.value = !collapsed.value
})
</script>

<template>
  <UDashboardSidebar v-model:collapsed="collapsed" collapsible>
    <template #header>
      <Logo v-if="!collapsed" class="h-5 w-auto" />
      <UIcon v-else name="i-simple-icons-nuxtdotjs" class="size-5 text-primary mx-auto" />
    </template>

    <UNavigationMenu
      :collapsed="collapsed"
      :items="items"
      orientation="vertical"
    />
  </UDashboardSidebar>
</template>

In dit voorbeeld kunt u, gebruikmakend van defineShortcuts, de samengevouwen status van de DashboardSidebar omschakelen door op: kbd{value="C"} te drukken.

API

Props

Prop	Default	Type
`mode`	`'slideover'`	`T` The mode of the sidebar menu.
`menu`		`DashboardSidebarMenu<T>` The props for the sidebar menu component.
`toggle`	`true`	`boolean \| Omit<ButtonProps, LinkPropsKeys>` Customize the toggle button to open the sidebar. `{ color: 'neutral', variant: 'ghost' }`
`toggleSide`	`'left'`	`"left" \| "right"` The side to render the toggle button on.
`autoClose`	`true`	`boolean` Automatically close when route changes.
`id`	`useId()`	`string` The id of the panel.
`side`	`'left'`	`"left" \| "right"` The side to render the panel on.
`minSize`	`10`	`number` The minimum size of the panel.
`maxSize`	`20`	`number` The maximum size of the panel.
`defaultSize`	`15`	`number` The default size of the panel.
`resizable`	`false`	`boolean` Whether to allow the user to resize the panel.
`collapsible`	`false`	`boolean` Whether to allow the user to collapse the panel.
`collapsedSize`	`0`	`number` The size of the panel when collapsed.
`open`	`false`	`boolean`
`collapsed`	`false`	`boolean`
`ui`		`{ root?: SlotClass; header?: SlotClass; body?: SlotClass; footer?: SlotClass; toggle?: SlotClass; handle?: SlotClass; content?: SlotClass; overlay?: SlotClass; }`

Slots

Slot	Type
`header`	`{ collapsed: boolean; collapse: (value: boolean) => void; }`
`default`	`{ collapsed: boolean; collapse: (value: boolean) => void; }`
`footer`	`{ collapsed: boolean; collapse: (value: boolean) => void; }`
`toggle`	`{ open: boolean; toggle: () => void; ui: object; }`
`content`	`{ close?: (() => void) \| undefined; }`
`resize-handle`	`{ onMouseDown: (e: MouseEvent) => void; onTouchStart: (e: TouchEvent) => void; onDoubleClick: (e: MouseEvent) => void; ui: object; }`

Thema

app.config.ts

export default defineAppConfig({
  ui: {
    dashboardSidebar: {
      slots: {
        root: 'relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0',
        header: 'h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4',
        body: 'flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2',
        footer: 'shrink-0 flex items-center gap-1.5 px-4 py-2',
        toggle: '',
        handle: '',
        content: 'lg:hidden',
        overlay: 'lg:hidden'
      },
      variants: {
        menu: {
          true: {
            header: 'sm:px-6',
            body: 'sm:px-6',
            footer: 'sm:px-6'
          }
        },
        side: {
          left: {
            root: 'border-e border-default'
          },
          right: {
            root: ''
          }
        },
        toggleSide: {
          left: {
            toggle: ''
          },
          right: {
            toggle: 'ms-auto'
          }
        }
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        dashboardSidebar: {
          slots: {
            root: 'relative hidden lg:flex flex-col min-h-svh min-w-16 w-(--width) shrink-0',
            header: 'h-(--ui-header-height) shrink-0 flex items-center gap-1.5 px-4',
            body: 'flex flex-col gap-4 flex-1 overflow-y-auto px-4 py-2',
            footer: 'shrink-0 flex items-center gap-1.5 px-4 py-2',
            toggle: '',
            handle: '',
            content: 'lg:hidden',
            overlay: 'lg:hidden'
          },
          variants: {
            menu: {
              true: {
                header: 'sm:px-6',
                body: 'sm:px-6',
                footer: 'sm:px-6'
              }
            },
            side: {
              left: {
                root: 'border-e border-default'
              },
              right: {
                root: ''
              }
            },
            toggleSide: {
              left: {
                toggle: ''
              },
              right: {
                toggle: 'ms-auto'
              }
            }
          }
        }
      }
    })
  ]
})

Wijzigingsgelog

No recent changes

DashboardSearchButton

A pre-styled Button to open the DashboardSearch modal.

DashboardSidebarCollapse

A Button to collapse the sidebar on desktop.