ContentSearchButton

ボタンサイトマップ
ContentSearchモーダルを開くためのスタイル設定済みボタン。
このコンポーネントは@nuxt/contentモジュールがインストールされている場合にのみ使用できます。

使用法

ContentSearchButtonコンポーネントは、 ContentSearchモーダルを開くために使用されます。

<template>
  <UContentSearchButton />
</template>

Buttonコンポーネントを拡張するため、color、variant、sizeなどの任意のプロパティを渡すことができます。

<template>
  <UContentSearchButton variant="subtle" />
</template>
ボタンのデフォルト値は、折りたたまれていない場合はcolor="neutral"とvariant="outline"、折りたたまれている場合はvariant="ghost"です。

Collapsed

collapsedプロパティを使用してボタンのラベルとkbdsを表示します。デフォルトはtrueです。

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

Kbds

ボタンにキーボードキーを表示するには、kbdsプロパティを使用します。ContentSearchコンポーネントのデフォルトショートカットに一致するように、デフォルトで['meta', 'K']になります。

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

API

Props

Prop Default Type
as
'button'
any

The element or component this component should render as when not a link.

icon
appConfig.ui.icons.search
any

The icon displayed in the button. Set to false to hide the icon.

label
t('contentSearchButton.label')
string

The label displayed in the button.

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

The color of the button.

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

The variant of the button. Defaults to 'outline' when not collapsed, 'ghost' when collapsed.

collapsed
true
boolean

Whether the button is collapsed.

tooltip
false
boolean | TooltipProps

Display a tooltip on the button when is collapsed with the button label. This has priority over the global tooltip prop.

kbds
["meta", "k"]
(string | undefined)[] | KbdProps[]

The keyboard keys to display in the button. { variant: 'subtle' }

autofocus
false | true | "true" | "false"
disabled
boolean
name
string
type
'button'
"reset" | "submit" | "button"

The type of the button when not a link.

activeColor
"error" | "neutral" | "primary" | "secondary" | "success" | "info" | "warning"
activeVariant
"solid" | "outline" | "soft" | "subtle" | "ghost" | "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

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?: SlotClass; label?: SlotClass; trailing?: SlotClass; } & { base?: SlotClass; label?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailingIcon?: SlotClass; }
このコンポーネントはすべてのネイティブ<button> HTML属性もサポートします。

スロット

Slot Type
leading
{ 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; }; }
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; }; }
trailing
{ 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; }; }

Theme

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

Changelog

No recent changes

ContentSearch

A ready-to-use CommandPalette to add to your documentation.

ContentSurround

A pair of prev and next links to navigate between pages.