Dropdown下拉菜单

向下弹出的列表。

何时使用

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

用于收罗一组命令操作。
Select 用于选择，而 Dropdown 是命令集合。

代码演示

基本

最简单的下拉菜单。

TypeScript
JavaScript
import React from 'react';
import { DownOutlined, SmileOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';

const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item (disabled)
      </a>
    ),
    icon: <SmileOutlined />,
    disabled: true,
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item (disabled)
      </a>
    ),
    disabled: true,
  },
  {
    key: '4',
    danger: true,
    label: 'a danger item',
  },
];

const App: React.FC = () => (
  <Dropdown menu={{ items }}>
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Hover me
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>
);

export default App;

箭头

可以展示一个箭头。

TypeScript
JavaScript
import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown } from 'antd';

const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item
      </a>
    ),
  },
];

const App: React.FC = () => (
  <>
    <Dropdown menu={{ items }} placement="bottomLeft" arrow>
      <Button>bottomLeft</Button>
    </Dropdown>
    <Dropdown menu={{ items }} placement="bottom" arrow>
      <Button>bottom</Button>
    </Dropdown>
    <Dropdown menu={{ items }} placement="bottomRight" arrow>
      <Button>bottomRight</Button>
    </Dropdown>
    <br />
    <Dropdown menu={{ items }} placement="topLeft" arrow>
      <Button>topLeft</Button>
    </Dropdown>
    <Dropdown menu={{ items }} placement="top" arrow>
      <Button>top</Button>
    </Dropdown>
    <Dropdown menu={{ items }} placement="topRight" arrow>
      <Button>topRight</Button>
    </Dropdown>
  </>
);

export default App;
#components-dropdown-demo-arrow .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}
.ant-row-rtl #components-dropdown-demo-arrow .ant-btn {
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 8px;
}

箭头指向

设置 arrow 为 { pointAtCenter: true } 后，箭头将指向目标元素的中心。

TypeScript
JavaScript
import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown } from 'antd';

const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item
      </a>
    ),
  },
];

const App: React.FC = () => (
  <>
    <Dropdown menu={{ items }} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
      <Button>bottomLeft</Button>
    </Dropdown>
    <Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }}>
      <Button>bottom</Button>
    </Dropdown>
    <Dropdown menu={{ items }} placement="bottomRight" arrow={{ pointAtCenter: true }}>
      <Button>bottomRight</Button>
    </Dropdown>
    <br />
    <Dropdown menu={{ items }} placement="topLeft" arrow={{ pointAtCenter: true }}>
      <Button>topLeft</Button>
    </Dropdown>
    <Dropdown menu={{ items }} placement="top" arrow={{ pointAtCenter: true }}>
      <Button>top</Button>
    </Dropdown>
    <Dropdown menu={{ items }} placement="topRight" arrow={{ pointAtCenter: true }}>
      <Button>topRight</Button>
    </Dropdown>
  </>
);

export default App;
#components-dropdown-demo-arrow-center .ant-btn {
  margin-right: 8px;
  margin-bottom: 8px;
}
.ant-row-rtl #components-dropdown-demo-arrow-center .ant-btn {
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 8px;
}

触发事件

点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作。

TypeScript
JavaScript
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, message, Space } from 'antd';

const onClick: MenuProps['onClick'] = ({ key }) => {
  message.info(`Click on item ${key}`);
};

const items: MenuProps['items'] = [
  {
    label: '1st menu item',
    key: '1',
  },
  {
    label: '2nd menu item',
    key: '2',
  },
  {
    label: '3rd menu item',
    key: '3',
  },
];

const App: React.FC = () => (
  <Dropdown menu={{ items, onClick }}>
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Hover me, Click menu item
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>
);

export default App;

扩展菜单

使用 dropdownRender 对下拉菜单进行自由扩展。如果你并不需要 Menu 内容，请直接使用 Popover 组件。

TypeScript
JavaScript
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import { Dropdown, Space, Divider, Button, theme } from 'antd';
import type { MenuProps } from 'antd';

