DashboardSidebarToggle

Een knop om de zijbalk op mobiel te wisselen.

Gebruik

De DashboardSidebarToggle component wordt gebruikt door de DashboardNavbar en DashboardSidebar componenten.

Het wordt automatisch weergegeven op mobiel om de zijbalk te wisselen, je hoeft het niet handmatig toe te voegen.

<template>
  <UDashboardSidebarToggle />
</template>

Het breidt de Button component uit, zodat u elke eigenschap zoals color, variant, size, enz. Kunt doorgeven.

<template>
  <UDashboardSidebarToggle variant="subtle" />
</template>

De knop is standaard ingesteld op color="neutral" en variant="ghost".

Voorbeelden

Binnen `toggle` slot

Hoewel dit onderdeel automatisch op mobiel wordt weergegeven, kunt u de toggle-sleuf van de DashboardNavbar en DashboardSidebar componenten gebruiken om de knop aan te passen.

<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <template #toggle>
        <UDashboardSidebarToggle variant="subtle" />
      </template>
    </UDashboardSidebar>

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

<script setup lang="ts">
definePageMeta({
  layout: 'dashboard'
})
</script>

<template>
  <UDashboardPanel>
    <template #header>
      <UDashboardNavbar title="Home">
        <template #toggle>
          <UDashboardSidebarToggle variant="subtle" />
        </template>
      </UDashboardNavbar>
    </template>
  </UDashboardPanel>
</template>

Bij gebruik van de toggle-side prop van de DashboardSidebar en DashboardNavbar componenten wordt de knop aan de opgegeven zijde weergegeven.

API

Rekwisieten

Prop	Default	Type
`as`	`'button'`	`any` The element or component this component should render as when not a link.
`color`	`'neutral'`	`"error" \| "neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning"`
`variant`	`'ghost'`	`"ghost" \| "solid" \| "outline" \| "soft" \| "subtle" \| "link"`
`side`	`'left'`	`"left" \| "right"` The side of the sidebar to toggle.
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean`
`name`		`string`
`type`	`'button'`	`"reset" \| "submit" \| "button"` The type of the button when not a link.
`label`		`string`
`activeColor`		`"error" \| "neutral" \| "primary" \| "secondary" \| "success" \| "info" \| "warning"`
`activeVariant`		`"ghost" \| "solid" \| "outline" \| "soft" \| "subtle" \| "link"`
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`square`		`boolean` Render the button with equal padding on all sides.
`block`		`boolean` Render the button full width.
`loadingAuto`		`boolean` Set loading state automatically based on the `@click` promise state
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`avatar`		`AvatarProps` Display an avatar on the left side.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`trailingIcon`		`any` Display an icon on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`ui`		`{ base?: any; }`

Dit onderdeel ondersteunt ook alle native <button> HTML-kenmerken.

Thema

app.config.ts

export default defineAppConfig({
  ui: {
    dashboardSidebarToggle: {
      base: 'lg:hidden',
      variants: {
        side: {
          left: '',
          right: ''
        }
      }
    }
  }
})

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: {
        dashboardSidebarToggle: {
          base: 'lg:hidden',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})

Wijzigingsgelog

No recent changes

DashboardSidebarCollapse

A Button to collapse the sidebar on desktop.

DashboardToolbar

A toolbar to display under the navbar in a dashboard.