快速撥號

當按下時，浮動操作按鈕可以顯示可以在頁面上執行的多個主要操作。

導入 #


import SpeedDial from 'primevue/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 將項目顯示在按鈕的四個角落之一。


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

工具提示 #

當獨立工具提示存在且目標與項目匹配時，項目會在懸停時顯示工具提示。


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

範本 #

快速撥號提供使用 item 範本的項目自訂功能，該範本從模型接收 menuitem 實例作為參數。按鈕有自己的 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>

協助工具 #

螢幕閱讀器

快速撥號元件會呈現一個原生按鈕元素，該元素隱式包含任何傳遞的屬性。可以使用 aria-labelledby 或 aria-label 屬性定義描述按鈕的文字。此外，按鈕還包含 aria-haspopup、aria-expanded 用於狀態，以及 aria-controls 來定義彈出視窗與按鈕之間的關係。

彈出覆蓋層在清單上使用 menu 角色，每個操作項目都有 menuitem 角色，並以 aria-label 作為選單項目標籤。選單的 ID 參照按鈕的 aria-controls。


<SpeedDial aria-label="Options" />

選單按鈕鍵盤支援

按鍵	功能
Enter	切換選單的可見性。
空格鍵	切換選單的可見性。
向下箭頭	開啟選單並將焦點移至第一個項目。
向上箭頭	開啟選單並將焦點移至最後一個項目。
向右箭頭	開啟選單並將焦點移至最後一個項目。
向左箭頭	開啟選單並將焦點移至第一個項目。
Esc	關閉選單。

選單鍵盤支援

按鍵	功能
Enter	啟動選單項目，關閉選單並將焦點設定在選單按鈕上。
空格鍵	啟動選單項目，關閉選單並將焦點設定在選單按鈕上。
Esc	關閉選單並將焦點設定在選單按鈕上。
方向鍵	在選單項目之間導覽。
Home	將焦點移至第一個項目。
End	將焦點移至最後一個項目。