下拉菜单

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

import React from 'react';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
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;

特性

可以是受控或非受控的。

支持子菜单，并可配置阅读方向。

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

支持可选中项目（单个或多个），并可选地使用不确定状态。

支持模态和非模态模式。

自定义侧面、对齐方式、偏移量和碰撞处理。

可以选择渲染指向箭头。

完全管理焦点。

完整的键盘导航。

支持类型提示。

关闭和分层行为高度可定制。

安装

从命令行安装组件。

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

结构

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

import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

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]`	禁用时出现

传送门

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

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

内容

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

属性	类型	默认值
`asChild`	`布尔值`	`false`
`循环`	`布尔值`	`false`
`onCloseAutoFocus`	`函数`	无默认值
`onEscapeKeyDown`	`函数`	无默认值
`onPointerDownOutside`	`函数`	无默认值
`onFocusOutside`	`函数`	无默认值
`onInteractOutside`	`函数`	无默认值
`forceMount`	`布尔值`	无默认值
`侧面`	`枚举`	`"bottom"`
`侧面偏移量`	`数字`	`0`
`对齐方式`	`枚举`	`"center"`
`对齐偏移量`	`数字`	`0`
`避免碰撞`	`布尔值`	`true`
`碰撞边界`	`边界`	`[]`
`碰撞填充`	`数字 \| 填充`	`0`
`箭头填充`	`数字`	`0`
`粘性`	`枚举`	`"partial"`
`分离时隐藏`	`布尔值`	`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`
`禁用`	`布尔值`	无默认值
`onSelect`	`函数`	无默认值
`textValue`	`字符串`	无默认值

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

分组

用于对多个 DropdownMenu.Item 进行分组。

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

复选框项目

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

属性	类型	默认值
`asChild`	`布尔值`	`false`
`选中`	`布尔值 \| '不确定'`	无默认值
`onCheckedChange`	`函数`	无默认值
`禁用`	`布尔值`	无默认值
`onSelect`	`函数`	无默认值
`textValue`	`字符串`	无默认值

数据属性	值
`[data-state]`	`"选中" \|"未选中" \|"不确定"`
`[data-highlighted]`	高亮时出现
`[data-disabled]`	禁用时出现

单选组

用于对多个 DropdownMenu.RadioItem 进行分组。

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

单选按钮项目

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

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

数据属性	值
`[data-state]`	`"选中" \|"未选中" \|"不确定"`
`[data-highlighted]`	高亮时出现
`[data-disabled]`	禁用时出现

项目指示器

当父级 DropdownMenu.CheckboxItem 或 DropdownMenu.RadioItem 被选中时渲染。您可以直接对该元素进行样式设置，也可以将其用作包装器来放入图标，或者两者兼而有之。

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

数据属性	值
`[data-state]`	`"选中" \|"未选中" \|"不确定"`

分隔符

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

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

子菜单

包含子菜单的所有部分。

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

子菜单触发器

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

属性	类型	默认值
`asChild`	`布尔值`	`false`
`禁用`	`布尔值`	无默认值
`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`	触发器的高度

子菜单内容

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

属性	类型	默认值
`asChild`	`布尔值`	`false`
`循环`	`布尔值`	`false`
`onEscapeKeyDown`	`函数`	无默认值
`onPointerDownOutside`	`函数`	无默认值
`onFocusOutside`	`函数`	无默认值
`onInteractOutside`	`函数`	无默认值
`forceMount`	`布尔值`	无默认值
`侧面偏移量`	`数字`	`0`
`对齐偏移量`	`数字`	`0`
`避免碰撞`	`布尔值`	`true`
`碰撞边界`	`边界`	`[]`
`碰撞填充`	`数字 \| 填充`	`0`
`箭头填充`	`数字`	`0`
`粘性`	`枚举`	`"partial"`
`分离时隐藏`	`布尔值`	`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 * as DropdownMenu from '@radix-ui/react-dropdown-menu';
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 React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

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 React from 'react';
import { CheckIcon } from '@radix-ui/react-icons';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';

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 * as DropdownMenu from '@radix-ui/react-dropdown-menu';

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 * as DropdownMenu from '@radix-ui/react-dropdown-menu';
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 * as DropdownMenu from '@radix-ui/react-dropdown-menu';
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 * as DropdownMenu from '@radix-ui/react-dropdown-menu';
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);
  }
}

无障碍性

遵循菜单按钮 WAI-ARIA 设计模式并使用循环 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 React from 'react';
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
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;

上一页对话框

下一页表单

在 GitHub 上编辑此页面。

概述

指南

组件

工具

特性

用法

实现