DashboardsidebarToggle

boutonGitHub à
Un bouton pour basculer la barre latérale sur mobile.

Utilisation

Le composant DashboardSidebarToggle est utilisé par les composants DashboardNavbar et DashboardSidebar.

Il est automatiquement affiché sur mobile pour basculer la barre latérale, **vous n'avez pas à l'ajouter manuellement **.

<template>
  <UDashboardSidebarToggle />
</template>

Il étend le composant Button, de sorte que vous pouvez passer n'importe quelle propriété telle que color, variant, size, etc.

<template>
  <UDashboardSidebarToggle variant="subtle" />
</template>
Le bouton par défaut est color="neutral" et variant="ghost".

Exemples

Dans le slot toggle

Même si ce composant s'affiche automatiquement sur mobile, vous pouvez utiliser l'emplacement toggle des composants DashboardNavbar et [DashboardSidebarxph0444/docs/components/dashboard-sidebar) pour personnaliser le bouton.

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

    <slot />
  </UDashboardGroup>
</template>
Lors de l'utilisation de l'accessoire toggle-side des composants DashboardSidebar et DashboardNavbar, le bouton s'affiche sur le côté spécifié.

API

Props

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; }
Ce composant prend également en charge tous les attributs HTML natifs <button>.

Thème

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: ''
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

DashboardSidebarCollapse

A Button to collapse the sidebar on desktop.

DashboardToolbar

A toolbar to display under the navbar in a dashboard.