DashboardToolbar
A sub-navbar to add actions to your DashboardPanel.
Usage
The DashboardToolbar component acts as a sub-navbar with a pre-defined height matching exactly the #header slot of a DashboardSidebar or even a Table row.
You can either use the #default or the #left and #right slots to add actions to the toolbar.
Put anything you like inside, for example an HorizontalNavigation component.
{
"message": "You should use slots with <ContentRenderer>",
"value": {},
"excerpt": false,
"tag": "div"
}The DashboardToolbar is generally placed inside a DashboardPanel under the DashboardNavbar.
pages/users.vue
<template>
<UDashboardPage>
<UDashboardPanel>
<UDashboardNavbar title="Users" />
<UDashboardToolbar>
<template #left>
<USelectMenu icon="i-heroicons-check" placeholder="Status" multiple />
<USelectMenu icon="i-heroicons-map-pin" placeholder="Location" multiple />
</template>
<template #right>
<USelectMenu label="Display" icon="i-heroicons-computer-desktop" multiple />
</template>
</UDashboardToolbar>
</UDashboardPanel>
</UDashboardPage>
</template>
Slots
default
{}
left
{}
right
{}
Props
ui
DeepPartial<{ wrapper: string; container: string; left: string; right: string; }>
{}Config
{
wrapper: 'min-h-[49px] flex-shrink-0 flex items-center border-b border-gray-200 dark:border-gray-800 px-4 py-2 gap-x-4',
container: 'flex items-center justify-between flex-1 gap-x-1.5',
left: 'flex items-stretch gap-1.5',
right: 'flex items-stretch gap-1.5'
}