颜色模式开关

一个用于在浅色和深色模式之间切换的开关。

用法

ColorModeSwitch 组件扩展了 Switch 组件，因此您可以传递任何属性，例如 color、size 等。

<template>
  <UColorModeSwitch />
</template>

示例

使用自定义图标

使用 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'
        }
      }
    })
  ]
})

API

属性

属性	默认值	类型
`as`	`'div'`	`any` 此组件应渲染为的元素或组件。
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`name`		`string` 字段的名称。作为名称/值对的一部分随其所属表单提交。
`loading`		`boolean` 当为 `true` 时，将显示加载图标。
`尺寸`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`autofocus`		`false \| true \| "true" \| "false"`
`disabled`		`boolean` 当为 `true` 时，阻止用户与开关交互。
`label`		`string`
`loadingIcon`	`appConfig.ui.icons.loading`	`any` 当 `loading` prop 为 `true` 时显示的图标。
`defaultValue`		`boolean` 开关在初次渲染时的状态。当您不需要控制其状态时使用。
`required`		`boolean` 当为 `true` 时，表示用户必须在提交所属表单之前设置值。
`id`		`string`
`value`		`string` 当与 `name` 一起提交时，作为数据给定的值。
`description`		`string`
`ui`		`{ root?: ClassNameValue; base?: ClassNameValue; container?: ClassNameValue; thumb?: ClassNameValue; icon?: ClassNameValue; wrapper?: ClassNameValue; label?: ClassNameValue; description?: ClassNameValue; }`

更新日志

5b177— feat: 扩展原生 HTML 属性 (#5348)

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

ColorModeSelect

一个用于在系统、深色和浅色模式之间切换的选择器。

LocaleSelect

一个用于在不同语言环境之间切换的选择器。