const { useToken } = theme;

const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item (disabled)
      </a>
    ),
    disabled: true,
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item (disabled)
      </a>
    ),
    disabled: true,
  },
];

const App: React.FC = () => {
  const { token } = useToken();

  const contentStyle = {
    backgroundColor: token.colorBgElevated,
    borderRadius: token.borderRadiusLG,
    boxShadow: token.boxShadowSecondary,
  };

  const menuStyle = {
    boxShadow: 'none',
  };

  return (
    <Dropdown
      menu={{ items }}
      dropdownRender={(menu) => (
        <div style={contentStyle}>
          {React.cloneElement(menu as React.ReactElement, { style: menuStyle })}
          <Divider style={{ margin: 0 }} />
          <Space style={{ padding: 8 }}>
            <Button type="primary">Click me!</Button>
          </Space>
        </div>
      )}
    >
      <a onClick={(e) => e.preventDefault()}>
        <Space>
          Hover me
          <DownOutlined />
        </Space>
      </a>
    </Dropdown>
  );
};

export default App;

菜单隐藏方式

默认是点击关闭菜单，可以关闭此功能。

TypeScript
JavaScript
import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';

const App: React.FC = () => {
  const [open, setOpen] = useState(false);

  const handleMenuClick: MenuProps['onClick'] = (e) => {
    if (e.key === '3') {
      setOpen(false);
    }
  };

  const handleOpenChange = (flag: boolean) => {
    setOpen(flag);
  };

  const items: MenuProps['items'] = [
    {
      label: 'Clicking me will not close the menu.',
      key: '1',
    },
    {
      label: 'Clicking me will not close the menu also.',
      key: '2',
    },
    {
      label: 'Clicking me will close the menu.',
      key: '3',
    },
  ];

  return (
    <Dropdown
      menu={{
        items,
        onClick: handleMenuClick,
      }}
      onOpenChange={handleOpenChange}
      open={open}
    >
      <a onClick={(e) => e.preventDefault()}>
        <Space>
          Hover me
          <DownOutlined />
        </Space>
      </a>
    </Dropdown>
  );
};

export default App;

加载中状态

添加 loading 属性即可让按钮处于加载状态，最后两个按钮演示点击后进入加载状态。

TypeScript
JavaScript
import React, { useState } from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';

const items: MenuProps['items'] = [
  {
    label: 'Submit and continue',
    key: '1',
  },
];

const App: React.FC = () => {
  const [loadings, setLoadings] = useState<boolean[]>([]);

  const enterLoading = (index: number) => {
    setLoadings((state) => {
      const newLoadings = [...state];
      newLoadings[index] = true;
      return newLoadings;
    });

    setTimeout(() => {
      setLoadings((state) => {
        const newLoadings = [...state];
        newLoadings[index] = false;
        return newLoadings;
      });
    }, 6000);
  };

  return (
    <Space direction="vertical">
      <Dropdown.Button type="primary" loading menu={{ items }}>
        Submit
      </Dropdown.Button>
      <Dropdown.Button type="primary" size="small" loading menu={{ items }}>
        Submit
      </Dropdown.Button>
      <Dropdown.Button
        type="primary"
        loading={loadings[0]}
        menu={{ items }}
        onClick={() => enterLoading(0)}
      >
        Submit
      </Dropdown.Button>
      <Dropdown.Button
        icon={<DownOutlined />}
        loading={loadings[1]}
        menu={{ items }}
        onClick={() => enterLoading(1)}
      >
        Submit
      </Dropdown.Button>
    </Space>
  );
};

export default App;

弹出位置

支持 6 个弹出位置。

TypeScript
JavaScript
import React from 'react';
import type { MenuProps } from 'antd';
import { Button, Dropdown, Space } from 'antd';

const items: MenuProps['items'] = [
  {
    key: '1',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
  },
  {
    key: '2',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item
      </a>
    ),
  },
  {
    key: '3',
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
        3rd menu item
      </a>
    ),
  },
];

