Dropdown 下拉菜单

Dropdown 下拉菜单

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

开发指南

何时使用

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

API

下拉菜单

参数	说明	类型	默认值
prefix	样式类名的品牌前缀	String	'next-'
className	自定义类名	String	-
style	自定义内联样式	Object	-
children	弹层内容	ReactNode	-
visible	弹层当前是否可见	Boolean	-
defaultVisible	弹层默认是否可见	Boolean	false
onVisibleChange	弹层在显示和隐藏时触发的回调函数签名:Function(visible: Boolean, type: String, event: Object) => void参数:visible: {Boolean} 弹层是否显示type: {String} 触发弹层显示和隐藏的来源event: {Object} 事件对象	Function	() => {}
trigger	触发弹层显示或者隐藏的元素	ReactNode	-
triggerType	触发弹层显示或者隐藏的事件可选值:'hover', 'click', 'focus'	Enum	'hover'
disabled	是否禁用，如果设置为true，那么trigger不能触发弹层的显示或隐藏	Boolean	false
align	弹层相对于trigger的定位, 详见Overlay的定位部分	String	'tl bl'
offset	弹层相对于trigger的定位的微调	Array	0, 0
delay	悬浮状态下延时时间	Number	200
autoFocus	弹层弹出后是否自动获取焦点	Boolean	true
hasMask	是否带有遮罩	Boolean	false
cache	在弹层隐藏后是否保留当前的DOM	Boolean	false
beforeOpen	弹层显示前触发的回调函数签名:Function() => void	Function	() => {}
afterOpen	弹层显示后触发的回调函数签名:Function() => void	Function	() => {}
beforeClose	弹层关闭前触发的回调函数签名:Function() => void	Function	() => {}
afterClose	弹层关闭后触发的回调函数签名:Function() => void	Function	() => {}
onPosition	弹层定位完成后触发的回调函数签名:Function(config: Object, node: Object) => void参数:config: {Object} 定位的参数node: {Object} 定位的元素	Function	() => {}
animation	动画的配置，如果设置为false，将关闭动画	Boolean/Object	{ in: 'expandInDown', out: 'expandOutUp' }

代码示例

基本

最简单的用法。

查看源码在线预览

import { Dropdown, Menu } from "@icedesign/base";
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>Hello dropdown</a>}
    afterOpen={() => console.log("after open")}
  >
    {menu}
  </Dropdown>,
  mountNode
);

从弹层外关闭

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

查看源码在线预览

import { Dropdown, Menu, Button } from "@icedesign/base";
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">
            切换弹层的显示隐藏
          </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);

触发的事件类型

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

查看源码在线预览

import { Dropdown, Menu } from "@icedesign/base";
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
);

安装方法

开发指南

何时使用

API

下拉菜单

代码示例

相关区块

暂无相关区块