スピードダイヤル

スピードダイヤルは、ポップアップメニュー付きのフローティングボタンです。

インポート#


import { SpeedDial } from 'primereact/speeddial';

直線#

スピードダイヤルのアイテムは、MenuModel APIに基づいてmodelプロパティで定義されます。アイテムのデフォルトの方向は直線で、ボタンに対するアイテムの位置を定義するためにdirectionプロパティが使用されます。


<Toast ref={toast} />
<SpeedDial model={items} direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
<SpeedDial model={items} direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
<SpeedDial model={items} direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
<SpeedDial model={items} direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />

円#

typeをcircleに設定すると、アイテムをボタンの周りに表示できます。追加のradiusプロパティは円の半径を定義します。


<Toast ref={toast} />
<SpeedDial model={items} radius={80} type="circle" buttonClassName="p-button-warning" />

半円#

typeをsemi-circleと定義すると、アイテムはボタンの周りの半円に表示されます。


<Toast ref={toast} />
<SpeedDial model={items} radius={80} type="semi-circle" direction="up" style={{ left: 'calc(50% - 2rem)', bottom: 0 }} />
<SpeedDial model={items} radius={80} type="semi-circle" direction="down" style={{ left: 'calc(50% - 2rem)', top: 0 }} />
<SpeedDial model={items} radius={80} type="semi-circle" direction="left" style={{ top: 'calc(50% - 2rem)', right: 0 }} />
<SpeedDial model={items} radius={80} type="semi-circle" direction="right" style={{ top: 'calc(50% - 2rem)', left: 0 }} />

四分円#

typeをquarter-circleとして設定すると、directionに基づいてボタンの4つの角のいずれかにアイテムが表示されます。


<Toast ref={toast} />
<SpeedDial model={items} radius={120} type="quarter-circle" direction="up-left" style={{ right: 0, bottom: 0 }} />
<SpeedDial model={items} radius={120} type="quarter-circle" direction="up-right" style={{ left: 0, bottom: 0 }} />
<SpeedDial model={items} radius={120} type="quarter-circle" direction="down-left" style={{ right: 0, top: 0 }} />
<SpeedDial model={items} radius={120} type="quarter-circle" direction="down-right" style={{ left: 0, top: 0 }} />

ツールチップ#

スタンドアロンのTooltipがアイテムと一致するターゲットとともに存在する場合、アイテムはホバー時にツールチップを表示します。


<Toast ref={toast} />
<Tooltip target=".speeddial-bottom-right .p-speeddial-action" position="left" />
<SpeedDial model={items} direction="up" className="speeddial-bottom-right right-0 bottom-0" buttonClassName="p-button-danger" />

<Tooltip target=".speeddial-bottom-left .p-speeddial-action" />
<SpeedDial model={items} direction="up" className="speeddial-bottom-left left-0 bottom-0" buttonClassName="p-button-help" />

マスク#

maskプロパティを追加すると、ポップアップアイテムの後ろにモーダルレイヤーが表示されます。


<Toast ref={toast} />
<SpeedDial mask model={items} radius={120} direction="up" style={{ right: 0, bottom: 0 }} />

カスタム#

アウトラインボタン、カスタムアイコン、transitionDelayを使用したスピードダイヤルのサンプル。


<Toast ref={toast} />
<SpeedDial model={items} direction="up" transitionDelay={80} showIcon="pi pi-bars" hideIcon="pi pi-times" buttonClassName="p-button-outlined" />

アクセシビリティ#

スクリーンリーダー

スピードダイヤルコンポーネントは、渡されたすべてのプロップを暗黙的に含むネイティブボタン要素をレンダリングします。ボタンを説明するテキストは、aria-labelledbyまたはaria-labelプロップで定義できます。さらに、ボタンには、ポップアップとボタンの関係を定義するためのaria-haspopup、状態を表すaria-expanded、aria-controlsが含まれます。

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


<SpeedDial aria-label="Options" />

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

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

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

キー	機能
enter	メニューアイテムをアクティブにし、メニューを閉じ、メニューボタンにフォーカスを設定します。
escape	メニューを閉じ、メニューボタンにフォーカスを設定します。
矢印キー	メニューアイテム間を移動します。
home	最初のアイテムにフォーカスを移動します。
end	最後のアイテムにフォーカスを移動します。