分裂按钮

分裂按钮将一组命令分组在一个带有默认操作项的覆盖层中。

导入#


import { SplitButton } from 'primereact/splitbutton';

基本用法#

分裂按钮有一个默认的操作按钮，以及基于 MenuModel API 的 model 属性定义的一系列附加选项。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />

图标#

分裂按钮有一个默认的操作按钮，以及基于 MenuModel API 的 model 属性定义的一系列附加选项。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" onClick={save} model={items} />

严重程度#

严重程度定义按钮的类型。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" />

加载中#

分裂按钮有一个默认的操作按钮，以及基于 MenuModel API 的 model 属性定义的一系列附加选项。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} loading={loading} />

禁用#

当存在 disabled 时，该元素无法编辑和聚焦。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />

凸起#

凸起按钮显示阴影以表示海拔。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" raised />

圆形#

圆形按钮具有圆形边框半径。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" rounded />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" rounded />

文本#

文本按钮显示为文本元素。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" text />

凸起文本#

文本按钮也可以显示为凸起以表示海拔。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised text />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised text />

轮廓#

轮廓按钮最初显示没有背景的边框。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="contrast" outlined />

尺寸#

分裂按钮提供 small 和 large 尺寸作为标准尺寸的替代品。


<Toast ref={toast}></Toast>
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="small" />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} />
<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} size="large" />

模板#

分裂按钮具有 label 和 icon 属性，允许定义主按钮。


<Toast ref={toast}></Toast>
<SplitButton label={<span>Prime React</span>} icon="pi pi-prime" model={items} severity="contrast" />

可访问性#

屏幕阅读器

分裂按钮组件渲染两个原生按钮元素，主按钮默认使用 label 属性定义 aria-label，可以使用 buttonProps 自定义。下拉按钮需要显式定义以使用 menuButtonProps 选项来描述它，并且还包括 aria-haspopup、aria-expanded 以表示状态以及 aria-controls 来定义弹出窗口和按钮之间的关系。

弹出覆盖层在列表上使用 menu 角色，每个操作项都有一个 menuitem 角色，其中 aria-label 作为菜单项标签。菜单的 id 指的是下拉按钮的 aria-controls。


<SplitButton buttonProps={{'aria-label': 'Default Action'}} menuButtonProps={{'aria-label': 'More Options'}} />

主按钮键盘支持

按键	功能
回车	激活按钮。
空格	激活按钮。

菜单按钮键盘支持

按键	功能
回车	切换菜单的可见性。
空格	切换菜单的可见性。
向下箭头	打开菜单并将焦点移动到第一个项目。
向上箭头	打开菜单并将焦点移动到最后一个项目。

菜单键盘支持

按键	功能
回车	激活菜单项，关闭菜单并将焦点设置在菜单按钮上。
Esc	关闭菜单并将焦点设置在菜单按钮上。
向下箭头	将焦点移动到下一个项目，如果是最后一个项目，则第一个项目接收焦点。
向上箭头	将焦点移动到上一个项目，如果是第一个项目，则最后一个项目接收焦点。
Home	将焦点移动到第一个项目。
End	将焦点移动到最后一个项目。