mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-22 03:22:31 +08:00

* refactor(dropdown): rename dropdown api to popup * fix: test error * fix: lint error * fix(dropdown): update deprecation warning for 'Center' placement
79 lines
1.7 KiB
TypeScript
79 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import { DownOutlined } from '@ant-design/icons';
|
|
import { Button, Divider, Dropdown, Space, 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: React.CSSProperties = {
|
|
backgroundColor: token.colorBgElevated,
|
|
borderRadius: token.borderRadiusLG,
|
|
boxShadow: token.boxShadowSecondary,
|
|
};
|
|
|
|
const menuStyle: React.CSSProperties = {
|
|
boxShadow: 'none',
|
|
};
|
|
|
|
return (
|
|
<Dropdown
|
|
menu={{ items }}
|
|
popupRender={(menu) => (
|
|
<div style={contentStyle}>
|
|
{React.cloneElement(
|
|
menu as React.ReactElement<{
|
|
style: React.CSSProperties;
|
|
}>,
|
|
{ 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;
|