下拉菜单

向用户显示一个菜单，例如一组由按钮触发的操作或功能。

import * as React from "react";
import { DropdownMenu } from "radix-ui";
import {
	HamburgerMenuIcon,
	DotFilledIcon,
	CheckIcon,
	ChevronRightIcon,
} from "@radix-ui/react-icons";
import "./styles.css";

const DropdownMenuDemo = () => {
	const [bookmarksChecked, setBookmarksChecked] = React.useState(true);
	const [urlsChecked, setUrlsChecked] = React.useState(false);
	const [person, setPerson] = React.useState("pedro");

	return (
		<DropdownMenu.Root>
			<DropdownMenu.Trigger asChild>
				<button className="IconButton" aria-label="Customise options">
					<HamburgerMenuIcon />
				</button>
			</DropdownMenu.Trigger>

			<DropdownMenu.Portal>
				<DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}>
					<DropdownMenu.Item className="DropdownMenuItem">
						New Tab <div className="RightSlot">⌘+T</div>
					</DropdownMenu.Item>
					<DropdownMenu.Item className="DropdownMenuItem">
						New Window <div className="RightSlot">⌘+N</div>
					</DropdownMenu.Item>
					<DropdownMenu.Item className="DropdownMenuItem" disabled>
						New Private Window <div className="RightSlot">⇧+⌘+N</div>
					</DropdownMenu.Item>
					<DropdownMenu.Sub>
						<DropdownMenu.SubTrigger className="DropdownMenuSubTrigger">
							More Tools
							<div className="RightSlot">
								<ChevronRightIcon />
							</div>
						</DropdownMenu.SubTrigger>
						<DropdownMenu.Portal>
							<DropdownMenu.SubContent
								className="DropdownMenuSubContent"
								sideOffset={2}
								alignOffset={-5}
							>
								<DropdownMenu.Item className="DropdownMenuItem">
									Save Page As… <div className="RightSlot">⌘+S</div>
								</DropdownMenu.Item>
								<DropdownMenu.Item className="DropdownMenuItem">
									Create Shortcut…
								</DropdownMenu.Item>
								<DropdownMenu.Item className="DropdownMenuItem">
									Name Window…
								</DropdownMenu.Item>
								<DropdownMenu.Separator className="DropdownMenu.Separator" />
								<DropdownMenu.Item className="DropdownMenuItem">
									Developer Tools
								</DropdownMenu.Item>
							</DropdownMenu.SubContent>
						</DropdownMenu.Portal>
					</DropdownMenu.Sub>

					<DropdownMenu.Separator className="DropdownMenuSeparator" />

					<DropdownMenu.CheckboxItem
						className="DropdownMenuCheckboxItem"
						checked={bookmarksChecked}
						onCheckedChange={setBookmarksChecked}
					>
						<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
							<CheckIcon />
						</DropdownMenu.ItemIndicator>
						Show Bookmarks <div className="RightSlot">⌘+B</div>
					</DropdownMenu.CheckboxItem>
					<DropdownMenu.CheckboxItem
						className="DropdownMenuCheckboxItem"
						checked={urlsChecked}
						onCheckedChange={setUrlsChecked}
					>
						<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
							<CheckIcon />
						</DropdownMenu.ItemIndicator>
						Show Full URLs
					</DropdownMenu.CheckboxItem>

					<DropdownMenu.Separator className="DropdownMenuSeparator" />

					<DropdownMenu.Label className="DropdownMenuLabel">
						People
					</DropdownMenu.Label>
					<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
						<DropdownMenu.RadioItem
							className="DropdownMenuRadioItem"
							value="pedro"
						>
							<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
								<DotFilledIcon />
							</DropdownMenu.ItemIndicator>
							Pedro Duarte
						</DropdownMenu.RadioItem>
						<DropdownMenu.RadioItem
							className="DropdownMenuRadioItem"
							value="colm"
						>
							<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
								<DotFilledIcon />
							</DropdownMenu.ItemIndicator>
							Colm Tuite
						</DropdownMenu.RadioItem>
					</DropdownMenu.RadioGroup>

					<DropdownMenu.Arrow className="DropdownMenuArrow" />
				</DropdownMenu.Content>
			</DropdownMenu.Portal>
		</DropdownMenu.Root>
	);
};

export default DropdownMenuDemo;

特性

可以是受控的或非受控的。

支持带有可配置阅读方向的子菜单。

支持项目、标签、项目组。

支持可勾选项目（单个或多个），具有可选的未确定状态。

支持模态和非模态模式。

自定义侧边、对齐、偏移、碰撞处理。

可选渲染指向箭头。

焦点完全受管理。

