Dropdown 下拉菜单

Dropdown 下拉菜单

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

使用注意

若要使用无障碍的Dropdown，推荐使用<Dropdown triggerType={["click", "hover"]}> (请勿使用triggerType="focus")。我们认为，菜单类元素需要由用户确认后再展开才是一种无障碍友好的实践。

API

继承 Popup 的 API，除非特别说明

参数	说明	类型	默认值
children	弹层内容	ReactNode	-
visible	弹层当前是否显示	Boolean	-
defaultVisible	弹层默认是否显示	Boolean	false
onVisibleChange	弹层显示或隐藏时触发的回调函数签名:Function(visible: Boolean, type: String) => void参数:visible: {Boolean} 弹层是否显示type: {String} 触发弹层显示或隐藏的来源 fromContent 表示由Dropdown内容触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发	Function	func.noop
trigger	触发弹层显示或者隐藏的元素	ReactNode	-
triggerType	触发弹层显示或隐藏的操作类型，可以是 'click'，'hover'，或者它们组成的数组，如 'hover', 'click'	String/Array	'hover'
disabled	设置此属性，弹层无法显示或隐藏	Boolean	false
align	弹层相对于触发元素的定位, 详见 Overlay 的定位部分	String	'tl bl'
offset	弹层相对于trigger的定位的微调, 接收数组hoz, ver, 表示弹层在 left / top 上的增量e.g. 100, 100 表示往右(RTL 模式下是往左) 、下分布偏移100px	Array	0, 0
delay	弹层显示或隐藏的延时时间（以毫秒为单位），在 triggerType 被设置为 hover 时生效	Number	200
autoFocus	弹层打开时是否让其中的元素自动获取焦点	Boolean	-
hasMask	是否显示遮罩	Boolean	false
cache	隐藏时是否保留子节点	Boolean	false
animation	配置动画的播放方式，支持 { in: 'enter-class', out: 'leave-class' } 的对象参数，如果设置为 false，则不播放动画	Object/Boolean	{ in: 'expandInDown', out: 'expandOutUp' }

ARIA and KeyBoard

按键	说明
Up Arrow	垂直模式下，同级导航，导航到前一项
Down Arrow	垂直模式下，同级导航，导航到后一项
Right Arrow	垂直模式下，打开子菜单，导航到子菜单第一项；水平模式下，同级导航，导航到后一项
Left Arrow	垂直模式下，关闭子菜单，导航到父级菜单；水平模式下，同级导航，导航到前一项
Enter	打开子菜单，导航到子菜单第一项
Esc	关闭子菜单，导航到父级菜单

代码示例

基本

最简单的用法。

查看源码在线预览

import { Dropdown, Menu } from '@alifd/next';
const menu = (
    <Menu>
        <Menu.Item>Option 1</Menu.Item>
        <Menu.Item>Option 2</Menu.Item>
        <Menu.Item>Option 3</Menu.Item>
        <Menu.Item>Option 4</Menu.Item>
    </Menu>
);
ReactDOM.render(
    <div>
        <Dropdown trigger={<button>Hello dropdown</button>}  triggerType={["click", "hover"]} afterOpen={() => console.log('after open')}>
            {menu}
        </Dropdown>
    </div>
, mountNode);

触发的事件类型

使用 triggerType 设置触发的事件类型。

查看源码在线预览

import { Dropdown, Menu } from '@alifd/next';
const menu = (
    <Menu>
        <Menu.Item>Option 1</Menu.Item>
        <Menu.Item>Option 2</Menu.Item>
        <Menu.Item>Option 3</Menu.Item>
        <Menu.Item>Option 4</Menu.Item>
    </Menu>
);
ReactDOM.render(
    <Dropdown trigger={<a>Click me</a>} triggerType="click">
        {menu}
    </Dropdown>, mountNode);

从弹层外关闭

使用 visible 属性控制弹层显示或者隐藏，需要使用 safeNode 将其控制的元素告诉 dropdown 组件。

查看源码在线预览

import { Dropdown, Menu, Button } from '@alifd/next';
const menu = (
    <Menu>
        <Menu.Item>Option 1</Menu.Item>
        <Menu.Item>Option 2</Menu.Item>
        <Menu.Item>Option 3</Menu.Item>
        <Menu.Item>Option 4</Menu.Item>
    </Menu>
);
class App extends React.Component {
    state = {
        visible: false
    };
    toggleVisible = () => {
        this.setState({
            visible: !this.state.visible
        });
    };
    onVisibleChange = visible => {
        this.setState({
            visible
        });
    };
    render() {
        return (
            <div>
                <div style={{ marginBottom: '20px' }}>
                    <Button onClick={this.toggleVisible} ref="button">Toggle Overlay</Button>
                </div>
                <Dropdown trigger={<span>Hello dropdown</span>}
                    triggerType="click"
                    visible={this.state.visible}
                    onVisibleChange={this.onVisibleChange}
                    safeNode={() => this.refs.button}>
                    {menu}
                </Dropdown>
            </div>
        );
    }
}
ReactDOM.render(<App/>, mountNode);

安装方法

开发指南

何时使用

使用注意

ARIA and KeyBoard

代码示例

相关区块

暂无相关区块