SplitButton

SplitButton は、デフォルトのアクション項目を持つオーバーレイに一連のコマンドをグループ化します。

インポート#


import { SplitButton } from 'primereact/splitbutton';

基本#

SplitButton には、デフォルトのアクションボタンと、MenuModel API に基づく model プロパティによって定義された追加オプションのコレクションがあります。


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

ローディング#


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

サイズ#

SplitButton は、標準の代替として、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" />

テンプレート#

SplitButton には、メインボタンを定義できる label および icon プロパティがあります。


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

アクセシビリティ#

スクリーンリーダー

SplitButton コンポーネントは、2 つのネイティブボタン要素をレンダリングします。メインボタンは、デフォルトで aria-label を定義するために 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	ボタンをアクティブ化します。
space	ボタンをアクティブ化します。

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

キー	機能
enter	メニューの表示/非表示を切り替えます。
space	メニューの表示/非表示を切り替えます。
下矢印	メニューを開き、最初の項目にフォーカスを移動します。
上矢印	メニューを開き、最後の項目にフォーカスを移動します。

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

キー	機能
enter	メニュー項目をアクティブ化し、メニューを閉じ、メニューボタンにフォーカスを設定します。
escape	メニューを閉じ、メニューボタンにフォーカスを設定します。
下矢印	フォーカスを次の項目に移動します。最後の項目の場合は、最初の項目がフォーカスを受けます。
上矢印	フォーカスを前の項目に移動します。最初の項目の場合は、最後の項目がフォーカスを受けます。
home	最初の項目にフォーカスを移動します。
end	最後の項目にフォーカスを移動します。