工具栏

工具栏是按钮和其他内容的分组组件。

导入 #


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 以在需要时定义元素。

键盘支持

组件不包含任何交互元素。可以使用模板放置任意内容，并且内部的按钮等元素应遵循页面选项卡顺序。