SplitButton

SplitButtonは、デフォルトコマンド付きのオーバーレイにコマンドセットをグループ化します。

インポート #


import SplitButton from 'primevue/splitbutton';

基本 #

SplitButtonには、デフォルトのコマンドボタンと、modelプロパティで定義された追加オプションのコレクションがあります。


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

アイコン #

ボタンとメニュー項目には、アイコンを表示するサポートがあります。


<SplitButton label="Save" icon="pi pi-check" dropdownIcon="pi pi-cog" @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>

テンプレート #

ボタン内のカスタムコンテンツは、子として定義されます。


<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>

アクセシビリティ #

スクリーンリーダー

SplitButtonコンポーネントは、2つのネイティブボタン要素をレンダリングします。メインボタンは、ラベルプロパティを使用してデフォルトでaria-labelを定義します。これはbuttonPropsでカスタマイズできます。ドロップダウンボタンは、menuButtonPropsオプションを使用してそれを記述するための明示的な定義を必要とし、さらにポップアップとボタンの関係を定義するためのaria-haspopup、aria-expanded（状態用）、aria-controlsを含みます。

ポップアップオーバーレイは、リストにmenuロールを使用し、各アクションアイテムには、メニュー項目のラベルとしてaria-labelを持つmenuitemロールがあります。メニューのIDは、ドロップダウンボタンのaria-controlsを参照します。


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

メインボタンのキーボードサポート

キー	機能
Enter	ボタンをアクティブにします。
スペース	ボタンをアクティブにします。

メニューボタンのキーボードサポート

キー	機能
Enterスペース下矢印上矢印	メニューを開き、最初の項目にフォーカスを移動します。

メニューのキーボードサポート

キー	機能
Enter	メニュー項目にサブメニューがある場合、サブメニューを開きます。それ以外の場合は、メニュー項目をアクティブにして、開いているすべてのオーバーレイを閉じます。
スペース	メニュー項目にサブメニューがある場合、サブメニューを開きます。それ以外の場合は、メニュー項目をアクティブにして、開いているすべてのオーバーレイを閉じます。
Esc	フォーカスがポップアップサブメニュー内にある場合は、サブメニューを閉じ、閉じたサブメニューのルート項目にフォーカスを移動します。
下矢印	サブメニュー内の次のメニュー項目にフォーカスを移動します。
上矢印	サブメニュー内の前のメニュー項目にフォーカスを移動します。
Alt + 上矢印	ポップアップを閉じ、次にターゲット要素にフォーカスを移動します。
右矢印	ネストモードでオプションが閉じている場合、オプションを開きます。それ以外の場合は、最初のチャイルドオプションにフォーカスを移動します。
左矢印	ネストモードでオプションが開いている場合、オプションを閉じます。それ以外の場合は、親オプションにフォーカスを移動します。
Home	サブメニュー内の最初のメニュー項目にフォーカスを移動します。
End	サブメニュー内の最後のメニュー項目にフォーカスを移動します。
印刷可能な文字	入力された文字で始まるラベルを持つメニュー項目にフォーカスを移動します。