ContentSearchButton의 경우

ContentSearch 모달을 여는 미리 스타일된 Button입니다.A pre-styled Button to open the ContentSearch modal.

이 구성 요소는 @nuxt/content 모듈이 설치된 경우에만 사용할 수 있습니다.

Usage

ContentSearchButton 구성 요소는 ContentSearch 모달을 여는 데 사용됩니다.

<template>
  <UContentSearchButton />
</template>

Button 구성 요소를 확장하므로 color, variant, size 등과 같은 속성을 전달할 수 있습니다.

<template>
  <UContentSearchButton variant="subtle" />
</template>

기본적으로 버튼은 축소되지 않은 경우 color="neutral" 및 variant="outline"로 설정되고 축소된 경우 variant="ghost"입니다.

Collapsed 종료

collapsed 소품을 사용하여 버튼의 레이블과 kbds를 표시합니다. 기본값은 true입니다.

collapsed

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

Kbds 파일

kbds 소품을 사용하여 단추에 키보드 키를 표시합니다. ContentSearch 구성 요소의 기본 바로 가기와 일치하도록 기본값은 ['meta', 'K']입니다.

collapsed

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

API

Props (### 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 속성도 지원합니다.

Slots

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.