Persona

Appearance

On this page

Tabs ​

Base tab menus.

Usage ​

Basic Usage ​

Home page content
preview
vue
<template>
  <p-tabs>
    <p-tab title="Home">Home page content</p-tab>
    <p-tab title="Profile">Profile page content</p-tab>
    <p-tab title="Setting" disabled>Setting page content</p-tab>
  </p-tabs>
</template>

Variants ​

Navigation of tabs has 3 variants, tabs, pills and lines. Default is pills

Home page content
Home page content
Home page content
preview
vue
<template>
  <p-tabs variant="tabs">
    <p-tab title="Home">Home page content</p-tab>
    <p-tab title="Profile">Profile page content</p-tab>
    <p-tab title="Setting" disabled>Setting page content</p-tab>
  </p-tabs>
  <p-tabs variant="pills">
    <p-tab title="Home">Home page content</p-tab>
    <p-tab title="Profile">Profile page content</p-tab>
    <p-tab title="Setting" disabled>Setting page content</p-tab>
  </p-tabs>
  <p-tabs variant="lines">
    <p-tab title="Home">Home page content</p-tab>
    <p-tab title="Profile">Profile page content</p-tab>
    <p-tab title="Setting" disabled>Setting page content</p-tab>
  </p-tabs>
</template>

Fill & Justify ​

Tabs can be fullwidth. There are 2 options available: fill and justified. To proportionately fill all available space, choose fill. When need every nav item will be the same width, choose justified.

Home page content
Home page content
preview
vue
<template>
  <p-tabs fill>
    <p-tab title="Home">Home page content</p-tab>
    <p-tab title="Profile">Profile page content</p-tab>
    <p-tab title="Setting" disabled>Setting page content</p-tab>
  </p-tabs>
  <p-tabs justified>
    <p-tab title="Home">Home page content</p-tab>
    <p-tab title="Profile">Profile page content</p-tab>
    <p-tab title="Setting" disabled>Setting page content</p-tab>
  </p-tabs>
</template>

Alignment ​

To align Tabs, use align prop. Available value are left, right and center. The center align just working in horizontal Tabs.

Home page content
Home page content
Home page content
preview
vue
<template>
  <p-tabs align="left">
    <p-tab title="Home">Home page content</p-tab>
    <p-tab title="Profile">Profile page content</p-tab>
    <p-tab title="Setting" disabled>Setting page content</p-tab>
  </p-tabs>
  <p-tabs align="center">
    <p-tab title="Home">Home page content</p-tab>
    <p-tab title="Profile">Profile page content</p-tab>
    <p-tab title="Setting" disabled>Setting page content</p-tab>
  </p-tabs>
  <p-tabs align="right">
    <p-tab title="Home">Home page content</p-tab>
    <p-tab title="Profile">Profile page content</p-tab>
    <p-tab title="Setting" disabled>Setting page content</p-tab>
  </p-tabs>
</template>

With Icon & Badge ​

Icon ​

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born
preview
vue
<template>
  <p-tabs>
    <p-tab>
      <template #icon>
        <IconEdit />
      </template>
      But I must explain to you how all this mistaken idea of
      denouncing pleasure and praising pain was born
    </p-tab>
    <p-tab>
      <template #icon>
        <IconView />
      </template>
      A wonderful serenity has taken possession of my entire soul,
      like these sweet mornings
    </p-tab>
    <p-tab disabled>
      <template #icon>
        <IconDocument />
      </template>
      One morning, when Gregor Samsa woke from troubled dreams,
      he found himself transformed
    </p-tab>
  </p-tabs>
</template>
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed
preview
vue
<template>
  <p-tabs>
    <p-tab>
      <template #icon>
        <IconEdit />
      </template>
      <template #title>
        Edit
      </template>
      One morning, when Gregor Samsa woke from troubled dreams,
      he found himself transformed
    </p-tab>
    <p-tab>
      <template #icon>
        <IconView />
      </template>
      <template #title>
        View
      </template>
      A wonderful serenity has taken possession of my entire soul,
      like these sweet mornings
    </p-tab>
    <p-tab disabled>
      <template #icon>
        <IconDocument />
      </template>
      <template #title>
        Setting
      </template>
      But I must explain to you how all this mistaken idea of denouncing
      pleasure and praising pain was born
    </p-tab>
  </p-tabs>
</template>

