Skip to content

Tabs

My brain has too many tabs open.

Example

Basic

Show Code
vue
<script lang="ts" setup>
import { RTabItem, RTabs } from 'roughness'
</script>

<template>
  <RTabs>
    <RTabItem value="amazon">The Amazon River in South America is the largest river by discharge volume of water in the world.</RTabItem>
    <RTabItem value="apple">An apple is a round, edible fruit produced by an apple tree.</RTabItem>
    <RTabItem value="meta">Meta is a prefix meaning "more comprehensive" or "transcending".</RTabItem>
  </RTabs>
</template>

Anchor Side

Show Code
vue
<script lang="ts" setup>
import { RTabItem, RTabs } from 'roughness'
</script>

<template>
  <RTabs anchor-side="left">
    <RTabItem value="installation" />
    <RTabItem value="usage" />
    <RTabItem value="theme" />
    <RTabItem value="chart" />
  </RTabs>
</template>

Usage

Props

Events

Slots

TabItem Props

TabItem Slots

TabAnchor Styles

Released under the ISC License.