In this tutorial, we'll create a dropdown-on-hover feature in React using Ant Design 5. First, you'll need to set up a React project with Ant Design 5.
install & setup vite + react + typescript + ant design 5
1.Create a simple dropdown-on-hover in React using Ant Design 5 components such as MenuProps, Dropdown, Space, and the icons DownOutlined and SmileOutlined.
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;
2.Implement a dropdown-on-hover feature in React with Ant Design 5, showcasing placements at the top, left, right, bottom, bottom left, and bottom right.
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;
3.Create a dropdown-on-hover feature in React using Ant Design 5 with a menu.
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;
Top comments (0)