工具栏
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-card
中使用时继承边框半径
指定v-navigation-drawer
应用程序在工具栏的左侧被剪切
指定v-navigation-drawer
应用程序在工具栏的右侧被剪切
将指定的色彩应用与控件
应用暗黑主题变体
减小工具栏内容和扩展的高度
强制工具栏生成扩展名而不使用插槽
Components.Toolbars.
给元素设置固定定位
移除工具栏的盒子阴影
使工具栏内联浮动
为工具栏指定一个特定的高度
Components.Toolbars.
应用明亮主题变体
手动应用滚动屏幕功能
增加工具栏内容和扩展的高度
当向下滚动时工具栏会过渡到屏幕外。
为滚动屏幕指定滚动目标
工具栏使用滚动屏幕之前滚动的距离
Components.Toolbars.
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,这也是移动设备横向定位的默认行为。
滚动屏幕
滚动时,工具栏可以过渡到屏幕之外,这里我们演示如何指定滚动目标(默认是窗口)。请记住,在这个例子中,有一些特殊的标记在您的应用程序中不需要。
应用程序栏与菜单
您可以将菜单组件添加到工具栏。
系统栏——状态/窗口
系统栏对于移动设备和桌面上的通知图标很有用,对于现场示例,请前往预定义的布局。