显示一个选项列表,供用户从中选择——由按钮触发。
<Select.Root defaultValue="apple">
<Select.Trigger />
<Select.Content>
<Select.Group>
<Select.Label>Fruits</Select.Label>
<Select.Item value="orange">Orange</Select.Item>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="grape" disabled>
Grape
</Select.Item>
</Select.Group>
<Select.Separator />
<Select.Group>
<Select.Label>Vegetables</Select.Label>
<Select.Item value="carrot">Carrot</Select.Item>
<Select.Item value="potato">Potato</Select.Item>
</Select.Group>
</Select.Content>
</Select.Root>
包含选择器的所有部件。它继承自 Select 原始组件的 Root 部件的 props。
Prop | 类型 | 默认值 |
---|---|---|
size | Responsive<"1" | "2" | "3"> | "2" |
用于切换选择器的按钮。此组件继承自 Select 原始组件的 Trigger 和 Value 部件的 props。它支持常用外边距 props。
Prop | 类型 | 默认值 |
---|---|---|
variant | "classic" | "surface" | "soft" | "ghost" | "surface" |
color | enum | 无默认值 |
radius | "none" | "small" | "medium" | "large" | "full" | 无默认值 |
placeholder | string | 无默认值 |
选择器打开时弹出的组件。它继承自 Select.Portal 原始组件 和 Select.Content 原始组件 部件的 props。
Prop | 类型 | 默认值 |
---|---|---|
variant | "solid" | "soft" | "solid" |
color | enum | 无默认值 |
highContrast | boolean | 无默认值 |
包含选择器条目的组件。它继承自 Select.Item 原始组件 部件的 props。
用于对多个条目进行分组。它继承自 Select.Group 原始组件 部件的 props。与 Select.Label
结合使用,以通过自动标记确保良好的可访问性。
用于渲染组的标签,它不能使用箭头键聚焦。它继承自 Select.Label 原始组件 部件的 props。
用于在 Select 中 визуально 分隔条目。它继承自 Select.Separator 原始组件 部件的 props。
使用 size
prop 来控制尺寸。
<Flex gap="3" align="center">
<Select.Root size="1" defaultValue="apple">
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root size="2" defaultValue="apple">
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root size="3" defaultValue="apple">
<Select.Trigger />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
</Flex>
在 Trigger
和 Content
上使用 variant
prop 来自定义视觉样式。
<Flex gap="3" align="center">
<Select.Root defaultValue="apple">
<Select.Trigger variant="surface" />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root defaultValue="apple">
<Select.Trigger variant="classic" />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root defaultValue="apple">
<Select.Trigger variant="soft" />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
</Flex>
使用 ghost
trigger 变体来渲染没有视觉容器元素的 trigger。Ghost triggers 在布局中的行为有所不同,因为它们使用负边距来 оптически 将自己与其兄弟元素对齐,同时保持其带内边距的活动和悬停状态。
<Flex gap="3" align="center">
<Select.Root defaultValue="apple">
<Select.Trigger variant="surface" />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root defaultValue="apple">
<Select.Trigger variant="ghost" />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
</Flex>
在 Trigger
和 Content
上使用 color
prop 来分配特定的颜色值。
<Flex gap="3">
<Select.Root defaultValue="apple">
<Select.Trigger color="indigo" variant="soft" />
<Select.Content color="indigo">
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root defaultValue="apple">
<Select.Trigger color="cyan" variant="soft" />
<Select.Content color="cyan">
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root defaultValue="apple">
<Select.Trigger color="orange" variant="soft" />
<Select.Content color="orange">
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root defaultValue="apple">
<Select.Trigger color="crimson" variant="soft" />
<Select.Content color="crimson">
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
</Flex>
在 Content
上使用 highContrast
prop 来增加条目对比度。
<Flex gap="3">
<Select.Root defaultValue="apple">
<Select.Trigger color="gray" />
<Select.Content color="gray" variant="solid">
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root defaultValue="apple">
<Select.Trigger color="gray" />
<Select.Content color="gray" variant="solid" highContrast>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
</Flex>
使用 radius
prop 来分配特定的圆角值。
<Flex gap="3">
<Select.Root defaultValue="apple">
<Select.Trigger radius="none" />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root defaultValue="apple">
<Select.Trigger radius="large" />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
<Select.Root defaultValue="apple">
<Select.Trigger radius="full" />
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
</Flex>
使用 placeholder
prop 来创建一个不需要初始值的 Trigger
。
<Select.Root>
<Select.Trigger placeholder="Pick a fruit" />
<Select.Content>
<Select.Group>
<Select.Label>Fruits</Select.Label>
<Select.Item value="orange">Orange</Select.Item>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="grape" disabled>
Grape
</Select.Item>
</Select.Group>
<Select.Separator />
<Select.Group>
<Select.Label>Vegetables</Select.Label>
<Select.Item value="carrot">Carrot</Select.Item>
<Select.Item value="potato">Potato</Select.Item>
</Select.Group>
</Select.Content>
</Select.Root>
设置 position="popper"
prop 将选择菜单定位在 trigger 下方。
<Select.Root defaultValue="apple">
<Select.Trigger />
<Select.Content position="popper">
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
当使用服务端渲染时,您可能会注意到在 hydration 后出现布局偏移。这是因为 Trigger 执行客户端代码来显示所选条目的文本。为了避免布局偏移,您可以手动渲染它,通过映射值。
() => {
const data = {
apple: "Apple",
orange: "Orange",
};
const [value, setValue] = React.useState("apple");
return (
<Select.Root value={value} onValueChange={setValue}>
<Select.Trigger>{data[value]}</Select.Trigger>
<Select.Content>
<Select.Item value="apple">Apple</Select.Item>
<Select.Item value="orange">Orange</Select.Item>
</Select.Content>
</Select.Root>
);
};
您可以通过手动控制 Trigger 的子元素来自定义 Trigger 渲染值的方式。例如,您可以在所选条目的文本旁边渲染一个图标。
() => {
const data = {
light: { label: "Light", icon: <SunIcon /> },
dark: { label: "Dark", icon: <MoonIcon /> },
};
const [value, setValue] = React.useState("light");
return (
<Flex direction="column" maxWidth="160px">
<Select.Root value={value} onValueChange={setValue}>
<Select.Trigger>
<Flex as="span" align="center" gap="2">
{data[value].icon}
{data[value].label}
</Flex>
</Select.Trigger>
<Select.Content position="popper">
<Select.Item value="light">Light</Select.Item>
<Select.Item value="dark">Dark</Select.Item>
</Select.Content>
</Select.Root>
</Flex>
);
};