分裂按钮

分裂按钮将一组命令与默认命令组合在一个覆盖层中。

导入 #


import SplitButton from 'primevue/splitbutton';

基本 #

分裂按钮有一个默认的命令按钮和由 model 属性定义的一系列附加选项。


<SplitButton label="Save" @click="save" :model="items" />

图标 #

按钮和菜单项支持显示图标。


<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @click="save" :model="items" />

嵌套 #

通过嵌套菜单层次结构支持多级菜单。


<SplitButton label="Save" @click="save" :model="items" />

严重性 #

severity 属性定义按钮的变体。


<SplitButton label="Save" :model="items" @click="save"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" severity="success"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" severity="info"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" severity="warn"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" severity="help"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" severity="contrast"></SplitButton>

禁用 #

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


<SplitButton label="Save" @click="save" :model="items" disabled />

凸起 #

凸起按钮显示阴影以指示高度。


<SplitButton label="Save" :model="items" @click="save" raised></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised severity="success"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised severity="info"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised severity="warn"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised severity="help"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised severity="contrast"></SplitButton>

圆形 #

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


<SplitButton label="Save" :model="items" @click="save" rounded></SplitButton>
<SplitButton label="Save" :model="items" @click="save" rounded severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" rounded severity="success"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" rounded severity="info"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" rounded severity="warn"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" rounded severity="help"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" rounded severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" rounded severity="contrast"></SplitButton>

文本 #

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


<SplitButton label="Save" :model="items" @click="save" text></SplitButton>
<SplitButton label="Save" :model="items" @click="save" text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" text severity="warn"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" text severity="danger"></SplitButton>

凸起文本 #

文本按钮也可以显示为凸起，以增加高度。


<SplitButton label="Save" :model="items" @click="save" raised text></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised text severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised text severity="success"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised text severity="info"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised text severity="warn"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised text severity="help"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" raised text severity="danger"></SplitButton>

轮廓 #

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


<SplitButton label="Save" :model="items" @click="save" outlined></SplitButton>
<SplitButton label="Save" :model="items" @click="save" outlined severity="secondary"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" outlined severity="success"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" outlined severity="info"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" outlined severity="warn"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" outlined severity="help"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" outlined severity="danger"></SplitButton>
<SplitButton label="Save" :model="items" @click="save" outlined severity="contrast"></SplitButton>

大小 #

分裂按钮提供 small 和 large 大小作为标准替代方案。


<SplitButton label="Save" :model="items" icon="pi pi-plus" size="small"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus"></SplitButton>
<SplitButton label="Save" :model="items" icon="pi pi-plus" size="large"></SplitButton>

模板 #

按钮内的自定义内容定义为子项。


<SplitButton :model="items" @click="save" severity="contrast">
    <span class="flex items-center font-bold">
        <img alt="logo" src="https://primefaces.org/cdn/primevue/images/logo.svg" style="height: 1rem; margin-right: 0.5rem" />
        <span>PrimeVue</span>
    </span>
</SplitButton>

可访问性 #

屏幕阅读器

分裂按钮组件呈现两个原生按钮元素，主按钮默认使用 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'}" />

主按钮键盘支持

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

菜单按钮键盘支持

按键	功能
回车空格向下箭头向上箭头	打开菜单并将焦点移动到第一个项目。

菜单键盘支持

按键	功能
回车	如果菜单项有子菜单，则打开子菜单，否则激活菜单项并关闭所有打开的覆盖层。
空格	如果菜单项有子菜单，则打开子菜单，否则激活菜单项并关闭所有打开的覆盖层。
转义	如果焦点在弹出子菜单内，则关闭子菜单并将焦点移动到已关闭子菜单的根项目。
向下箭头	将焦点移动到子菜单中的下一个菜单项。
向上箭头	将焦点移动到子菜单中的上一个菜单项。
alt + 向上箭头	关闭弹出窗口，然后将焦点移动到目标元素。
向右箭头	在嵌套模式下，如果选项已关闭，则打开该选项，否则将焦点移动到第一个子选项。
向左箭头	在嵌套模式下，如果选项已打开，则关闭该选项，否则将焦点移动到父选项。
首页	将焦点移动到子菜单中的第一个菜单项。
结束	将焦点移动到子菜单中的最后一个菜单项。
任何可打印字符	将焦点移动到标签以正在键入的字符开头的菜单项。