DashboardSearchButtonPRO

ButtonGitHub
一个预设样式的按钮，用于打开仪表盘搜索模态框。

用法

DashboardSearchButton 组件用于打开DashboardSearch 模态框。

<template>
  <UDashboardSearchButton />
</template>

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

<template>
  <UDashboardSearchButton variant="subtle" />
</template>
未折叠时，按钮默认为color="neutral"和variant="outline"；折叠时，默认为variant="ghost"。

折叠

使用collapsed属性隐藏按钮的标签和键盘快捷键。默认为false。

<template>
  <UDashboardSearchButton collapsed />
</template>
在 DashboardSidebar 组件中使用按钮时，直接使用collapsed插槽属性。

键盘快捷键

使用kbds属性在按钮中显示键盘按键。默认为['meta', 'K']以匹配DashboardSearch 组件的默认快捷方式。

<template>
  <UDashboardSearchButton :kbds="['alt', 'O']" />
</template>

API

属性

属性默认值类型
图标

appConfig.ui.icons.search

string

按钮中显示的图标。

label

t('dashboardSearchButton.label')

string

按钮中显示的标签。

color

'neutral'

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

按钮的颜色。

variant

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

按钮的变体。未折叠时默认为“outline”，折叠时默认为“ghost”。

尺寸

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

折叠

false

boolean

按钮是否折叠。

tooltip

false

boolean | TooltipProps

当按钮折叠时，显示带有按钮标签的工具提示。这优先于全局tooltip属性。

键盘快捷键

["meta", "k"]

(string | undefined)[] | KbdProps[]

按钮中显示的键盘按键。{ variant: 'subtle' }

ui

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

插槽

插槽类型
前置

{}

默认

{}

尾部

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardSearchButton: {
      slots: {
        base: '',
        trailing: 'hidden lg:flex items-center gap-0.5 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({
      uiPro: {
        dashboardSearchButton: {
          slots: {
            base: '',
            trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
          }
        }
      }
    })
  ]
})
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: {
        dashboardSearchButton: {
          slots: {
            base: '',
            trailing: 'hidden lg:flex items-center gap-0.5 ms-auto'
          }
        }
      }
    })
  ]
})

DashboardSearch

一个随时可用于仪表板的CommandPalette组件。

DashboardSidebar

一个可调整大小和可折叠的侧边栏，用于在仪表板中显示。