12345678910111213141516171819202122232425262728293031323334 |
- import { Dropdown, Tag } from '@douyinfe/semi-ui';
- import React, { useMemo } from 'react';
- function Demo() {
- const subDropdown = useMemo(() => (
- <Dropdown.Menu>
- <Dropdown.Item>Menu Item 1</Dropdown.Item>
- <Dropdown.Item>Menu Item 2</Dropdown.Item>
- <Dropdown.Item>Menu Item 3</Dropdown.Item>
- </Dropdown.Menu>
- ));
- return (
- <div style={{ margin: 100 }}>
- <Dropdown
- render={
- <Dropdown.Menu>
- <Dropdown position={'rightTop'} render={subDropdown} spacing={20}>
- <Dropdown.Item>Menu Item 1</Dropdown.Item>
- </Dropdown>
- <Dropdown position={'leftTop'} render={subDropdown}>
- <Dropdown.Item>Menu Item 2</Dropdown.Item>
- </Dropdown>
- <Dropdown.Item>Menu Item 3</Dropdown.Item>
- </Dropdown.Menu>
- }
- >
- <Tag>Hover Me</Tag>
- </Dropdown>
- </div>
- );
- }
- export default Demo;
|