颜色模式选择

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

用法

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

属性

属性	默认值	类型
`defaultOpen`		`boolean` 组合框初次渲染时的打开状态。当您不需要控制其打开状态时使用。
`open`		`boolean` 组合框的受控打开状态。可以通过 `v-model:open` 绑定。
`trailingIcon`	`appConfig.ui.icons.chevronDown`	`any` 用于打开菜单的图标。
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`高亮`		`boolean` 高亮环形颜色，如同焦点状态。
`name`		`string` 字段的名称。作为名称/值对的一部分随其所属表单提交。
`尾部`		`boolean` 当为 `true` 时，图标将显示在右侧。
`内容`	`{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }`	`ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>` 菜单的内容。
`loading`		`boolean` 当为 `true` 时，将显示加载图标。
`尺寸`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`avatar`		`AvatarProps` 在左侧显示头像。
`variant`	`'outline'`	`"ghost" \| "outline" \| "soft" \| "subtle" \| "none"`
`autofocus`		`boolean`
`disabled`		`boolean` 当为 `true` 时，阻止用户与列表框交互
`前置`		`boolean` 当为 `true` 时，图标将显示在左侧。
`leadingIcon`		`any` 在左侧显示图标。
`loadingIcon`	`appConfig.ui.icons.loading`	`any` 当 `loading` prop 为 `true` 时显示的图标。
`resetSearchTermOnBlur`	`true`	`boolean` 当组合框输入失去焦点时是否重置搜索词
`resetSearchTermOnSelect`	`true`	`boolean` 当组合框值被选中时是否重置搜索词
`highlightOnHover`		`boolean` 当 `true` 时，鼠标悬停在项目上会触发高亮显示。
`defaultValue`		null \| string \| number \| bigint \| false \| true \| { [key: string]: any; label?: string \| undefined; description?: string \| undefined; icon?: any; avatar?: AvatarProps \| undefined; chip?: ChipProps \| undefined; type?: "item" \| "label" \| "separator" \| undefined; disabled?: boolean \| undefined; onSelect?: ((e: Event) => void) \| undefined; class?: any; ui?: Pick<{ 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; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; }, "item" \| "label" \| "separator" \| "itemLeadingIcon" \| "itemLeadingAvatar" \| "itemLeadingAvatarSize" \| "itemLeadingChip" \| "itemLeadingChipSize" \| "itemTrailing" \| "itemTrailingIcon" \| "itemWrapper" \| "itemLabel" \| "itemDescription"> \| undefined; } SelectMenu 初始渲染时的值。当您不需要控制 SelectMenu 的状态时使用。
`multiple`		`false` 是否可以选择多个选项。
`required`		`boolean`
`id`		`string`
`placeholder`		`string` 选择框为空时的占位符文本。
`searchInput`	`false`	`boolean \| InputProps<AcceptableValue>` 是否显示搜索输入框。可以是一个对象，用于向输入框传递附加属性。`{ placeholder: '搜索...', variant: 'none' }`
`selectedIcon`	`appConfig.ui.icons.check`	`any` 选中项时显示的图标。
`arrow`	`false`	`boolean \| ComboboxArrowProps` 在菜单旁边显示一个箭头。
`portal`	`true`	`string \| false \| true \| HTMLElement` 在 portal 中渲染菜单。
`virtualize`	`false`	`boolean \| { overscan?: number ; estimateSize?: number \| undefined; } \| undefined` 为大型列表启用虚拟化。注意：启用后，由于 Reka UI 的限制 (https://github.com/unovue/reka-ui/issues/1885).
`valueKey`	`undefined`	`undefined` 当 `items` 是一个对象数组时，选择要用作值的字段而不是对象本身。
`labelKey`	`'label'`	`string \| number` 当 `items` 是对象数组时，选择用作标签的字段。
`描述键`	`'description'`	`string \| number` 当 `items` 是一个对象数组时，选择要用作描述的字段。
`createItem`	`false`	`boolean \| "always" \| { position?: "top" \| "bottom" ; when?: "empty" \| "always" \| undefined; } \| undefined` 确定是否可以添加选项中不存在的自定义用户输入。
`filterFields`	`[labelKey]`	`string[]` 用于过滤项目的字段。
`ignoreFilter`	`false`	`boolean` 当 `true` 时，禁用默认过滤器，这对于自定义过滤（useAsyncData, useFetch 等）很有用。
`autofocusDelay`		`number`
`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; itemWrapper?: ClassNameValue; itemLabel?: ClassNameValue; itemDescription?: ClassNameValue; input?: ClassNameValue; focusScope?: ClassNameValue; }

更新日志

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

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

ColorModeImage

一个在亮模式和暗模式下具有不同源的图像元素。

ColorModeSwitch

一个用于在亮模式和暗模式之间切换的开关。