ColorModeButton专业版

按钮GitHub
一个用于在浅色和深色模式之间切换的按钮。

用法

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

<template>
  <UColorModeButton />
</template>
按钮默认为 color="neutral" 和 variant="ghost"。

示例

使用自定义图标

使用 app.config.ts 通过 ui.icons 属性自定义图标。

app.config.ts
export default defineAppConfig({
  ui: {
    icons: {
      light: 'i-ph-sun',
      dark: 'i-ph-moon'
    }
  }
})

使用 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-ph-sun',
          dark: 'i-ph-moon'
        }
      }
    })
  ]
})

带备用插槽

由于按钮封装在ClientOnly组件中，您可以通过传入 fallback 插槽来在组件加载时显示一个占位符。

<template>
  <UColorModeButton>
    <template #fallback>
      <UButton loading variant="ghost" color="neutral" />
    </template>
  </UColorModeButton>
</template>

API

属性

属性默认值类型
as

'button'

任意

此组件在不是链接时应呈现的元素或组件。

color

'neutral'

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

variant

'ghost'

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

disabled

boolean

尺寸

'md'

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

ui

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

插槽

插槽类型
fallback

{}

颜色模式头像

一个在浅色和深色模式下具有不同源的头像。

颜色模式图片

一个在浅色和深色模式下具有不同源的图片元素。