const App: React.FC = () => (
  <Space direction="vertical">
    <Space wrap>
      <Dropdown menu={{ items }} placement="bottomLeft">
        <Button>bottomLeft</Button>
      </Dropdown>
      <Dropdown menu={{ items }} placement="bottom">
        <Button>bottom</Button>
      </Dropdown>
      <Dropdown menu={{ items }} placement="bottomRight">
        <Button>bottomRight</Button>
      </Dropdown>
    </Space>
    <Space wrap>
      <Dropdown menu={{ items }} placement="topLeft">
        <Button>topLeft</Button>
      </Dropdown>
      <Dropdown menu={{ items }} placement="top">
        <Button>top</Button>
      </Dropdown>
      <Dropdown menu={{ items }} placement="topRight">
        <Button>topRight</Button>
      </Dropdown>
    </Space>
  </Space>
);

export default App;

其他元素

分割线和不可用菜单项。

TypeScript
JavaScript
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';

const items: MenuProps['items'] = [
  {
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
        1st menu item
      </a>
    ),
    key: '0',
  },
  {
    label: (
      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
        2nd menu item
      </a>
    ),
    key: '1',
  },
  {
    type: 'divider',
  },
  {
    label: '3rd menu item（disabled）',
    key: '3',
    disabled: true,
  },
];

const App: React.FC = () => (
  <Dropdown menu={{ items }}>
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Hover me
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>
);

export default App;

触发方式

默认是移入触发菜单，可以点击触发。

TypeScript
JavaScript
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';

const items: MenuProps['items'] = [
  {
    label: <a href="https://www.antgroup.com">1st menu item</a>,
    key: '0',
  },
  {
    label: <a href="https://www.aliyun.com">2nd menu item</a>,
    key: '1',
  },
  {
    type: 'divider',
  },
  {
    label: '3rd menu item',
    key: '3',
  },
];

const App: React.FC = () => (
  <Dropdown menu={{ items }} trigger={['click']}>
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Click me
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>
);

export default App;

带下拉框的按钮

左边是按钮，右边是额外的相关功能菜单。可设置 icon 属性来修改右边的图标。

TypeScript
JavaScript
import React from 'react';
import { DownOutlined, UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Button, Dropdown, message, Space, Tooltip } from 'antd';

const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  message.info('Click on left button.');
  console.log('click left button', e);
};

const handleMenuClick: MenuProps['onClick'] = (e) => {
  message.info('Click on menu item.');
  console.log('click', e);
};

const items: MenuProps['items'] = [
  {
    label: '1st menu item',
    key: '1',
    icon: <UserOutlined />,
  },
  {
    label: '2nd menu item',
    key: '2',
    icon: <UserOutlined />,
  },
  {
    label: '3rd menu item',
    key: '3',
    icon: <UserOutlined />,
    danger: true,
  },
  {
    label: '4rd menu item',
    key: '4',
    icon: <UserOutlined />,
    danger: true,
    disabled: true,
  },
];

const menuProps = {
  items,
  onClick: handleMenuClick,
};

const App: React.FC = () => (
  <Space wrap>
    <Dropdown.Button menu={menuProps} onClick={handleButtonClick}>
      Dropdown
    </Dropdown.Button>
    <Dropdown.Button menu={menuProps} placement="bottom" icon={<UserOutlined />}>
      Dropdown
    </Dropdown.Button>
    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} disabled>
      Dropdown
    </Dropdown.Button>
    <Dropdown.Button
      menu={menuProps}
      buttonsRender={([leftButton, rightButton]) => [
        <Tooltip title="tooltip" key="leftButton">
          {leftButton}
        </Tooltip>,
        React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: true }),
      ]}
    >
      With Tooltip
    </Dropdown.Button>
    <Dropdown menu={menuProps}>
      <Button>
        <Space>
          Button
          <DownOutlined />
        </Space>
      </Button>
    </Dropdown>
    <Dropdown.Button menu={menuProps} onClick={handleButtonClick} danger>
      Danger
    </Dropdown.Button>
  </Space>
);

