将动作或菜单折叠到下拉菜单中。
移动到下拉菜单上,展开更多操作。
显示下拉菜单,默认情况下,下拉按钮只要hover
即可,无需点击。
render() {
return (
<Dropdown menu={(
<Dropdown.Menu>
<Dropdown.Item>黄金糕</Dropdown.Item>
<Dropdown.Item>狮子头</Dropdown.Item>
<Dropdown.Item>螺蛳粉</Dropdown.Item>
<Dropdown.Item disabled>双皮奶</Dropdown.Item>
<Dropdown.Item divided>蚵仔煎</Dropdown.Item>
</Dropdown.Menu>
)}
>
<span className="el-dropdown-link">
下拉菜单<i className="el-icon-caret-bottom el-icon--right"></i>
</span>
</Dropdown>
)
}
可使用按钮触发下拉菜单。
设置splitButton
属性来让触发下拉元素呈现为按钮组,左边是功能按钮,右边是触发下拉菜单的按钮,设置为true
即可。
render() {
return (
<div>
<Dropdown menu={(
<Dropdown.Menu>
<Dropdown.Item>黄金糕</Dropdown.Item>
<Dropdown.Item>狮子头</Dropdown.Item>
<Dropdown.Item>螺蛳粉</Dropdown.Item>
<Dropdown.Item>双皮奶</Dropdown.Item>
<Dropdown.Item>蚵仔煎</Dropdown.Item>
</Dropdown.Menu>
)}>
<Button type="primary">
更多菜单<i className="el-icon-caret-bottom el-icon--right"></i>
</Button>
</Dropdown>
<Dropdown splitButton={true} type="primary" onClick={this.handleClick.bind(this)} menu={(
<Dropdown.Menu>
<Dropdown.Item>黄金糕</Dropdown.Item>
<Dropdown.Item>狮子头</Dropdown.Item>
<Dropdown.Item>螺蛳粉</Dropdown.Item>
<Dropdown.Item>双皮奶</Dropdown.Item>
<Dropdown.Item>蚵仔煎</Dropdown.Item>
</Dropdown.Menu>
)}>更多菜单</Dropdown>
</div>
)
}
handleClick() {
alert("button click");
}
可以配置 click 激活或者 hover 激活。
在trigger
属性设置为click
即可。
render() {
return (
<Layout.Row className="block-col-2">
<Layout.Col span="12">
<span className="demonstration">hover 激活</span>
<Dropdown menu={(
<Dropdown.Menu>
<Dropdown.Item>黄金糕</Dropdown.Item>
<Dropdown.Item>狮子头</Dropdown.Item>
<Dropdown.Item>螺蛳粉</Dropdown.Item>
<Dropdown.Item>双皮奶</Dropdown.Item>
<Dropdown.Item>蚵仔煎</Dropdown.Item>
</Dropdown.Menu>
)}>
<span className="el-dropdown-link">
下拉菜单<i className="el-icon-caret-bottom el-icon--right"></i>
</span>
</Dropdown>
</Layout.Col>
<Layout.Col span="12">
<span className="demonstration">click 激活</span>
<Dropdown trigger="click" menu={(
<Dropdown.Menu>
<Dropdown.Item>黄金糕</Dropdown.Item>
<Dropdown.Item>狮子头</Dropdown.Item>
<Dropdown.Item>螺蛳粉</Dropdown.Item>
<Dropdown.Item>双皮奶</Dropdown.Item>
<Dropdown.Item>蚵仔煎</Dropdown.Item>
</Dropdown.Menu>
)}>
<span className="el-dropdown-link">
下拉菜单<i className="el-icon-caret-bottom el-icon--right"></i>
</span>
</Dropdown>
</Layout.Col>
</Layout.Row>
)
}
可以hideOnClick
属性来配置。
下拉菜单默认在点击菜单项后会被隐藏,将hideOnClick
属性默认为false
可以关闭此功能。
render() {
return (
<Dropdown hideOnClick={false} menu={(
<Dropdown.Menu>
<Dropdown.Item>黄金糕</Dropdown.Item>
<Dropdown.Item>狮子头</Dropdown.Item>
<Dropdown.Item>螺蛳粉</Dropdown.Item>
<Dropdown.Item disabled>双皮奶</Dropdown.Item>
<Dropdown.Item divided>蚵仔煎</Dropdown.Item>
</Dropdown.Menu>
)}>
<span className="el-dropdown-link">
下拉菜单<i className="el-icon-caret-bottom el-icon--right"></i>
</span>
</Dropdown>
)
}
点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作
handleCommand(command) {
Message("click on item " + command);
}
render() {
return (
<Dropdown onCommand={this.handleCommand.bind(this)} menu={(
<Dropdown.Menu>
<Dropdown.Item command="a">黄金糕</Dropdown.Item>
<Dropdown.Item command="b">狮子头</Dropdown.Item>
<Dropdown.Item command="c">螺蛳粉</Dropdown.Item>
<Dropdown.Item command="d" disabled>双皮奶</Dropdown.Item>
<Dropdown.Item command="e" divided>蚵仔煎</Dropdown.Item>
</Dropdown.Menu>
)}>
<span className="el-dropdown-link">
下拉菜单<i className="el-icon-caret-bottom el-icon--right"></i>
</span>
</Dropdown>
)
}
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
type | 菜单按钮类型,同 Button 组件(只在splitButton 为 true 的情况下有效) |
string | — | — |
size | 菜单按钮尺寸,同 Button 组件(只在splitButton 为 true 的情况下有效) |
string | — | — |
splitButton | 下拉触发元素呈现为按钮组 | boolean | — | false |
menuAlign | 菜单水平对齐方向 | string | start, end | end |
trigger | 触发下拉的行为 | string | hover, click | hover |
hideOnClick | 是否在点击菜单项后隐藏菜单 | boolean | — | true |
事件名称 | 说明 | 回调参数 |
---|---|---|
onClick | splitButton 为 true 时,点击左侧按钮的回调 |
— |
onCommand | 点击菜单项触发的事件回调 | Dropdown.Item 的指令 |
onVisibleChange | 下拉框出现/隐藏时触发 | 出现则为 true,隐藏则为 false |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
command | 指令 | string | — | — |
disabled | 禁用 | boolean | — | false |
divided | 显示分割线 | boolean | — | false |
Message 消息提示常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。基础用法从顶部出现...
列表组是一个灵活而且强大的功能,不仅仅可以用来显示简单的元素列表,还可以显示复杂的自定义内容,不过大部分的基础列表都是无...
visualMap[i]-piecewise.controller |Object设置 visualMap 组件中,controller 的inRange 和 outOfRange。如果没有这个controll...
DevTools概览AngularDevTools是一个浏览器扩展,为Angular应用程序提供调试和剖析功能。AngularDevTools支持Angularv12及更高版...
主从组件此刻,HeroesComponent同时显示了英雄列表和所选英雄的详情。把所有特性都放在同一个组件中,将会使应用“长大”后...
Vue.js2.0混合基础混合是一种灵活的分布式复用 Vue 组件的方式。混合对象可以包含任意组件选项。以组件使用混合对象时,所有混合...
软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。 组件不仅能够支持当前的数据类型,同时也能支持未来的...
HTML DOM 实例 使用JavaScript访问和操作的HTML DOM对象的例子。 Document 对象使用 document.write() 输出文本 使用 document.w...
CSS 主要用于控制网页的外观,CSS 代码可以随意变化网页的布局和网页的内容样式。当 CSS3 出现以后,更是可以让网页增添了不少动...