完整的键盘导航。

预输入支持。

Dismissing 和 layering 行为是高度可定制的。

安装

从命令行安装组件。

npm install @radix-ui/react-dropdown-menu

解剖结构

导入所有部分并将它们拼合在一起。

import { DropdownMenu } from "radix-ui";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger />

		<DropdownMenu.Portal>
			<DropdownMenu.Content>
				<DropdownMenu.Label />
				<DropdownMenu.Item />

				<DropdownMenu.Group>
					<DropdownMenu.Item />
				</DropdownMenu.Group>

				<DropdownMenu.CheckboxItem>
					<DropdownMenu.ItemIndicator />
				</DropdownMenu.CheckboxItem>

				<DropdownMenu.RadioGroup>
					<DropdownMenu.RadioItem>
						<DropdownMenu.ItemIndicator />
					</DropdownMenu.RadioItem>
				</DropdownMenu.RadioGroup>

				<DropdownMenu.Sub>
					<DropdownMenu.SubTrigger />
					<DropdownMenu.Portal>
						<DropdownMenu.SubContent />
					</DropdownMenu.Portal>
				</DropdownMenu.Sub>

				<DropdownMenu.Separator />
				<DropdownMenu.Arrow />
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

API 参考

根组件

包含下拉菜单的所有部分。

属性	类型	默认值
`defaultOpen`	`布尔值`	无默认值
`open`	`布尔值`	无默认值
`onOpenChange`	`函数`	无默认值
`modal`	`布尔值`	`true`
`dir`	`枚举`	无默认值

触发器

切换下拉菜单的按钮。默认情况下，DropdownMenu.Content 将相对于触发器定位自身。

属性	类型	默认值
`asChild`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-disabled]`	禁用时呈现

Portal

使用时，将 content 部分传送到 body 中。

属性	类型	默认值
`forceMount`	`布尔值`	无默认值
`container`	`HTMLElement`	`document.body`

内容

下拉菜单打开时弹出的组件。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`loop`	`布尔值`	`false`
`onCloseAutoFocus`	`函数`	无默认值
`onEscapeKeyDown`	`函数`	无默认值
`onPointerDownOutside`	`函数`	无默认值
`onFocusOutside`	`函数`	无默认值
`onInteractOutside`	`函数`	无默认值
`forceMount`	`布尔值`	无默认值
`side`	`枚举`	`"bottom"`
`sideOffset`	`数字`	`0`
`align`	`枚举`	`"center"`
`alignOffset`	`数字`	`0`
`avoidCollisions`	`布尔值`	`true`
`collisionBoundary`	`Boundary`	`[]`
`collisionPadding`	`数字 \| Padding`	`0`
`arrowPadding`	`数字`	`0`
`sticky`	`枚举`	`"partial"`
`hideWhenDetached`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-side]`	`"left" \|"right" \|"bottom" \|"top"`
`[data-align]`	`"start" \|"end" \|"center"`
`[data-orientation]`	`"vertical" \|"horizontal"`

CSS 变量	描述
`--radix-dropdown-menu-content-transform-origin`	从内容和箭头位置/偏移计算出的 `transform-origin`
`--radix-dropdown-menu-content-available-width`	触发器和边界边缘之间的剩余宽度
`--radix-dropdown-menu-content-available-height`	触发器和边界边缘之间的剩余高度
`--radix-dropdown-menu-trigger-width`	触发器的宽度
`--radix-dropdown-menu-trigger-height`	触发器的高度

箭头

一个可选的箭头元素，用于与下拉菜单一起渲染。这可以用于帮助在视觉上将触发器与 DropdownMenu.Content 链接起来。必须在 DropdownMenu.Content 内部渲染。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`宽度`	`数字`	`10`
`高度`	`数字`	`5`

项目

包含下拉菜单项目的组件。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`disabled`	`布尔值`	无默认值
`onSelect`	`函数`	无默认值
`textValue`	`字符串`	无默认值

数据属性	值
`[data-orientation]`	`"vertical" \|"horizontal"`
`[data-highlighted]`	高亮时呈现
`[data-disabled]`	禁用时呈现

组

用于将多个 DropdownMenu.Item 分组。

属性	类型	默认值
`asChild`	`布尔值`	`false`

CheckboxItem

可以控制并像复选框一样渲染的项目。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`checked`	`布尔值 \| 'indeterminate'`	无默认值
`onCheckedChange`	`函数`	无默认值
`disabled`	`布尔值`	无默认值
`onSelect`	`函数`	无默认值
`textValue`	`字符串`	无默认值

