选项卡

选项卡是一种使用较少的窗口空间显示更多信息的方法。 本页通过QTab、QTab和QRouteTab描述选项卡选择部分。

该组件的一种常见用例是在布局的页眉/页脚中。 请参考布局页眉和页脚以获得参考。

TIP

QTabPanels配合使用,这是一个严格指向面板(选项卡内容)本身的组件。

安装

从下面的列表中仅选择您正在使用的内容。

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

WARNING

QRouteTab不会也不能与UMD版本一起使用,因为在那种环境下您没有Vue Router。

用法

TIP

当宽度大于容器宽度时,QTab可以水平滚动。 相应地调整您的浏览器以查看此操作。 在桌面上,您将在两边看到可以点击的V形图案。 在手机上,您可以用手指平移选项卡。

基础

Basic

垂直

Vertical (example with QSplitter)

稠密

Dense

个别颜色

Individual colors

波纹

No ripple and custom ripple color

自定义指标

In the examples below, please notice the last two QTabs: indicator at top and no indicator.

Custom indicator

选项通知

Tab notifications

对齐

当容器宽度(而非窗口宽度)大于配置的断点时,QTab会做出响应,并且align属性(请参见下文)变为活动状态。 为了进行演示,下面的选项卡禁用了断点。

Alignment

在下面示例的第二个QTab中,如果窗口宽度小于1024px,则“Movies”和“Photos”标签将替换为“"More…”下拉菜单。

带下拉菜单

With a dropdown

在QToolbar上

注意,我们需要指定shrink属性。 默认情况下,QTabs尝试扩展到所有可用的水平空间,但是在这种情况下,我们将其用作QToolbar的子元素,因此我们不希望这样做。

Tabs in a QToolbar

动态更新

Dynamic tabs

与QTabsPanel一起使用

TIP

QTabPanels也可以独立使用。 它们不依赖于QTab的存在。 而且,它们可以放置在页面中的任何位置,而不仅仅是QTabs附近。

Tabs with tab panels

更多信息: Tab Panels.

连接Vue Router

您可以通过QRouteTab组件将选项卡与Vue Router一起使用。 这个组件继承了QTab的所有东西,但是它也绑定了router-link属性。 这些允许监听当前的应用路由,并在单击/点击时触发路由。

<q-tabs>
  <q-route-tab
    icon="mail"
    to="/mails"
    exact
  />
  <q-route-tab
    icon="alarm"
    to="/alarms"
    exact
  />
</q-tabs>

WARNING

QRouteTab会根据您的应用路由变为“激活”状态,而不是取决于v-model。 因此,v-model的初始值或直接更改v-model也不会更改您的应用路由。

QTabs API

Loading API...
Please wait...

QTab API

Loading API...
Please wait...

QRouteTab API

Loading API...
Please wait...