Tabs

The v-tabs component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.

Basic

The v-tabs component is used for hiding content behind a selectable item.

Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears. Pudding candy canes sugar plum cookie chocolate cake powder croissant.

Stacked

Using stacked prop you can have buttons that use both icons and text.

Biscuit cheesecake gingerbread oat cake tiramisu. Marzipan tiramisu jelly-o muffin biscuit jelly cake pie. Chocolate cookie candy croissant brownie cupcake powder cheesecake. Biscuit sesame snaps biscuit topping tiramisu croissant.

Vertical

The vertical prop allows for v-tab components to stack vertically.

Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero.

Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et, tincidunt eget.

Alignment

Use align-tabs prop to change the tabs alignment.

Custom Icons

prev-icon and next-icon props can be used for applying custom pagination icons.

Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears. Pudding candy canes sugar plum cookie chocolate cake powder croissant.

Fixed

The fixed-tabs prop forces v-tab to take up all available space up to the maximum width (300px).

hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer. Gummies sweet brownie brownie marshmallow chocolate cake pastry. Topping macaroon shortbread liquorice dragée macaroon.

Grow

The grow prop will make the tab items take up all available space with no limit.

hortbread chocolate bar marshmallow bear claw tiramisu chocolate cookie wafer. Gummies sweet brownie brownie marshmallow chocolate cake pastry. Topping macaroon shortbread liquorice dragée macaroon.

Programmatic Navigation

Chocolate cake marshmallow toffee sweet caramels tootsie roll chocolate bar. Chocolate candy lemon drops cupcake macaroon liquorice. Icing tiramisu cake pastry jujubes lollipop gummies sugar plum pie.

Dynamic

Tabs can be dynamically added and removed. This allows you to update to any number and the v-tabs component will react.

Basic Pill

Use our custom class .v-tabs-pill along with v-tabs component to style pill tabs.

Candy canes donut chupa chups candy canes lemon drops oat cake wafer. Cotton candy candy canes marzipan carrot cake. Sesame snaps lemon drops candy marzipan donut brownie tootsie roll. Icing croissant bonbon biscuit gummi bears. Pudding candy canes sugar plum cookie chocolate cake powder croissant.

Vertical Pill

Use our custom class .v-tabs-pill along with v-tabs component to style pill tabs.

Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero.

Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et, tincidunt eget.

CONTENTS

  • Introduction

  • Basic

  • Stacked

  • Vertical

  • Alignment

  • Pagination

  • Custom Icons

  • Fixed

  • Grow

  • Programmatic Navigation

  • Dynamic

  • Basic Pill

  • Vertical Pill