DashboardSidebarTogglePRO

ButtonGitHub
自定义用于打开侧边栏的切换按钮。 { color: 'neutral', variant: 'ghost' }

用法

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

它在移动设备上会自动显示以切换侧边栏，**您无需手动添加**。

<template>
  <UDashboardSidebarToggle />
</template>

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

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

示例

在 toggle 插槽中

尽管此组件在移动设备上会自动显示，但您可以使用 DashboardNavbar 和 DashboardSidebar 组件的 toggle 插槽来自定义该按钮。

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

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

API

属性

属性默认值类型
as

'button'

任意

此组件在不是链接时应呈现的元素或组件。

side

'left'

"right" | "left"

color

'neutral'

"error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral"

variant

'ghost'

"link" | "solid" | "outline" | "soft" | "subtle" | "ghost"

disabled

布尔值

尺寸

'md'

"md" | "xs" | "sm" | "lg" | "xl"

ui

{ base?: ClassNameValue; label?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailingIcon?: ClassNameValue; }

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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({
      uiPro: {
        dashboardSidebarToggle: {
          base: 'lg:hidden',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        dashboardSidebarToggle: {
          base: 'lg:hidden',
          variants: {
            side: {
              left: '',
              right: ''
            }
          }
        }
      }
    })
  ]
})

DashboardSidebarCollapse

一个在桌面端折叠侧边栏的按钮。

DashboardToolbar

一个在仪表盘中导航栏下方显示的工具栏。