export default App;

多级菜单

传入的菜单里有多个层级。

TypeScript
JavaScript
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space } from 'antd';

const items: MenuProps['items'] = [
  {
    key: '1',
    type: 'group',
    label: 'Group title',
    children: [
      {
        key: '1-1',
        label: '1st menu item',
      },
      {
        key: '1-2',
        label: '2nd menu item',
      },
    ],
  },
  {
    key: '2',
    label: 'sub menu',
    children: [
      {
        key: '2-1',
        label: '3rd menu item',
      },
      {
        key: '2-2',
        label: '4th menu item',
      },
    ],
  },
  {
    key: '3',
    label: 'disabled sub menu',
    disabled: true,
    children: [
      {
        key: '3-1',
        label: '5d menu item',
      },
      {
        key: '3-2',
        label: '6th menu item',
      },
    ],
  },
];

const App: React.FC = () => (
  <Dropdown menu={{ items }}>
    <a onClick={(e) => e.preventDefault()}>
      <Space>
        Cascading menu
        <DownOutlined />
      </Space>
    </a>
  </Dropdown>
);

export default App;

右键菜单

默认是移入触发菜单，可以点击鼠标右键触发。

TypeScript
JavaScript
import React from 'react';
import type { MenuProps } from 'antd';
import { Dropdown, theme } from 'antd';

const items: MenuProps['items'] = [
  {
    label: '1st menu item',
    key: '1',
  },
  {
    label: '2nd menu item',
    key: '2',
  },
  {
    label: '3rd menu item',
    key: '3',
  },
];

const App: React.FC = () => {
  const {
    token: { colorBgLayout, colorTextTertiary },
  } = theme.useToken();

  return (
    <Dropdown menu={{ items }} trigger={['contextMenu']}>
      <div
        style={{
          color: colorTextTertiary,
          background: colorBgLayout,
          height: 200,
          textAlign: 'center',
          lineHeight: '200px',
        }}
      >
        Right Click on here
      </div>
    </Dropdown>
  );
};

export default App;

菜单可选选择

添加 menu 中的 selectable 属性可以开启选择能力。

TypeScript
JavaScript
import React from 'react';
import { DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Dropdown, Space, Typography } from 'antd';

const items: MenuProps['items'] = [
  {
    key: '1',
    label: 'Item 1',
  },
  {
    key: '2',
    label: 'Item 2',
  },
  {
    key: '3',
    label: 'Item 3',
  },
];

const App: React.FC = () => (
  <Dropdown
    menu={{
      items,
      selectable: true,
      defaultSelectedKeys: ['3'],
    }}
  >
    <Typography.Link>
      <Space>
        Selectable
        <DownOutlined />
      </Space>
    </Typography.Link>
  </Dropdown>
);

export default App;

API

属性如下

