Select.tsx

基本信息

• 类型: React 组件 (shadcn/ui)
• 路径: ./src/components/ui/select.tsx

功能描述

选择器组件，用于从选项列表中选择值。基于 Radix UI，支持分组、滚动按钮、自定义触发器等。

导出内容

• Select - 选择器根组件
• SelectContent - 下拉内容
• SelectGroup - 选项分组
• SelectItem - 选项项
• SelectLabel - 分组标签
• SelectScrollDownButton - 向下滚动按钮
• SelectScrollUpButton - 向上滚动按钮
• SelectSeparator - 分隔线
• SelectTrigger - 触发器
• SelectValue - 值显示

Props 接口

Select

属性	类型	必填	默认值	说明
value	string	否	-	当前值
defaultValue	string	否	-	默认值
onValueChange	(value: string) => void	否	-	值变化回调
disabled	boolean	否	-	是否禁用
...props	React.ComponentProps<typeof SelectPrimitive.Root>	否	-	Radix Select 属性

SelectTrigger

属性	类型	必填	默认值	说明
size	`'sm' \	'default'`	否	'default'	触发器尺寸
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof SelectPrimitive.Trigger>	否	-	Trigger属性

SelectContent

属性	类型	必填	默认值	说明
position	`'popper' \	'item-aligned'`	否	'popper'	定位方式
align	`'start' \	'center' \	'end'`	否	'center'	对齐方式
className	string	否	-	自定义CSS类名
...props	React.ComponentProps<typeof SelectPrimitive.Content>	否	-	Content属性

依赖

• @radix-ui/react-select - Radix UI 选择器原语
• lucide-react - 图标库 (CheckIcon, ChevronDownIcon, ChevronUpIcon)
• @/lib/utils - 工具函数 (cn)

使用示例

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  SelectGroup,
  SelectLabel,
  SelectSeparator,
} from "@/components/ui/select";

// 基础用法
<Select>
  <SelectTrigger className="w-[180px]">
    <SelectValue placeholder="选择水果" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="apple">苹果</SelectItem>
    <SelectItem value="banana">香蕉</SelectItem>
    <SelectItem value="orange">橙子</SelectItem>
  </SelectContent>
</Select>

// 带分组
<Select>
  <SelectTrigger className="w-[280px]">
    <SelectValue placeholder="选择食物" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>水果</SelectLabel>
      <SelectItem value="apple">苹果</SelectItem>
      <SelectItem value="banana">香蕉</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>蔬菜</SelectLabel>
      <SelectItem value="carrot">胡萝卜</SelectItem>
      <SelectItem value="potato">土豆</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

// 受控组件
const [value, setValue] = useState("");
<Select value={value} onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="light">浅色</SelectItem>
    <SelectItem value="dark">深色</SelectItem>
  </SelectContent>
</Select>