SplitButton 分隔按钮

SplitButton 分隔按钮

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

安装方法

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

使用指南

SplitButton 同样由 Button 和 Menu 组成，其在触发区域上可以分为两部分，其中 Icon 部分作为弹层菜单的触发区域。菜单只有在鼠标悬浮或点击右侧图标区域的时候才会展示。

API

SplitButton

参数	说明	类型	默认值
size	按钮组的尺寸可选值:'small', 'medium', 'large'	Enum	'medium'
type	按钮的类型可选值:'normal', 'primary', 'secondary'	Enum	'normal'
label	主按钮的文案	ReactNode	-
component	设置标签类型可选值:'button', 'a'	Enum	-
ghost	是否为幽灵按钮可选值:'light', 'dark', false, true	Enum	-
defaultSelectedKeys	默认激活的菜单项（用法同 Menu 非受控）	Array	[]
selectedKeys	激活的菜单项（用法同 Menu 受控）	Array	-
selectMode	菜单的选择模式可选值:'single', 'multiple'	Enum	-
onSelect	选择菜单项时的回调，参考 Menu签名:Function() => void	Function	func.noop
onItemClick	点击菜单项时的回调，参考 Menu签名:Function() => void	Function	func.noop
triggerProps	触发按钮的属性（支持 Button 的所有属性透传）	Object	-
autoWidth	弹层菜单的宽度是否与按钮组一致	Boolean	true
visible	弹层是否显示	Boolean	-
defaultVisible	弹层默认是否显示	Boolean	-
onVisibleChange	弹层显示状态变化时的回调函数签名:Function(visible: Boolean, type: String) => void参数:visible: {Boolean} 弹层显示状态type: {String} 触发弹层显示或隐藏的来源 menuSelect 表示由menu触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发	Function	func.noop
popupTriggerType	弹层的触发方式可选值:'click', 'hover'	Enum	'click'
popupAlign	弹层对齐方式, 详情见Overlay align	String	-
popupStyle	弹层自定义样式	Object	-
popupClassName	弹层自定义样式类	String	-
popupProps	透传给弹层的属性	Object	-
followTrigger	是否跟随滚动	Boolean	-
menuProps	透传给 Menu 的属性	Object	{}
leftButtonProps	透传给左侧按钮的属性	Object	{}

代码示例

基本

最简单的用法。支持 Button 的 type, size, component, ghost 等属性透传。

查看源码在线预览

import { SplitButton } from '@alifd/next';
const { Item } = SplitButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
ReactDOM.render(<div>
    <SplitButton label="Edit Document">{menu}</SplitButton> &nbsp; &nbsp;
    <SplitButton label="Edit Document" type="primary">{menu}</SplitButton>&nbsp;&nbsp;
    <SplitButton label="Edit Document" type="secondary">{menu}</SplitButton><br /><br />
</div>, mountNode);

尺寸

SplitButton 实际是上一个按钮组，通过 size 属性可以改变按钮组的大小。

查看源码在线预览

import { SplitButton } from '@alifd/next';
const { Item } = SplitButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
ReactDOM.render(<div>
    <SplitButton label="Edit Document" size="small">{menu}</SplitButton> &nbsp; &nbsp;
    <SplitButton label="Edit Document" size="medium">{menu}</SplitButton> &nbsp; &nbsp;
    <SplitButton label="Edit Document" size="large">{menu}</SplitButton>
</div>, mountNode);

复合使用

复合使用菜单，监听菜单行为。

查看源码在线预览

import { SplitButton } from '@alifd/next';
const { Item } = SplitButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
class CompositeSplitButton extends React.Component {
    state = {
        visible: false,
        label: 'Choose Action'
    }
    onSelect = val => {
        this.setState({
            visible: false,
            label: val
        });
    }
    changeVisible = visible => {
        this.setState({
            visible
        });
    }
    render() {
        const { visible, label } = this.state;
        return (<SplitButton label={label} visible={visible} onVisibleChange={this.changeVisible} onItemClick={this.onSelect}>{menu}</SplitButton>);
    }
}
ReactDOM.render(<CompositeSplitButton />, mountNode);

复杂菜单

支持菜单组和菜单分割线，使用方法同 Menu.Group, Menu.Item, Menu.Divider。

查看源码在线预览

import { SplitButton } from '@alifd/next';
const { Item, Group, Divider } = SplitButton;
ReactDOM.render(<SplitButton label="Edit Document" onItemClick={key => console.log(key)}>
    <Item>Undo</Item>
    <Item>Redo</Item>
    <Divider />
    <Group>
        <Item helper="CTRL + X">Cut</Item>
        <Item helper="CTRL + C">Copy</Item>
        <Item helper="CTRL + V">Paste</Item>
    </Group>
</SplitButton>, mountNode);

无障碍

为了使得屏幕阅读器能传达右侧按钮的含义，我们可以通过triggerProps传递对右侧按钮的aria-label描述，键盘操作请参考ARIA and KeyBoard。

查看源码在线预览

import { SplitButton } from '@alifd/next';
const { Item } = SplitButton;
const menu = ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'].map(item => <Item key={item}>{item}</Item>);
ReactDOM.render(<div>
    <SplitButton label="Edit Document" type="primary" triggerProps={{ 'aria-label': "click to see more menu option" }}>{menu}</SplitButton>
</div>, mountNode);

SplitButton 分隔按钮

SplitButton 分隔按钮

安装方法

使用指南

SplitButton

代码示例

相关区块

暂无相关区块