工具列

工具列是一個用於按鈕和其他內容的分組元件。

導入 #


import Toolbar from 'primevue/toolbar';

基本 #

工具列提供 start、center 和 end 屬性，以便將內容放置在這些區段。


<Toolbar>
    <template #start>
        <Button icon="pi pi-plus" class="mr-2" severity="secondary" text />
        <Button icon="pi pi-print" class="mr-2" severity="secondary" text />
        <Button icon="pi pi-upload" severity="secondary" text />
    </template>

    <template #center>
        <IconField>
            <InputIcon>
                <i class="pi pi-search" />
            </InputIcon>
            <InputText placeholder="Search" />
        </IconField>
    </template>

    <template #end> <SplitButton label="Save" :model="items"></SplitButton></template>
</Toolbar>

自訂 #

具有導覽列功能的自訂工具列。


<Toolbar style="border-radius: 3rem; padding: 1rem 1rem 1rem 1.5rem">
    <template #start>
        <div class="flex items-center gap-2">
            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="..." fill="var(--p-text-color)" />
                <path d="..." fill="transparent" />
            </svg>
            <Button label="Files" text plain />
            <Button label="Edit" text plain />
            <Button label="View" text plain />
        </div>
    </template>

    <template #end>
        <div class="flex items-center gap-2">
            <Button label="Share" severity="contrast" size="small" />
            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" style="width: 32px; height: 32px" />
        </div>
    </template>
</Toolbar>

無障礙功能 #

螢幕閱讀器

工具列使用 toolbar 角色於根元素，aria-orientation 不包含在內，因為它預設為「水平」。任何有效的屬性都會傳遞到根元素，因此您可以根據需要新增其他屬性，例如 aria-labelledby 來定義元素。

鍵盤支援

元件不包含任何互動元素。可以使用樣板放置任意內容，並且內部的按鈕等元素應遵循頁面 tab 順序。