仪表板侧边栏切换

按钮GitHub
在移动的上切换侧边栏的按钮。

用法

DashboardSidebarToggle组件由DashboardNavbar和DashboardSidebar组件使用。

它是自动显示在移动的切换侧边栏，你不必手动添加。

<template>
  <UDashboardSidebarToggle />
</template>

它扩展了Button组件，因此您可以传递任何属性，如color，variant，size等。

<template>
  <UDashboardSidebarToggle variant="subtle" />
</template>
按钮默认为color="neutral"和variant="ghost"。

示例

toggle插槽内

即使此组件自动显示在移动的上，您也可以使用仪表板Navbar和仪表板Sidebar组件的toggle插槽来自定义按钮。

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

    <slot />
  </UDashboardGroup>
</template>
当使用DashboardSidebar和DashboardNavbar组件的toggle-side道具时，按钮将显示在指定的一侧。

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; }
此组件还支持所有原生<button> HTML属性。

Theme

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.