Tab panels are a way of displaying more information using less window real estate.
TIP
Works great along with QTabs but it is not required to be used with it.
QTabPanels API
QTabPanel API
Usage
TIP
- Works great along with QTabs, a component which offers a nice way to select the active tab panel to display.
- 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
Do not be mistaken by the “QTabPanels” component name. Panels do not require QTabs. They can be used as standalone too.
Keep Alive
- Please take notice of the Boolean
keep-aliveprop for QTabPanels, if you need this behavior. Do NOT use Vue’s native<keep-alive>component over QTabPanel. - Should you need the
keep-alive-includeorkeep-alive-excludeprops then the QTabPanelnames must be valid Vue component names (no spaces allowed, don’t start with a number etc).
Basic
With QTabs
TIP
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
With vertical QTabs and QSplitter
For a full list of transitions, please check out 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.