Select 选择器

基于 reka-ui 的组合式选择器。选项较少时也可用 [Radio](/components-library/reui/components/data-entry/radio)。

何时使用

  • 需要从多个选项中选择一项或多项时。
  • 选项较多、不适合用单选框或多选框展示时。

基础用法

<script setup lang="ts">
import { ref } from "vue";
import {
  Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Button,
} from "@reglow/reui";

const value = ref("");
</script>

<template>
  <Select v-model="value">
    <SelectTrigger class="w-[180px]">
      <SelectValue placeholder="请选择" />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="apple">苹果</SelectItem>
      <SelectItem value="banana">香蕉</SelectItem>
      <SelectItem value="cherry">樱桃</SelectItem>
    </SelectContent>
  </Select>
</template>

导入

import {
  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
  SelectGroup, SelectLabel, SelectSeparator,
  SelectScrollUpButton, SelectScrollDownButton,
} from "@reglow/reui";

组成

组件说明
Select根容器(reka SelectRoot props,v-model
SelectTrigger / SelectValue触发器 / 展示选中值
SelectContent下拉内容面板
SelectItem / SelectGroup / SelectLabel / SelectSeparator选项 / 分组 / 标签 / 分隔线