スピードダイヤル

押すと、フローティングアクションボタンが、ページ上で実行できる複数の主要アクションを表示できます。

インポート # 


import SpeedDial from 'primevue/speeddial';

リニア #

SpeedDialのアイテムは、MenuModel APIに基づいたmodelプロパティで定義されます。アイテムのデフォルトの向きはリニアで、ボタンに対するアイテムの位置を定義するためにdirectionプロパティが使用されます。


<SpeedDial :model="items" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
<SpeedDial :model="items" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
<SpeedDial :model="items" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
<SpeedDial :model="items" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />

円 #

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


<SpeedDial :model="items" :radius="80" type="circle" :style="{ position: 'absolute' }" :buttonProps="{ severity: 'warn', rounded: true }" />

半円 #

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


<SpeedDial :model="items" :radius="80" type="semi-circle" direction="up" style="position: absolute; left: calc(50% - 2rem); bottom: 0" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="down" style="position: absolute; left: calc(50% - 2rem); top: 0" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="left" style="position: absolute; top: calc(50% - 2rem); right: 0" />
<SpeedDial :model="items" :radius="80" type="semi-circle" direction="right" style="position: absolute; top: calc(50% - 2rem); left: 0" />

四分円 #

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


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

Tooltip #

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


<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', right: 0, bottom: 0 }" :buttonProps="{ severity: 'help', rounded: true }" :tooltipOptions="{ position: 'left' }" />
<SpeedDial :model="items" direction="up" :style="{ position: 'absolute', left: 0, bottom: 0 }" :buttonProps="{ severity: 'danger', rounded: true }" :tooltipOptions="{ position: 'right' }" />

マスク #

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


<SpeedDial :model="items" direction="up" mask :style="{ position: 'absolute', right: '1rem', bottom: '1rem' }" />

テンプレート #

SpeedDialは、モデルからmenuitemインスタンスをパラメーターとして受け取るitemテンプレートでアイテムのカスタマイズを提供します。ボタンには独自のbuttonテンプレートがあり、デフォルトのボタンのアイコンコンテンツを埋め込むために、iconという名前の追加のスロットが提供されています。


<SpeedDial :model="items" direction="up" :transitionDelay="80" :style="{ position: 'absolute' }" pt:menuitem="m-2">
    <template #button="{ toggleCallback }">
        <Button outlined class="border" @click="toggleCallback">
            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="..." fill="var(--p-primary-color)" />
                <path d="..." fill="var(--p-text-color)" />
            </svg>
        </Button>
    </template>
    <template #item="{ item, toggleCallback }">
        <div class="flex flex-col items-center justify-between gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer" @click="toggleCallback">
            <span :class="item.icon" />
            <span>
                {{ item.label }}
            </span>
        </div>
    </template>
</SpeedDial>

アクセシビリティ #

スクリーンリーダー

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

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


<SpeedDial aria-label="Options" />

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

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

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

キー機能
Enterメニュー項目をアクティブにし、メニューを閉じ、メニューボタンにフォーカスを設定します。
Spaceメニュー項目をアクティブにし、メニューを閉じ、メニューボタンにフォーカスを設定します。
Escメニューを閉じ、メニューボタンにフォーカスを設定します。
矢印キーメニュー項目間を移動します。
Home最初の項目にフォーカスを移動します。
End最後の項目にフォーカスを移動します。
PrimeVue 3のPrimeVue 4.0.7 by PrimeTek