ColorModeButton 이미지

밝은 모드와 어두운 모드 사이를 전환하는 버튼입니다.

Usage

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

<template>
  <UColorModeButton />
</template>

기본적으로 버튼은 color="neutral" 및 variant="ghost"입니다.

examples 예제

사용자 정의 아이콘 포함

app.config.ts를 사용하여 ui.icons 속성을 사용하여 아이콘을 사용자 정의합니다.

app/app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      light: 'i-lucide-sun-medium',
      dark: 'i-lucide-moon-star'
    }
  }
})

vite.config.ts를 사용하여 ui.icons 속성을 사용하여 아이콘을 사용자 정의합니다.

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: {
        icons: {
          light: 'i-lucide-sun-medium',
          dark: 'i-lucide-moon-star'
        }
      }
    })
  ]
})

API

Props (### Props)

Prop	Default	Type
`as`	`'button'`	`any` The element or component this component should render as when not a link.
`color`	`'neutral'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'ghost'`	`"link" \| "ghost" \| "solid" \| "outline" \| "soft" \| "subtle"`
`trailingIcon`		`any` Display an icon on the right side.
`name`		`string`
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`avatar`		`AvatarProps` Display an avatar on the left side.
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean`
`type`	`'button'`	`"reset" \| "submit" \| "button"` The type of the button when not a link.
`label`		`string`
`activeColor`		`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`activeVariant`		`"link" \| "ghost" \| "solid" \| "outline" \| "soft" \| "subtle"`
`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
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`ui`		`{ base?: SlotClass; label?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailingIcon?: SlotClass; }`

이 구성 요소는 모든 기본 <button> HTML 속성도 지원합니다.

변경 로그

No recent changes

ColorModeAvatar

An Avatar with a different source for light and dark mode.

ColorModeImage

An image element with a different source for light and dark mode.