颜色模式选择

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

用法

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

<template>
  <UColorModeSelect />
</template>

示例

使用自定义图标

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

app.config.ts

export default defineAppConfig({
  ui: {
    icons: {
      system: 'i-ph-desktop',
      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

属性

属性	默认值	类型
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`字符串 \| 对象` 用于打开菜单的图标。
`color`	`'主要'`	`“primary”\|“secondary”\|“success”\|“info”\|“warning”\|“error”\|“neutral”`
`内容`	`{side:'bottom',sideOffset:8,collisionPadding:8,position:'popper'}`	`ComboboxContentProps &Partial<EmitsToProps<DismissableLayerEmits>>` 菜单的内容。
`尺寸`	`'md'`	`"md"\|"xs"\|"sm"\|"lg"\|"xl"`
`disabled`		`boolean` 当为 `true` 时，阻止用户与列表框交互
`variant`	`'outline'`	`"ghost"\|"outline"\|"soft"\|"subtle"\|"none"`
`selectedIcon`	`appConfig.ui.icons.check`	`字符串 \| 对象` 选中项时显示的图标。
`arrow`	`false`	`boolean\|ComboboxArrowProps` 在菜单旁边显示一个箭头。
`portal`	`true`	`string \| false \| true \| HTMLElement` 在 portal 中渲染菜单。
`ui`		{base?:ClassNameValue;leading?:ClassNameValue;leadingIcon?:ClassNameValue;leadingAvatar?:ClassNameValue;leadingAvatarSize?:ClassNameValue;trailing?:ClassNameValue;trailingIcon?:ClassNameValue;value?:ClassNameValue;placeholder?:ClassNameValue;arrow?:ClassNameValue;content?:ClassNameValue;viewport?:ClassNameValue;group?:ClassNameValue;empty?:ClassNameValue;label?:ClassNameValue;separator?:ClassNameValue;item?:ClassNameValue;itemLeadingIcon?:ClassNameValue;itemLeadingAvatar?:ClassNameValue;itemLeadingAvatarSize?:ClassNameValue;itemLeadingChip?:ClassNameValue;itemLeadingChipSize?:ClassNameValue;itemTrailing?:ClassNameValue;itemTrailingIcon?:ClassNameValue;itemLabel?:ClassNameValue;input?:ClassNameValue;focusScope?:ClassNameValue;}

更新日志

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

ColorModeImage

为浅色和深色模式提供不同源的图像元素。

ColorModeSwitch

切换浅色和深色模式的开关。