参数	说明	类型	默认值	版本
arrow	下拉框箭头是否显示	boolean \| { pointAtCenter: boolean }	false
autoAdjustOverflow	下拉框被遮挡时自动调整位置	boolean	true	5.2.0
autoFocus	打开后自动聚焦下拉框	boolean	false	4.21.0
disabled	菜单是否禁用	boolean	-
destroyPopupOnHide	关闭后是否销毁 Dropdown	boolean	false
dropdownRender	自定义下拉框内容	(menus: ReactNode) => ReactNode	-	4.24.0
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	(triggerNode: HTMLElement) => HTMLElement	() => document.body
menu	菜单配置项	MenuProps	-	4.24.0
overlayClassName	下拉根元素的类名称	string	-
overlayStyle	下拉根元素的样式	CSSProperties	-
placement	菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight`	string	`bottomLeft`
trigger	触发下拉的行为, 移动端不支持 hover	Array<`click`\|`hover`\|`contextMenu`>	[`hover`]
open	菜单是否显示，小于 4.23.0 使用 `visible`（为什么?）	boolean	-	4.23.0
onOpenChange	菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（为什么?）	(open: boolean) => void	-	4.23.0

Dropdown.Button

属性与 Dropdown 的相同。还包含以下属性：

参数	说明	类型	默认值	版本
buttonsRender	自定义左右两个按钮	(buttons: ReactNode[]) => ReactNode[]	-
loading	设置按钮载入状态	boolean \| { delay: number }	false
danger	设置危险按钮	boolean	-	4.23.0
icon	右侧的 icon	ReactNode	-
size	按钮大小，和 Button 一致	string	`default`
type	按钮类型，和 Button 一致	string	`default`
onClick	点击左侧按钮的回调，和 Button 一致	(event) => void	-

注意

请确保 Dropdown 的子元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。

Design Token

Global Token

Token 名称	描述	类型	默认值
colorBgElevated	浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。	string	#ffffff
colorError	用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。	string	#ff4d4f
colorPrimary	品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义	string	#1677ff
colorPrimaryBorder	主色梯度下的描边用色，用在 Slider 等组件的描边上。	string	#91caff
colorSplit	用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。	string	rgba(5, 5, 5, 0.06)
colorText	最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。	string	rgba(0, 0, 0, 0.88)
colorTextDescription	控制文本描述字体颜色。	string	rgba(0, 0, 0, 0.45)
colorTextDisabled	控制禁用状态下的字体颜色。	string	rgba(0, 0, 0, 0.25)
colorTextLightSolid	控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。	string	#fff
borderRadiusLG	LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。	number	8
borderRadiusOuter	外部圆角	number	4
borderRadiusSM	SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角	number	4
borderRadiusXS	XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。	number	2
boxShadowSecondary	控制元素二级阴影样式。	string	0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)
controlHeight	Ant Design 中按钮和输入框等基础控件的高度	number	32
controlItemBgActive	控制组件项在激活状态下的背景颜色。	string	#e6f4ff
controlItemBgActiveHover	控制组件项在鼠标悬浮且激活状态下的背景颜色。	string	#bae0ff
controlItemBgHover	控制组件项在鼠标悬浮时的背景颜色。	string	rgba(0, 0, 0, 0.04)
controlPaddingHorizontal	控制元素水平内间距。	number	12
fontFamily	Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。	string	-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
fontSize	设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。	number	14
fontSizeIcon	控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。	number	12
fontSizeSM	小号字体大小	number	12
lineHeight	文本行高	number	1.5714285714285714
lineWidthFocus	控制线条的宽度，当组件处于聚焦态时。	number	4
marginXS	控制元素外边距，小尺寸。	number	8
marginXXS	控制元素外边距，最小尺寸。	number	4
motionDurationMid	动效播放速度，中速。用于中型元素动画交互	string	0.2s
motionEaseInOutCirc	预设动效曲率	string	cubic-bezier(0.78, 0.14, 0.15, 0.86)
motionEaseInQuint	预设动效曲率	string	cubic-bezier(0.755, 0.05, 0.855, 0.06)
motionEaseOutCirc	预设动效曲率	string	cubic-bezier(0.08, 0.82, 0.17, 1)
motionEaseOutQuint	预设动效曲率	string	cubic-bezier(0.23, 1, 0.32, 1)
paddingXS	控制元素的特小内间距。	number	8
paddingXXS	控制元素的极小内间距。	number	4
sizePopupArrow	组件箭头的尺寸	number	16
zIndexPopupBase	浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等	number	1000

API

属性如下

参数	说明	类型	默认值	版本
arrow	下拉框箭头是否显示	boolean \| { pointAtCenter: boolean }	false
autoAdjustOverflow	下拉框被遮挡时自动调整位置	boolean	true	5.2.0
autoFocus	打开后自动聚焦下拉框	boolean	false	4.21.0
disabled	菜单是否禁用	boolean	-
destroyPopupOnHide	关闭后是否销毁 Dropdown	boolean	false
dropdownRender	自定义下拉框内容	(menus: ReactNode) => ReactNode	-	4.24.0
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	(triggerNode: HTMLElement) => HTMLElement	() => document.body
menu	菜单配置项	MenuProps	-	4.24.0
overlayClassName	下拉根元素的类名称	string	-
overlayStyle	下拉根元素的样式	CSSProperties	-
placement	菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight`	string	`bottomLeft`
trigger	触发下拉的行为, 移动端不支持 hover	Array<`click`\|`hover`\|`contextMenu`>	[`hover`]
open	菜单是否显示，小于 4.23.0 使用 `visible`（为什么?）	boolean	-	4.23.0
onOpenChange	菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 `onVisibleChange`（为什么?）	(open: boolean) => void	-	4.23.0

