分裂按鈕

分裂按鈕將一組指令以預設指令分組在覆蓋層中。

匯入 #


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'}" />

主按鈕鍵盤支援

按鍵	功能
enter	啟用按鈕。
space	啟用按鈕。

選單按鈕鍵盤支援

按鍵	功能
enterspace向下箭頭向上箭頭	開啟選單並將焦點移動到第一個項目。

選單鍵盤支援

按鍵	功能
enter	如果選單項目具有子選單，則開啟子選單，否則啟用選單項目並關閉所有開啟的覆蓋層。
space	如果選單項目具有子選單，則開啟子選單，否則啟用選單項目並關閉所有開啟的覆蓋層。
escape	如果焦點在彈出子選單內，則關閉子選單並將焦點移動到已關閉子選單的根項目。
向下箭頭	將焦點移動到子選單中的下一個選單項目。
向上箭頭	將焦點移動到子選單中的上一個選單項目。
alt + 向上箭頭	關閉彈出視窗，然後將焦點移動到目標元素。
向右箭頭	在巢狀模式下，如果選項已關閉，則開啟選項，否則將焦點移動到第一個子選項。
向左箭頭	在巢狀模式下，如果選項已開啟，則關閉選項，否則將焦點移動到父選項。
home	將焦點移動到子選單中的第一個選單項目。
end	將焦點移動到子選單中的最後一個選單項目。
任何可列印字元	將焦點移動到標籤以正在輸入的字元開頭的選單項目。