选项卡面板是一种使用较少窗口空间显示更多信息的方式。
TIP
与 QTabs 配合使用效果很好,但不要求必须与其一起使用。
QTabPanels API
QTabPanel API
用法
TIP
- 与 QTabs 配合使用效果很好,这是一个提供选择要显示的活动选项卡面板的好方法。
- 如果 QTabpanel 内容也有图像,并且您想使用滑动操作进行导航,您可能需要为它们添加
draggable="false",否则原生浏览器行为可能会产生负面干扰。
重要
不要被 “QTabPanels” 组件名称误导。面板不需要 QTabs。它们也可以独立使用。
Keep Alive
- 请注意 QTabPanels 的布尔属性
keep-alive,如果您需要此行为。不要在 QTabPanel 上使用 Vue 的原生<keep-alive>组件。 - 如果您需要
keep-alive-include或keep-alive-exclude属性,则 QTabPanel 的name必须是有效的 Vue 组件名称(不允许有空格,不要以数字开头等)。
基础
与 QTabs 一起使用
TIP
QTabPanels 也可以独立使用。它们不依赖于 QTabs 的存在。此外,它们可以放置在页面内的任何位置,而不仅仅是在 QTabs 附近。
颜色
与垂直 QTabs 和 QSplitter 一起使用
有关过渡的完整列表,请查看过渡。
自定义过渡
在下面的示例中,使用鼠标滑动面板,或者如果在触摸设备上,用手指滑动。