Vuetify

商店

企业版

v-toolbar 组件对于任何 gui 都是至关重要的,因为它通常是站点导航的主要来源。工具栏组件与 v-navigation-drawerv-card 配合使用效果非常好。

工具栏是一个灵活的容器,可以通过多种方式使用。 默认情况下,工具栏在桌面上的高度为 64px,在移动设备上的高度为 56px。 工具栏上有许多辅助组件可供使用。v-toolbar-title 用于显示标题, v-toolbar-items 允许 v-btn 扩展整个高度。

Options

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

突出的工具栏将 v-toolbar' 的高度增加到 _128px_,并将 v-toolbar-title 放置在容器的底部。 这在 v-app 中进行了扩展,能够将 prominent 工具栏缩小为 denseshort

密集工具栏降低其高度未48px,这也是移动设备横向定位的默认行为。

工具栏有两个变种,明亮和暗黑。明亮工具栏有深色的按钮和黑暗的文字,而暗黑工具栏有白色的按钮和白色的文字。

一个应用程序栏有多个可以应用主题和辅助类的变种,范围从明亮和暗黑的主题、色彩和透明度。

工具栏可以显示背景,而不是纯色。 可以通过使用 img 插槽并提供您自己的 v-img 组件来进行修改。 可以使用 v-app-bar 淡化背景。

无需使用 extension 插槽即可扩展工具栏。

扩展的高度可以定制。

可以折叠工具栏以节省屏幕空间。

在本例中,我们使用 extended 属性将卡片偏移到工具栏的扩展内容区域。

浮动工具栏被转换成内联元素,只占用所需的空间。这在将工具栏放置在内容上时特别有用。

可以根据应用程序状态的变化更新工具栏的外观。在本例中,工具栏的颜色和内容根据用户在 v-select 中的选择而变化。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!