标签面板 | Quasar 中文网

标签面板

标签面板是一种使用更少窗口空间显示更多信息的方式。

¥Tab panels are a way of displaying more information using less window real estate.

提示

与 QTabs 配合使用效果极佳，但并非必须使用。

¥Works great along with QTabs but it is not required to be used with it.

用法(Usage)

¥Usage

提示

与 QTabs 配合使用效果极佳，QTabs 组件提供了一种选择要显示的活动选项卡面板的好方法。
¥Works great along with QTabs, a component which offers a nice way to select the active tab panel to display.
如果 QTabpanel 内容中也包含图片，并且你想使用滑动操作进行导航，则可能需要为其添加 draggable="false"，否则原生浏览器的行为可能会产生负面影响。
¥If the QTabpanel content also has images and you want to use swipe actions to navigate, you might want to add draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.

IMPORTANT

不要被 “QTabPanels” 组件名称搞错。面板不需要 QTabs。它们也可以独立使用。

¥Do not be mistaken by the “QTabPanels” component name. Panels do not require QTabs. They can be used as standalone too.

Keep Alive

如果你需要此行为，请注意 QTabPanels 的布尔值 keep-alive 属性。请勿在 QTabPanel 上使用 Vue 原生的 <keep-alive> 组件。
¥Please take notice of the Boolean keep-alive prop for QTabPanels, if you need this behavior. Do NOT use Vue’s native <keep-alive> component over QTabPanel.
如果你需要 keep-alive-include 或 keep-alive-exclude 属性，则 QTabPanel name 必须是有效的 Vue 组件名称（不允许有空格，不能以数字开头等）。
¥Should you need the keep-alive-include or keep-alive-exclude props then the QTabPanel names must be valid Vue component names (no spaces allowed, don’t start with a number etc).

基本(Basic)

¥Basic

使用 QTabs(With QTabs)

¥With QTabs

提示

QTabPanels 也可以独立使用。它们不依赖于 QTabs 的存在。此外，它们可以放置在页面内的任何位置，而不仅仅是 QTabs 附近。

¥QTabPanels can be used as standalone too. They do not depend on the presence of a QTabs. Also, they can be placed anywhere within a page, not just near QTabs.

着色(Coloring)

¥Coloring

带垂直 QTabs 和 QSplitter(With vertical QTabs and QSplitter)

¥With vertical QTabs and QSplitter

要查看转换的完整列表，请查看过渡效果。

¥For a full list of transitions, please check out Transitions.

自定义过渡(Custom transitions)

¥Custom transitions

在下面的示例中，使用鼠标在面板之间滑动，或者，如果在支持触控的设备上，用手指滑动。

¥In the example below, use your mouse to swipe through the panels or, if on a touch capable device, swipe with your fingers.

可滑动和无限滚动(Swipeable and infinite)

¥Swipeable and infinite

垂直可滑动和无限滑动(Vertical swipeable and infinite)

¥Vertical swipeable and infinite

1. Introduction

2. QTabPanels API

3. QTabPanel API

4. 用法(Usage)

4.1. 基本(Basic)

4.2. 使用 QTabs(With QTabs)

4.3. 着色(Coloring)

4.4. 带垂直 QTabs 和 QSplitter(With vertical QTabs and QSplitter)

4.5. 自定义过渡(Custom transitions)

4.6. 可滑动和无限滚动(Swipeable and infinite)

4.7. 垂直可滑动和无限滑动(Vertical swipeable and infinite)