工具栏

v-toolbar组件对于任何GUI都很重要,因为它通常是网站导航的主要来源。工具栏组件可以与导航抽屉一起很好地工作,用于隐藏链接并呈现激活器以在移动设备上打开侧边栏。

用例

A toolbar is a flexible container that can be utilized in a number of ways. By default, the toolbar is 64px high on desktop, 56px high on mobile portrait and 48px high on mobile landscape. There are a number of helper components available to use with the toolbar. These are v-toolbar-side-icon, v-toolbar-title and v-toolbar-items.

API

v-toolbar
名称
absolute
默认值
false
类型
boolean

给元素设置绝对定位

名称
app
默认值
false
类型
boolean

指定组件作为应用程序布局的一部分,用于动态调整内容的大小

名称
card
默认值
false
类型
boolean

v-card中使用时继承边框半径

名称
clipped-left
默认值
false
类型
boolean

指定v-navigation-drawer应用程序在工具栏的左侧被剪切

名称
clipped-right
默认值
false
类型
boolean

指定v-navigation-drawer应用程序在工具栏的右侧被剪切

名称
color
默认值
undefined
类型
string

将指定的色彩应用与控件

名称
dark
默认值
false
类型
boolean

应用暗黑主题变体

名称
dense
默认值
false
类型
boolean

减小工具栏内容和扩展的高度

名称
extended
默认值
false
类型
boolean

强制工具栏生成扩展名而不使用插槽

名称
extension-height
默认值
undefined
类型
number | string

Components.Toolbars.

名称
fixed
默认值
false
类型
boolean

给元素设置固定定位

名称
flat
默认值
false
类型
boolean

移除工具栏的盒子阴影

名称
floating
默认值
false
类型
boolean

使工具栏内联浮动

名称
height
默认值
undefined
类型
number | string

为工具栏指定一个特定的高度

名称
inverted-scroll
默认值
false
类型
boolean

Components.Toolbars.

名称
light
默认值
false
类型
boolean

应用明亮主题变体

名称
manual-scroll
默认值
false
类型
boolean

手动应用滚动屏幕功能

名称
prominent
默认值
false
类型
boolean

增加工具栏内容和扩展的高度

名称
scroll-off-screen
默认值
false
类型
boolean

当向下滚动时工具栏会过渡到屏幕外。

名称
scroll-target
默认值
undefined
类型
string

为滚动屏幕指定滚动目标

名称
scroll-threshold
默认值
300
类型
number

工具栏使用滚动屏幕之前滚动的距离

名称
scroll-toolbar-off-screen
默认值
false
类型
boolean

Components.Toolbars.

名称
tabs
默认值
false
类型
boolean

Components.Toolbars.

示例

应用程序栏

应用程序栏是应用程序主要的主要工具栏,它可以包含图标、菜单等等。

App bar with items

Utilizing the v-toolbar-items component you can use regular v-btn components to create app bar items. Don't forget to apply the flat prop to each button.

带扩展的应用程序栏

扩展可以用来创建更突出的栏,如果标题放置在扩展内,它将自动移到右侧,与主栏中的正常位置相匹配。

具有层次结构的列宽

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

灵活的工具栏和卡片工具栏

通过一些自定义样式,您可以轻松创建令人惊叹的用户界面。

搜索时浮动

可以将浮动工具栏放置在其引用的内容上。

变体

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

突出的工具栏

突出的工具栏添加了一个插槽,你可以在扩展区域放置元素,内容和扩展区域将被锁定到64x的高度。

密集的工具栏

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

滚动屏幕

滚动时,工具栏可以过渡到屏幕之外,这里我们演示如何指定滚动目标(默认是窗口)。请记住,在这个例子中,有一些特殊的标记在您的应用程序中不需要。

应用程序栏与菜单

您可以将菜单组件添加到工具栏。

系统栏——状态/窗口

系统栏对于移动设备和桌面上的通知图标很有用,对于现场示例,请前往预定义的布局。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore