CheckboxGroup

CheckboxGroupGitHub
一组复选框按钮，用于从列表中选择多个选项。

用法

使用 v-model 指令来控制 CheckboxGroup 的值，或者使用 default-value prop 来设置不需要控制其状态时的初始值。

Items

使用 items prop，其值为字符串或数字数组

<script setup lang="ts">
import type { CheckboxGroupItem, CheckboxGroupValue } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
const value = ref<CheckboxGroupValue[]>(['System'])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>

您也可以传入具有以下属性的对象数组

<script setup lang="ts">
import type { CheckboxGroupItem, CheckboxGroupValue } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'This is the first option.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'This is the second option.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'This is the third option.',
    value: 'dark'
  }
])
const value = ref<CheckboxGroupValue[]>([
  'system'
])
</script>

<template>
  <UCheckboxGroup v-model="value" :items="items" />
</template>
使用对象时，您需要在 v-model 指令或 default-value prop 中引用对象的 value 属性。

值键 (Value Key)

您可以通过使用 value-key prop 来更改用于设置值的属性。默认为 value。

<script setup lang="ts">
import type { CheckboxGroupItem, CheckboxGroupValue } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'This is the first option.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'This is the second option.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'This is the third option.',
    id: 'dark'
  }
])
const value = ref<CheckboxGroupValue[]>([
  'light'
])
</script>

<template>
  <UCheckboxGroup v-model="value" value-key="id" :items="items" />
</template>

图例 (Legend)

使用 legend prop 来设置 CheckboxGroup 的图例。

主题
<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup legend="Theme" :default-value="['System']" :items="items" />
</template>

颜色

使用 color prop 来更改 CheckboxGroup 的颜色。

<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup color="neutral" :default-value="['System']" :items="items" />
</template>

变体 (Variant)

使用 variant prop 来更改 CheckboxGroup 的变体。

<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup color="primary" variant="card" :default-value="['System']" :items="items" />
</template>

尺寸 (Size)

使用 size prop 来更改 CheckboxGroup 的尺寸。

<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup size="xl" variant="list" :default-value="['System']" :items="items" />
</template>

方向 (Orientation)

使用 orientation prop 来更改 CheckboxGroup 的方向。默认为 vertical。

<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup
    orientation="horizontal"
    variant="list"
    :default-value="['System']"
    :items="items"
  />
</template>

指示器 (Indicator)

使用 indicator prop 来更改指示器的位置或隐藏它。默认为 start。

<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup indicator="end" variant="card" :default-value="['System']" :items="items" />
</template>

禁用 (Disabled)

使用 disabled prop 来禁用 CheckboxGroup。

<script setup lang="ts">
import type { CheckboxGroupItem } from '@nuxt/ui'

const items = ref<CheckboxGroupItem[]>(['System', 'Light', 'Dark'])
</script>

<template>
  <UCheckboxGroup disabled :default-value="['System']" :items="items" />
</template>

API

Props

Prop默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

图例

string

valueKey

'value'

string

当 items 是一个对象数组时，选择用作值的字段。

labelKey

'label'

string

当 items 是一个对象数组时，选择用作标签的字段。

descriptionKey

'description'

string

当 items 是一个对象数组时，选择用作描述的字段。

items

CheckboxGroupItem[]

尺寸

'md'

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

方向

'vertical'

"horizontal" | "vertical"

复选框按钮的布局方向。

defaultValue

AcceptableValue[]

复选框首次渲染时的值。在不需要控制其值时使用。

禁用

boolean

当为 true 时，阻止用户与复选框交互

loop

false

boolean

键盘导航是否应循环

modelValue

AcceptableValue[]

复选框的受控值。可使用 v-model 绑定。

name

string

字段名称。作为名称/值对的一部分随其所属表单提交。

required

boolean

当为 true 时，表示用户在提交所属表单之前必须设置值。

颜色

'primary'

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

变体

'list'

"card" | "list"

指示器

'start'

"start" | "end" | "hidden"

指示器的位置。

icon

appConfig.ui.icons.check

string

选中时显示的图标。

ui

{ root?: ClassNameValue; fieldset?: ClassNameValue; legend?: ClassNameValue; item?: ClassNameValue; } & { root?: ClassNameValue; ... 6 more ...; description?: ClassNameValue; }

插槽 (Slots)

插槽类型
图例

{}

label

{ item: CheckboxGroupItem & { id: string; }; }

description

{ item: CheckboxGroupItem & { id: string; }; }

触发事件 (Emits)

事件类型
change

[payload: Event]

update:modelValue

[value: AcceptableValue[]]

主题

app.config.ts
export default defineAppConfig({
  ui: {
    checkboxGroup: {
      slots: {
        root: 'relative',
        fieldset: 'flex gap-x-2',
        legend: 'mb-1 block font-medium text-default',
        item: ''
      },
      variants: {
        orientation: {
          horizontal: {
            fieldset: 'flex-row'
          },
          vertical: {
            fieldset: 'flex-col'
          }
        },
        size: {
          xs: {
            fieldset: 'gap-y-0.5',
            legend: 'text-xs'
          },
          sm: {
            fieldset: 'gap-y-0.5',
            legend: 'text-xs'
          },
          md: {
            fieldset: 'gap-y-1',
            legend: 'text-sm'
          },
          lg: {
            fieldset: 'gap-y-1',
            legend: 'text-sm'
          },
          xl: {
            fieldset: 'gap-y-1.5',
            legend: 'text-base'
          }
        },
        required: {
          true: {
            legend: "after:content-['*'] after:ms-0.5 after:text-error"
          }
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
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: {
        checkboxGroup: {
          slots: {
            root: 'relative',
            fieldset: 'flex gap-x-2',
            legend: 'mb-1 block font-medium text-default',
            item: ''
          },
          variants: {
            orientation: {
              horizontal: {
                fieldset: 'flex-row'
              },
              vertical: {
                fieldset: 'flex-col'
              }
            },
            size: {
              xs: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs'
              },
              sm: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs'
              },
              md: {
                fieldset: 'gap-y-1',
                legend: 'text-sm'
              },
              lg: {
                fieldset: 'gap-y-1',
                legend: 'text-sm'
              },
              xl: {
                fieldset: 'gap-y-1.5',
                legend: 'text-base'
              }
            },
            required: {
              true: {
                legend: "after:content-['*'] after:ms-0.5 after:text-error"
              }
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      ui: {
        checkboxGroup: {
          slots: {
            root: 'relative',
            fieldset: 'flex gap-x-2',
            legend: 'mb-1 block font-medium text-default',
            item: ''
          },
          variants: {
            orientation: {
              horizontal: {
                fieldset: 'flex-row'
              },
              vertical: {
                fieldset: 'flex-col'
              }
            },
            size: {
              xs: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs'
              },
              sm: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs'
              },
              md: {
                fieldset: 'gap-y-1',
                legend: 'text-sm'
              },
              lg: {
                fieldset: 'gap-y-1',
                legend: 'text-sm'
              },
              xl: {
                fieldset: 'gap-y-1.5',
                legend: 'text-base'
              }
            },
            required: {
              true: {
                legend: "after:content-['*'] after:ms-0.5 after:text-error"
              }
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Checkbox

一个在选中和未选中状态之间切换的输入元素。

Chip

一个表示数值或状态的指示器。