Badge ​

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born
preview
vue
<template>
  <p-tabs>
    <p-tab>
      <template #title>
        To Sign <p-badge color="info">25</p-badge>
      </template>
      But I must explain to you how all this mistaken idea
      of denouncing pleasure and praising pain was born
    </p-tab>
    <p-tab>
      <template #title>
        To Review <p-badge color="info">25</p-badge>
      </template>
      One morning, when Gregor Samsa woke from troubled dreams,
      he found himself transformed
    </p-tab>
  </p-tabs>
</template>
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed
preview
vue
<template>
  <p-tabs justified>
    <p-tab>
      <template #icon>
        <IconEdit />
      </template>
      <template #title>
        To Sign <p-badge color="info" variant="light">25</p-badge>
      </template>
      One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed
    </p-tab>
    <p-tab>
      <template #icon>
        <IconView />
      </template>
      <template #title>
        To Review <p-badge color="info" variant="light">25</p-badge>
      </template>
      A wonderful serenity has taken possession of my entire soul, like these sweet mornings
    </p-tab>
  </p-tabs>
</template>

Vertical ​

The available alignment in vertical Tabs is just left and right

One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head
preview
vue
<template>
  <p-tabs vertical nav-wrapper-class="w-48">
    <p-tab title="Home">
      One morning, when Gregor Samsa woke from troubled dreams,
      he found himself transformed in his bed into a horrible vermin.
      He lay on his armour-like back, and if he lifted his head
    </p-tab>
    <p-tab title="Profile">
      But I must explain to you how all this mistaken idea of
      denouncing pleasure and praising pain was born and I will
      give you a complete account of the system,
    </p-tab>
    <p-tab title="Setting" disabled>
      Far far away, behind the word mountains, far from
      the countries Vokalia and Consonantia, there live the
      blind texts. Separated they live in Bookmarksgrove right
    </p-tab>
  </p-tabs>
</template>
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head
preview
vue
<template>
  <p-tabs vertical nav-wrapper-class="w-48" align="right">
    <p-tab title="Home">
      One morning, when Gregor Samsa woke from troubled dreams,
      he found himself transformed in his bed into a horrible vermin.
      He lay on his armour-like back, and if he lifted his head
    </p-tab>
    <p-tab title="Profile">
      But I must explain to you how all this mistaken idea of
      denouncing pleasure and praising pain was born and I will
      give you a complete account of the system,
    </p-tab>
    <p-tab title="Setting" disabled>
      Far far away, behind the word mountains, far from
      the countries Vokalia and Consonantia, there live the
      blind texts. Separated they live in Bookmarksgrove right
    </p-tab>
  </p-tabs>
</template>

Binding v-model ​

You can binding current active with v-model

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system,
preview

Active :

1
vue
<template>
  <p-tabs v-model="active">
    <p-tab title="Home">
      One morning, when Gregor Samsa woke from troubled dreams,
      he found himself transformed in his bed into a horrible vermin.
      He lay on his armour-like back, and if he lifted his head
    </p-tab>
    <p-tab title="Profile">
      But I must explain to you how all this mistaken idea of
      denouncing pleasure and praising pain was born and I will
      give you a complete account of the system,
    </p-tab>
    <p-tab title="Setting" disabled>
      Far far away, behind the word mountains, far from
      the countries Vokalia and Consonantia, there live the
      blind texts. Separated they live in Bookmarksgrove right
    </p-tab>
  </p-tabs>
</template>

Variables ​

Tabs use local CSS variables for enhanced real-time customization.

sass
--p-tabs-content-padding-x: theme(spacing.6);
--p-tabs-content-padding-y: theme(spacing.6); // for vertical variant

API ​

Props <p-tabs> ​

PropsTypeDefaultDescription
variantStringpillsTabs navigation variant, valid value is pills, lines and tabs
fillBooleanfalseActivate fullwidth Tabs navigation with fill type
justifiedBooleanfalseActivate fullwidth Tabs navigation with justified type
alignStringleftTabs navigation alignment, valid value is left, center, and right
verticalBooleanfalseActivate vertical Tabs
nav-wrapper-classStringundefinedClass to place in the navigation wrapper
v-modelNumber0Set default active tab according to tab index

Slots <p-tabs> ​

NameDescription
defaultContent to place in the Nav

Props <p-tab> ​

PropsTypeDefaultDescription
titleStringundefinedPlace content in the Tab title
disabledBooleanfalseDisable tab functionality and place it in disabled state

Slots <p-tab> ​

NameDescription
defaultContent to place in the Tab
iconContent to place icon in Tab navigation
titleContent to place icon in Tab title

Events ​

NameArgumentsDescription
There no event here

Released under the MIT License.

Copyright © 2022 Privy Identitas Digital