内容搜索按钮

ButtonGitHub
一个预设样式的按钮，用于打开内容搜索模态框。
此组件仅在安装了 @nuxt/content 模块时可用。

用法

ContentSearchButton 组件用于打开 ContentSearch 模态框。

<template>
  <UContentSearchButton />
</template>

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

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

折叠

使用 collapsed 属性显示按钮的标签和键盘按键。默认为 true。

<template>
  <UContentSearchButton :collapsed="false" />
</template>

键盘按键

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

<template>
  <UContentSearchButton :collapsed="false" :kbds="['alt', 'O']" />
</template>

API

属性

属性默认值类型
图标

appConfig.ui.icons.search

字符串 | 对象

按钮中显示的图标。

label

t('contentSearchButton.label')

string

按钮中显示的标签。

color

'neutral'

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

按钮的颜色。

variant

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

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

尺寸

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

collapsed

true

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; }

插槽

插槽类型
前置
default
尾部

{ ui: { base: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; leadingIcon: (props?: Record<string, any> | undefined) => string; leadingAvatar: (props?: Record<string, any> | undefined) => string; leadingAvatarSize: (props?: Record<string, any> | undefined) => string; trailingIcon: (props?: Record<string, any> | undefined) => string; }; }

主题

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

更新日志

63c0a— feat: 在使用的 slot prop 中暴露 ui (#5207)

3173b— fix: proxySlots 响应性 (#4969)

61b60— 功能：允许传递组件而不是名称 (#4766)

5cb65— 特性：导入 @nuxt/ui-pro 组件

ContentSearch

一个即用型命令面板，可添加到您的文档中。

ContentSurround

一对用于在页面之间导航的上一个和下一个链接。