---
name: Dropdown 下拉菜单
route: /dropdown
parent: 组件
menu: 导航
---
import { Playground, Props } from 'docz'
import  Dropdown  from '../components/dropdown'
import  Input  from '../components/input'
import  Button  from '../components/button'
import DropdownVisible from './components/DropdownVisible'

# Dropdown 下拉菜单
>提示: 展开代码编辑器可以在线编辑，实时生效

## 基础用法
<Playground>
<Dropdown content='测试目录' options={[{label:'目录1',value:1},
{label:'目录2',value:2},
{label:'目录3',value:3},
{label:'目录4',value:4},
{label:'目录5',value:5},
{label:'目录6',value:6}]} 
onChange={alert}/>
</Playground>

## position

<Playground>
<Dropdown content='position=start' position='start' options={[{label:'目录1',value:1}, 
{label:'目录2',value:2},
{label:'目录3',value:3},
]} 
onChange={alert}/>
<Dropdown content='position=middle' position='middle' options={[{label:'目录1',value:1}, 
{label:'目录2',value:2},
{label:'目录3',value:3},
]} 
onChange={alert}/>
<Dropdown content='position=end' position='end' options={[{label:'目录1',value:1},
{label:'目录2',value:2},
{label:'目录3',value:3},
]} 
onChange={alert}/>
</Playground>

## overlay
指定自定义内容
<Playground>
<Dropdown content='自定义内容' overlay={<div style={{padding:10}}>
<Input placeholder='请输入姓名' style={{marginBottom:10}}/>
<Button>提交</Button>
</div>}
/>
<br/>

<Dropdown  overlay={<div style={{padding:10}}>
<Input placeholder='请输入姓名' style={{marginBottom:10}}/>
<Button>提交</Button>
</div>}>
<Button size='small' >任意元素上弹出Dropdown</Button>
</Dropdown>
</Playground>

## trigger
点击打开菜单
<Playground>
<Dropdown content='trigger=click' trigger='click' 
onVisibleChange={e=>console.log(e)}
options={[{label:'目录1',value:1},
{label:'目录2',value:2},
{label:'目录3',value:3},
{label:'目录4',value:4},
{label:'目录5',value:5},
{label:'目录6',value:6}]} 
onChange={alert}/>
</Playground>

## visible
自己通过代码控制菜单的开关

<DropdownVisible/>

```typescript jsx
export default function() {
    const [visible, set] = useState(false);
    const [changing, setChanging] = useState(false);
    const onClick = useCallback(() => {
        // 点击button的时候也会触发点击区域外关闭事件，设置一个flag变量防止点击button的时候重复触发关闭
        !changing && set(v => !v);
    }, [changing]);
    const onVisibleChange = useCallback((v: boolean) => {
        set(v);
        setChanging(true);
        setTimeout(() => {
            setChanging(false);
        }, 100);
    }, []);
    return (
        <div>
            <Button onClick={onClick} style={{ marginRight: 30 }}>
                点击打开
            </Button>
            <Dropdown
                content="visible control"
                trigger="click"
                visible={visible}
                onVisibleChange={onVisibleChange}
                options={[
                    { label: '目录1', value: 1 },
                    { label: '目录2', value: 2 },
                    { label: '目录3', value: 3 },
                    { label: '目录4', value: 4 },
                    { label: '目录5', value: 5 },
                    { label: '目录6', value: 6 },
                ]}
                onChange={alert}
            />
        </div>
    );
}

```

## API

<Props of={Dropdown}/>