总览

SplitButton 分隔按钮

使用指南

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

  

基本

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

   


   

尺寸

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

  

危险

设置按钮的 warning 属性值为 true 来表示该按钮操作具有危险性。

  

禁用

添加 disabled 属性即可让按钮处于不可用状态，同时按钮样式也会改变。

  

加载中

通过设置 loading 属性即可以让按钮处于加载状态。

复杂菜单

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

复合使用

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

无障碍

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

API

SplitButton

参数说明类型默认值
size按钮组的尺寸

可选值:
'small', 'medium'		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		Functionfunc.noop
onItemClick点击菜单项时的回调，参考 Menu

签名:
Function() => void		Functionfunc.noop
triggerProps触发按钮的属性（支持 Button 的所有属性透传）Object-
autoWidth弹层菜单的宽度是否与按钮组一致Booleantrue
visible弹层是否显示Boolean-
defaultVisible弹层默认是否显示Boolean-
onVisibleChange弹层显示状态变化时的回调函数

签名:
Function(visible: Boolean, type: String) => void
参数:
visible: {Boolean} 弹层显示状态
type: {String} 触发弹层显示或隐藏的来源 menuSelect 表示由menu触发； fromTrigger 表示由trigger的点击触发； docClick 表示由document的点击触发		Functionfunc.noop
popupTriggerType弹层的触发方式

可选值:
'click', 'hover'		Enum'click'
popupAlign弹层对齐方式, 详情见Overlay alignString-
popupStyle弹层自定义样式Object-
popupClassName弹层自定义样式类String-
popupProps透传给弹层的属性Object-
followTrigger是否跟随滚动Boolean-
menuProps透传给 Menu 的属性Object{}
leftButtonProps透传给 左侧按钮 的属性Object{}