选项卡面板

选项卡面板是一种使用更少的窗口空间显示更多信息的方法。

TIP

QTabs一起使用时效果很好,但不需要与它一起使用。

QTabPanels API

Loading API...

QTabPanel API

Loading API...

用法

TIP

  • QTabs配合使用非常好,该组件提供了一种选择要显示的活动选项卡面板的好方法。
  • 如果QTabpanel内容也包含图像,并且您希望使用滑动操作进行导航,则可能需要将draggable="false"添加到图像中,否则本地浏览器行为可能会以负面方式干扰图像。

重要

不要被“QTabPanels”组件名称误解了。 面板不需要QTab。 它们也可以独立使用。

Keep Alive

  • 如果需要这种行为,请注意QTabPanels的布尔值keep-alive属性。 不要在QTabPanel上使用Vue的原生<keep-alive>组件。
  • 如果需要keep-alive-includekeep-alive-exclude属性,那么QTabPanel的name必须是有效的Vue组件名称(不允许空格,不要以数字等开头)。

基础

Basic



使用QTab

TIP

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

With QTabs



A more complex example



着色

Coloring



带有垂直QTab和QSplitter

With vertical QTabs and QSplitter



有关过渡的完整列表,请查看过渡.

自定义过渡

Custom transition examples



在下面的示例中,使用鼠标在面板上滑动,或者在具有触摸功能的设备上,用手指滑动。

可滑动和无限

Swipeable and infinite



垂直可滑动和无限

Vertical swipeable and infinite