Toolbar

ツールバーは、ボタンやその他のコンテンツをグループ化するためのコンポーネントです。

インポート #


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などの追加プロパティを追加できます。

キーボードサポート

コンポーネントにはインタラクティブな要素が含まれていません。テンプレートを使用して任意のコンテンツを配置でき、内部のボタンなどの要素はページのタブシーケンスに従う必要があります。