Tabs

ARIA tablist

Switching between views of the same thing that don't need to be seen together — details / reviews / specs. Not for navigation between pages (that's links), and not for steps (that's Stepper).

Basic

加藤恵

arrow keys / Home / End · current: megumi

澤村・スペンサー・英梨々

arrow keys / Home / End · current: megumi

霞ヶ丘詩羽

arrow keys / Home / End · current: megumi

氷堂美智留

arrow keys / Home / End · current: megumi

<script setup lang="ts">
import { ref } from "vue";
import { BlessTabs, BlessText } from "blessing-ui";
import { heroines } from "./_data";
const tab = ref("megumi");
</script>

<template>
  <BlessTabs v-model="tab" :tabs="heroines" label="Heroines" style="max-width: 640px">
    <template #default="{ tab: t }">
      <BlessText as="p" weight="bold">{{ t.label }}</BlessText>
      <BlessText as="p" size="sm" muted>arrow keys / Home / End · current: {{ tab }}</BlessText>
    </template>
  </BlessTabs>
</template>

Manual

manual activation, text colour — 加藤恵

manual activation, text colour — 澤村・スペンサー・英梨々

manual activation, text colour — 霞ヶ丘詩羽

<script setup lang="ts">
import { BlessTabs, BlessText } from "blessing-ui";
import { heroines } from "./_data";
</script>

<template>
  <BlessTabs :tabs="heroines.slice(0, 3)" color="text" activation="manual" style="max-width: 640px">
    <template #default="{ tab: t }">
      <BlessText as="p">manual activation, text colour — {{ t.label }}</BlessText>
    </template>
  </BlessTabs>
</template>

• One Tab stop for the tab row; arrows move between tabs (in right-to-left pages too), Home / End jump. activation="manual" waits for Enter or Space before switching, for panels that are slow to show.
• Each panel is labelled by its tab. #tab renders a tab's content yourself.

Usage

import { BlessTabs } from "blessing-ui";

API

Props

Name	Type	Default	Description
tabs*	BlessTab[]	—
activation	"manual" | "automatic"	"automatic"	activate on arrow key (automatic) or only on Enter/Space (manual)
color	"text" | "accent" | "danger"	"accent"
label	string	—
modelValue	string	""

Events

Name	Payload	Description
update:modelValue	[value: string]

Slots

Name	Scope	Description
tab	{ tab: BlessTab; active: boolean; }
default	{ tab: BlessTab; active: boolean; }