仪表盘工具栏
一个子导航栏,用于在您的仪表盘面板中添加操作。
用法
该 DashboardToolbar
组件充当一个子导航栏,具有预定义的高度,与 DashboardSidebar 甚至 Table 行的 #header
槽位完全匹配。
您可以使用 #default
或者 #left
和 #right
槽位在工具栏中添加操作。
在里面放任何您想要的东西,例如 HorizontalNavigation 组件。
<script setup lang="ts">
const links = [[{
label: 'General',
icon: 'i-heroicons-user-circle'
}, {
label: 'Members',
icon: 'i-heroicons-user-group'
}, {
label: 'Notifications',
icon: 'i-heroicons-bell'
}], [{
label: 'Documentation',
icon: 'i-heroicons-book-open',
to: 'https://ui.nuxtjs.org.cn/pro',
target: '_blank'
}, {
label: 'Buy now',
icon: 'i-heroicons-ticket',
to: 'https://ui.nuxtjs.org.cn/pro/pricing',
target: '_blank'
}]]
</script>
<template>
<UDashboardToolbar class="py-0 px-1.5 overflow-x-auto">
<UHorizontalNavigation :links="links" />
</UDashboardToolbar>
</template>
该 DashboardToolbar
通常放置在 DashboardPanel 的 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>
槽位
默认
{}
左
{}
右
{}
属性
ui
DeepPartial<{ wrapper: string; container: string; left: string; right: string; }>
{}
配置
{
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'
}