ColorModeSelect专业版

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

用法

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

字符串

用于打开菜单的图标。

disabled

布尔值

当为 true 时，阻止用户与列表框交互

color

'primary'

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

尺寸

'md'

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

内容

{ side: 'bottom', sideOffset: 8, collisionPadding: 8, position: 'popper' }

ComboboxContentProps & Partial<EmitsToProps<DismissableLayerEmits>>

菜单的内容。

variant

'outline'

"outline" | "soft" | "subtle" | "ghost" | "none"

portal

true

string | false | true | HTMLElement

在 portal 中渲染菜单。

arrow

false

boolean | ComboboxArrowProps

在菜单旁边显示一个箭头。

selectedIcon

appConfig.ui.icons.check

字符串

选中项时显示的图标。

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; }

ColorModeImage

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

ColorModeSwitch

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