Tabs

My brain has too many tabs open.

Example

Basic

Show Code

<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

<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

Name	Type	Default Value	Description
anchorSide
content
modelValue
...			See Space Props.

Events

Name	Type	Description
update:modelValue

Slots

Name	Type	Description
default

TabItem Props

Name	Type	Default Value	Description
graphicsOptions
rIndex
value		Required

TabItem Slots

Name	Type	Description
anchor
default

TabAnchor Styles

Name	Type	Default Value	Description
--r-tab-anchor-color
--r-tab-anchor-border-width
--r-tab-anchor-border-dash