A dropdown list.
Dropdown
import { Dropdown } from '@yuntijs/ui';A dropdown list.
import { Dropdown } from '@yuntijs/ui';based on antd Dropdown component.
import { DownOutlined } from '@ant-design/icons';
import { Avatar, Button, Dropdown, Flex, Typography } from '@yuntijs/ui';
import type { MenuProps } from '@yuntijs/ui';
const { Text } = Typography;
export default () => {
const items: MenuProps['items'] = [
{
label: (
<a href="https://botnow.cn" rel="noopener noreferrer" target="_blank">
Botnow
</a>
),
key: 'botnow',
},
];
return (
<Dropdown
menu={{ items }}
menuExtra={{
divider: true,
content: (
<Text style={{ fontSize: 12 }} type="secondary">
已发布平台
</Text>
),
}}
>
<Button icon={<DownOutlined />} iconPosition="end">
<Flex align="center" gap="small">
<Avatar size={16} />
<span>Botnow</span>
</Flex>
</Button>
</Dropdown>
);
};popupRender| Name | Description | Type | Default |
|---|---|---|---|
| menuExtra | -- | {position?:"top"|"bottom";divider?:boolean;content?:ReactNode} | -- |
| menu | -- | {activeKey?:string} | -- |
| autoFocus | -- | boolean | -- |
| arrow | -- | boolean|DropdownArrowOptions | -- |
| trigger | -- | "contextMenu"|"click"|"hover"[] | -- |
| dropdownRender | -- | (originNode:React.ReactNode)=>|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|boolean | -- |
| popupRender | -- | (originNode:React.ReactNode)=>|string|number|unknown|ReactElement|unknown|ReactPortal|Promise<AwaitedReactNode>|boolean | -- |
| onOpenChange | -- | (open:boolean,info:{ source: "menu" | "trigger"; })=>void | -- |
| open | -- | boolean | -- |
| disabled | -- | boolean | -- |
| destroyPopupOnHide | -- | boolean | -- |
| destroyOnHidden | -- | boolean | -- |
| align | -- | any | -- |
| getPopupContainer | -- | (triggerNode:HTMLElement)=>HTMLElement | -- |
| prefixCls | -- | string | -- |
| className | -- | string | -- |
| rootClassName | -- | string | -- |
| transitionName | -- | string | -- |
| placement | -- | "top"|"bottom"|"bottomLeft"|"bottomRight"|"topLeft"|"topRight"|"topCenter"|"bottomCenter" | -- |
| overlayClassName | -- | string | -- |
| overlayStyle | -- | {} | -- |
| forceRender | -- | boolean | -- |
| mouseEnterDelay | -- | number | -- |
| mouseLeaveDelay | -- | number | -- |
| openClassName | -- | string | -- |
| children | -- | ReactNode | -- |
| autoAdjustOverflow | -- | boolean|AdjustOverflow | -- |
| overlay | -- | ReactElement|OverlayFunc | -- |
| visible | -- | boolean | -- |
| onVisibleChange | -- | (open:boolean)=>void | -- |