下拉框 Select

Select 组件是一个下拉选择框，支持选择单个选项，提供了丰富的自定义功能，包括自定义图标、滚动按钮等。可以灵活用于表单选择、过滤等场景。

---

📦 引入方式

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from '@npmqg/react-ui-select';

---

🧩 使用示例

📚 基本使用

示例

源码

<Select>
  <SelectTrigger>
    <span>Select an option</span>
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

📚 组合使用 SelectGroup 和 SelectLabel

示例

源码

<Select>
  <SelectTrigger>
    <span>Select your favorite fruit</span>
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">Apple</SelectItem>
      <SelectItem value="orange">Orange</SelectItem>
      <SelectItem value="banana">Banana</SelectItem>
    </SelectGroup>
    <SelectGroup>
      <SelectLabel>Vegetables</SelectLabel>
      <SelectItem value="carrot">Carrot</SelectItem>
      <SelectItem value="spinach">Spinach</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

📚 自定义图标

示例

源码

<Select>
  <SelectTrigger>
    <span>Select your country</span>
    <ChevronUp className="h-4 w-4" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="us">United States</SelectItem>
    <SelectItem value="uk">United Kingdom</SelectItem>
  </SelectContent>
</Select>

---

🧩 组件结构

组件	属性	类型	默认值	说明
Select	children	React.ReactNode	—	子元素，包含触发器和选择项等内容
SelectGroup	children	React.ReactNode	—	分组选项的子元素
SelectValue	children	React.ReactNode	—	用于显示选中的值，通常绑定 value
SelectTrigger	className	string	—	自定义类名，用于样式扩展
	children	React.ReactNode	—	触发器的内容，通常是显示当前选中的值
SelectItem	value	string | number	—	选择项的值
	children	React.ReactNode	—	显示的文本内容
	className	string	—	自定义类名
SelectLabel	children	React.ReactNode	—	每组选择项的标签
SelectSeparator	className	string	—	自定义类名，用于样式扩展
SelectContent	children	React.ReactNode	—	选择项的内容容器

---

🎨 样式说明

• 触发器样式：SelectTrigger 使用了 Tailwind CSS 进行样式化，具有圆角、边框、背景等默认样式，且在获得焦点时有高亮显示效果。
• 滚动按钮：通过 SelectScrollUpButton 和 SelectScrollDownButton 可以控制选择框内容的滚动，分别实现向上和向下滚动。
• 分隔线：SelectSeparator 用于在选择项之间添加分隔线，以帮助将不同类型的选项分组。
• 动画效果：使用了 Radix UI 提供的动画，确保下拉框的展开与收起都具有平滑的过渡效果。

---

📐 设计说明

• 动画效果：Radix UI 提供的动画效果确保了下拉框的平滑展开和收起，提升用户体验。
• 自定义性：通过 className 和 children 属性，你可以完全自定义选择框的外观和内容。
• 适配性：Select 组件的布局和样式基于 Tailwind CSS，确保了在各种屏幕和分辨率下的良好适配。