数据属性	值
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`
`[data-highlighted]`	高亮时呈现
`[data-disabled]`	禁用时呈现

RadioGroup

用于将多个 DropdownMenu.RadioItem 分组。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`value`	`字符串`	无默认值
`onValueChange`	`函数`	无默认值

RadioItem

可以控制并像单选按钮一样渲染的项目。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`value*`	`字符串`	无默认值
`disabled`	`布尔值`	无默认值
`onSelect`	`函数`	无默认值
`textValue`	`字符串`	无默认值

数据属性	值
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`
`[data-highlighted]`	高亮时呈现
`[data-disabled]`	禁用时呈现

ItemIndicator

当父级 DropdownMenu.CheckboxItem 或 DropdownMenu.RadioItem 被选中时渲染。您可以直接设置此元素的样式，或者您可以将其用作包装器来放入图标，或者两者都做。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`forceMount`	`布尔值`	无默认值

数据属性	值
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`

分隔符

用于在下拉菜单中视觉上分隔项目。

属性	类型	默认值
`asChild`	`布尔值`	`false`

子菜单

包含子菜单的所有部分。

属性	类型	默认值
`defaultOpen`	`布尔值`	无默认值
`open`	`布尔值`	无默认值
`onOpenChange`	`函数`	无默认值

SubTrigger

打开子菜单的项目。必须在 DropdownMenu.Sub 内部渲染。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`disabled`	`布尔值`	无默认值
`textValue`	`字符串`	无默认值

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-highlighted]`	高亮时呈现
`[data-disabled]`	禁用时呈现

CSS 变量	描述
`--radix-dropdown-menu-content-transform-origin`	从内容和箭头位置/偏移计算出的 `transform-origin`
`--radix-dropdown-menu-content-available-width`	触发器和边界边缘之间的剩余宽度
`--radix-dropdown-menu-content-available-height`	触发器和边界边缘之间的剩余高度
`--radix-dropdown-menu-trigger-width`	触发器的宽度
`--radix-dropdown-menu-trigger-height`	触发器的高度

SubContent

