Skip to content

Latest commit

 

History

History
74 lines (46 loc) · 2.11 KB

tab-panels.md

File metadata and controls

74 lines (46 loc) · 2.11 KB
title desc related
Tab Panels
The QTabPanel Vue component is a way of displaying more information using less window real estate.
/vue-components/tabs

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

Usage

::: tip Works great along with QTabs, a component which offers a nice way to select the active tab panel to display. :::

::: warning IMPORTANT Do not be mistaken by the "QTabPanels" component name. Panels do not require QTabs. They can be used as standalone too. :::

::: danger 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. :::

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

QTabPanels API

QTabPanel API