Dropdown.Button

属性与 Dropdown 的相同。还包含以下属性：

参数	说明	类型	默认值	版本
buttonsRender	自定义左右两个按钮	(buttons: ReactNode[]) => ReactNode[]	-
loading	设置按钮载入状态	boolean \| { delay: number }	false
danger	设置危险按钮	boolean	-	4.23.0
icon	右侧的 icon	ReactNode	-
size	按钮大小，和 Button 一致	string	`default`
type	按钮类型，和 Button 一致	string	`default`
onClick	点击左侧按钮的回调，和 Button 一致	(event) => void	-

Token 名称

描述

类型

默认值

colorBgElevated

浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。

string

#ffffff

colorError

用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。

string

#ff4d4f

colorPrimary

品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义

string

#1677ff

colorPrimaryBorder

主色梯度下的描边用色，用在 Slider 等组件的描边上。

string

#91caff

colorSplit

用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。

string

rgba(5, 5, 5, 0.06)

colorText

最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。

string

rgba(0, 0, 0, 0.88)

colorTextDescription

控制文本描述字体颜色。

string

rgba(0, 0, 0, 0.45)

colorTextDisabled

控制禁用状态下的字体颜色。

string

rgba(0, 0, 0, 0.25)

colorTextLightSolid

控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。

string

#fff

borderRadiusLG

LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。

number

borderRadiusOuter

外部圆角

number

borderRadiusSM

SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角

number

borderRadiusXS

XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。

number

boxShadowSecondary

控制元素二级阴影样式。

string

0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)

controlHeight

Ant Design 中按钮和输入框等基础控件的高度

number

controlItemBgActive

控制组件项在激活状态下的背景颜色。

string

#e6f4ff

controlItemBgActiveHover

控制组件项在鼠标悬浮且激活状态下的背景颜色。

string

#bae0ff

controlItemBgHover

控制组件项在鼠标悬浮时的背景颜色。

string

rgba(0, 0, 0, 0.04)

controlPaddingHorizontal

控制元素水平内间距。

number

fontFamily

Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。

string

-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'

fontSize

设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。

number

fontSizeIcon

控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。

number

fontSizeSM

小号字体大小

number

lineHeight

文本行高

number

1.5714285714285714

lineWidthFocus

控制线条的宽度，当组件处于聚焦态时。

number

marginXS

控制元素外边距，小尺寸。

number

marginXXS

控制元素外边距，最小尺寸。

number

motionDurationMid

动效播放速度，中速。用于中型元素动画交互

string

0.2s

motionEaseInOutCirc

预设动效曲率

string

cubic-bezier(0.78, 0.14, 0.15, 0.86)

motionEaseInQuint

预设动效曲率

string

cubic-bezier(0.755, 0.05, 0.855, 0.06)

motionEaseOutCirc

预设动效曲率

string

cubic-bezier(0.08, 0.82, 0.17, 1)

motionEaseOutQuint

预设动效曲率

string

cubic-bezier(0.23, 1, 0.32, 1)

paddingXS

控制元素的特小内间距。

number

paddingXXS

控制元素的极小内间距。

number

sizePopupArrow

组件箭头的尺寸

number

zIndexPopupBase

浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等

number

1000