Looking forQuasar v2 beta(Vue 3) docs?
Tab Panels
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.
Installation
/*
* No installation step is necessary.
* It gets installed by default by @quasar/app v2+.
*/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.
Swipeable and infinite
Vertical swipeable and infinite v1.9+
QTabPanels API
QTabPanel API
Related
Ready for more?