# Toolbars(工具栏)

The v-toolbar component is pivotal to any graphical user interface (GUI), as it generally is the primary source of site navigation. 工具栏组件与v-navigation-drawerv-card 配合使用非常有效。

# 使用

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

# API

# 注意

# 示例

# 属性

# 背景

工具栏可以使用 src 属性显示背景而不是纯色。 这可以通过使用 img 插槽并提供您自己的v-img组件来修改。 可以使用v-app-bar使背景淡入淡出

# 折叠

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

# 紧凑工具栏

紧凑工具栏将其高度降低到 48px。 当与 prominent prop 同时使用时,将会将高度降低到 96px

# 扩展

工具栏可以在不使用 扩展 插槽的情况下扩展。

# 扩展高度

扩展的高度可以定制。

# 搜索时浮动

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

# 浅色和深色

工具栏有 2 种变体,浅色和深色。 浅色工具栏具有深色按钮和深色文本,而深色工具栏具有白色按钮和白色文本。

# 突出的工具栏

突出的工具栏将 v-toolbar 的高度增加到 128px ,并将 v-toolbar-title 放置到容器底部。 This is expanded upon in v-app-bar with the ability to shrink a prominent toolbar to a dense or short one.

# 其他

# 上下文操作栏

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

# 灵活的卡片工具栏

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

# 变量

v-toolbar 有多个变量,可以应用主题和辅助类。 这些主题包括浅色和深色的主题、彩色和透明。

了解更多?

继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:11/12/2024, 6:59:50 AM