子菜单打开时弹出的组件。必须在 DropdownMenu.Sub 内部渲染。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`loop`	`布尔值`	`false`
`onEscapeKeyDown`	`函数`	无默认值
`onPointerDownOutside`	`函数`	无默认值
`onFocusOutside`	`函数`	无默认值
`onInteractOutside`	`函数`	无默认值
`forceMount`	`布尔值`	无默认值
`sideOffset`	`数字`	`0`
`alignOffset`	`数字`	`0`
`avoidCollisions`	`布尔值`	`true`
`collisionBoundary`	`Boundary`	`[]`
`collisionPadding`	`数字 \| Padding`	`0`
`arrowPadding`	`数字`	`0`
`sticky`	`枚举`	`"partial"`
`hideWhenDetached`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-side]`	`"left" \|"right" \|"bottom" \|"top"`
`[data-align]`	`"start" \|"end" \|"center"`
`[data-orientation]`	`"vertical" \|"horizontal"`

示例

使用子菜单

您可以使用 DropdownMenu.Sub 与其部件组合来创建子菜单。

<DropdownMenu.Root>
	<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
	<DropdownMenu.Portal>
		<DropdownMenu.Content>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Sub>
				<DropdownMenu.SubTrigger>Sub menu →</DropdownMenu.SubTrigger>
				<DropdownMenu.Portal>
					<DropdownMenu.SubContent>
						<DropdownMenu.Item>Sub menu item</DropdownMenu.Item>
						<DropdownMenu.Item>Sub menu item</DropdownMenu.Item>
						<DropdownMenu.Arrow />
					</DropdownMenu.SubContent>
				</DropdownMenu.Portal>
			</DropdownMenu.Sub>
			<DropdownMenu.Separator />
			<DropdownMenu.Item>…</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Portal>
</DropdownMenu.Root>

使用禁用项目

您可以通过 data-disabled 属性为禁用项目添加特殊样式。

// index.jsx
import { DropdownMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content>
				<DropdownMenu.Item className="DropdownMenuItem" disabled>
					…
				</DropdownMenu.Item>
				<DropdownMenu.Item className="DropdownMenuItem">…</DropdownMenu.Item>
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuItem[data-disabled] {
	color: gainsboro;
}

使用分隔符

使用 Separator 部分在项目之间添加分隔符。

<DropdownMenu.Root>
	<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
	<DropdownMenu.Portal>
		<DropdownMenu.Content>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Separator />
			<DropdownMenu.Item>…</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Portal>
</DropdownMenu.Root>

使用标签

使用 Label 部分来帮助标记一个部分。

<DropdownMenu.Root>
	<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
	<DropdownMenu.Portal>
		<DropdownMenu.Content>
			<DropdownMenu.Label>Label</DropdownMenu.Label>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Item>…</DropdownMenu.Item>
			<DropdownMenu.Item>…</DropdownMenu.Item>
		</DropdownMenu.Content>
	</DropdownMenu.Portal>
</DropdownMenu.Root>

使用复选框项目

使用 CheckboxItem 部分添加可以勾选的项目。

import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import { DropdownMenu } from "radix-ui";

export default () => {
	const [checked, setChecked] = React.useState(true);

	return (
		<DropdownMenu.Root>
			<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
			<DropdownMenu.Portal>
				<DropdownMenu.Content>
					<DropdownMenu.Item>…</DropdownMenu.Item>
					<DropdownMenu.Item>…</DropdownMenu.Item>
					<DropdownMenu.Separator />
					<DropdownMenu.CheckboxItem
						checked={checked}
						onCheckedChange={setChecked}
					>
						<DropdownMenu.ItemIndicator>
							<CheckIcon />
						</DropdownMenu.ItemIndicator>
						Checkbox item
					</DropdownMenu.CheckboxItem>
				</DropdownMenu.Content>
			</DropdownMenu.Portal>
		</DropdownMenu.Root>
	);
};

使用单选按钮项目

使用 RadioGroup 和 RadioItem 部分添加可以在其他项目中选中的项目。

import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import { DropdownMenu } from "radix-ui";

export default () => {
	const [color, setColor] = React.useState("blue");

	return (
		<DropdownMenu.Root>
			<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
			<DropdownMenu.Portal>
				<DropdownMenu.Content>
					<DropdownMenu.RadioGroup value={color} onValueChange={setColor}>
						<DropdownMenu.RadioItem value="red">
							<DropdownMenu.ItemIndicator>
								<CheckIcon />
							</DropdownMenu.ItemIndicator>
							Red
						</DropdownMenu.RadioItem>
						<DropdownMenu.RadioItem value="blue">
							<DropdownMenu.ItemIndicator>
								<CheckIcon />
							</DropdownMenu.ItemIndicator>
							Blue
						</DropdownMenu.RadioItem>
						<DropdownMenu.RadioItem value="green">
							<DropdownMenu.ItemIndicator>
								<CheckIcon />
							</DropdownMenu.ItemIndicator>
							Green
						</DropdownMenu.RadioItem>
					</DropdownMenu.RadioGroup>
				</DropdownMenu.Content>
			</DropdownMenu.Portal>
		</DropdownMenu.Root>
	);
};

使用复杂项目

您可以在 Item 部分添加额外的装饰元素，例如图像。

import { DropdownMenu } from "radix-ui";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content>
				<DropdownMenu.Item>
					<img src="…" />
					Adolfo Hess
				</DropdownMenu.Item>
				<DropdownMenu.Item>
					<img src="…" />
					Miyah Myles
				</DropdownMenu.Item>
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

约束内容/子内容大小

您可能想要约束内容（或子内容）的宽度，使其与触发器（或子触发器）的宽度相匹配。您可能还想约束其高度，使其不超过视口。

我们公开了几个 CSS 自定义属性，例如 --radix-dropdown-menu-trigger-width 和 --radix-dropdown-menu-content-available-height 以支持这一点。使用它们来约束内容尺寸。

// index.jsx
import { DropdownMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content className="DropdownMenuContent" sideOffset={5}>
				…
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuContent {
	width: var(--radix-dropdown-menu-trigger-width);
	max-height: var(--radix-dropdown-menu-content-available-height);
}

原点感知动画

我们公开了一个 CSS 自定义属性 --radix-dropdown-menu-content-transform-origin。使用它根据 side、sideOffset、align、alignOffset 和任何碰撞，从其计算出的原点动画化内容。

// index.jsx
import { DropdownMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content className="DropdownMenuContent">
				…
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuContent {
	transform-origin: var(--radix-dropdown-menu-content-transform-origin);
	animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
	from {
		opacity: 0;
		transform: scale(0);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

碰撞感知动画

我们公开了 data-side 和 data-align 属性。它们的值将在运行时更改以反映碰撞。使用它们来创建碰撞和方向感知动画。

// index.jsx
import { DropdownMenu } from "radix-ui";
import "./styles.css";

export default () => (
	<DropdownMenu.Root>
		<DropdownMenu.Trigger>…</DropdownMenu.Trigger>
		<DropdownMenu.Portal>
			<DropdownMenu.Content className="DropdownMenuContent">
				…
			</DropdownMenu.Content>
		</DropdownMenu.Portal>
	</DropdownMenu.Root>
);

/* styles.css */
.DropdownMenuContent {
	animation-duration: 0.6s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.DropdownMenuContent[data-side="top"] {
	animation-name: slideUp;
}
.DropdownMenuContent[data-side="bottom"] {
	animation-name: slideDown;
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

可访问性

遵循 Menu Button WAI-ARIA 设计模式和使用 roving tabindex 来管理菜单项之间的焦点移动。

键盘交互

键	描述
`空格键`	当焦点在 `DropdownMenu.Trigger` 上时，打开下拉菜单并聚焦第一个项目。当焦点在一个项目上时，激活聚焦的项目。
`回车键`	当焦点在 `DropdownMenu.Trigger` 上时，打开下拉菜单并聚焦第一个项目。当焦点在一个项目上时，激活聚焦的项目。
`向下箭头键`	当焦点在 `DropdownMenu.Trigger` 上时，打开下拉菜单。当焦点在一个项目上时，将焦点移动到下一个项目。
`向上箭头键`	当焦点在一个项目上时，将焦点移动到上一个项目。
`向右箭头键向左箭头键`	当焦点在 `DropdownMenu.SubTrigger` 上时，根据阅读方向打开或关闭子菜单。
`Esc 键`	关闭下拉菜单并将焦点移动到 `DropdownMenu.Trigger`.

自定义 API

通过将原始部分抽象到您自己的组件中来创建您自己的 API。

抽象箭头和项目指示器

此示例抽象了 DropdownMenu.Arrow 和 DropdownMenu.ItemIndicator 部分。它还包装了 CheckboxItem 和 RadioItem 的实现细节。

用法

import {
	DropdownMenu,
	DropdownMenuTrigger,
	DropdownMenuContent,
	DropdownMenuLabel,
	DropdownMenuItem,
	DropdownMenuGroup,
	DropdownMenuCheckboxItem,
	DropdownMenuRadioGroup,
	DropdownMenuRadioItem,
	DropdownMenuSeparator,
} from "./your-dropdown-menu";

export default () => (
	<DropdownMenu>
		<DropdownMenuTrigger>DropdownMenu trigger</DropdownMenuTrigger>
		<DropdownMenuContent>
			<DropdownMenuItem>Item</DropdownMenuItem>
			<DropdownMenuLabel>Label</DropdownMenuLabel>
			<DropdownMenuGroup>Group</DropdownMenuGroup>
			<DropdownMenuCheckboxItem>CheckboxItem</DropdownMenuCheckboxItem>
			<DropdownMenuSeparator>Separator</DropdownMenuSeparator>
			<DropdownMenuRadioGroup>
				<DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>
				<DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>
			</DropdownMenuRadioGroup>
		</DropdownMenuContent>
	</DropdownMenu>
);

实现

// your-dropdown-menu.jsx
import * as React from "react";
import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
import { CheckIcon, DividerHorizontalIcon } from "@radix-ui/react-icons";

export const DropdownMenu = DropdownMenuPrimitive.Root;
export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

export const DropdownMenuContent = React.forwardRef(
	({ children, ...props }, forwardedRef) => {
		return (
			<DropdownMenuPrimitive.Portal>
				<DropdownMenuPrimitive.Content {...props} ref={forwardedRef}>
					{children}
					<DropdownMenuPrimitive.Arrow />
				</DropdownMenuPrimitive.Content>
			</DropdownMenuPrimitive.Portal>
		);
	},
);

export const DropdownMenuLabel = DropdownMenuPrimitive.Label;
export const DropdownMenuItem = DropdownMenuPrimitive.Item;
export const DropdownMenuGroup = DropdownMenuPrimitive.Group;

export const DropdownMenuCheckboxItem = React.forwardRef(
	({ children, ...props }, forwardedRef) => {
		return (
			<DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef}>
				{children}
				<DropdownMenuPrimitive.ItemIndicator>
					{props.checked === "indeterminate" && <DividerHorizontalIcon />}
					{props.checked === true && <CheckIcon />}
				</DropdownMenuPrimitive.ItemIndicator>
			</DropdownMenuPrimitive.CheckboxItem>
		);
	},
);

export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;

export const DropdownMenuRadioItem = React.forwardRef(
	({ children, ...props }, forwardedRef) => {
		return (
			<DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
				{children}
				<DropdownMenuPrimitive.ItemIndicator>
					<CheckIcon />
				</DropdownMenuPrimitive.ItemIndicator>
			</DropdownMenuPrimitive.RadioItem>
		);
	},
);

export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator;

上一个Dialog

下一个Form

在 GitHub 上编辑此页。

概述

指南

组件

实用工具

特性

用法

实现