TabPanels

Swipeable panel pager

Swipeable panels that go with a set of tabs on phones — the content under Tabs, BottomTabs or a segmented control, changed by the tabs or by a sideways swipe.

Basic

News

panel “news” — swipe left / right

Tabs drive the model; the panels also swipe, and loop from the last back to the first.

<script setup lang="ts">
import { ref } from "vue";
import { BlessMockup, BlessTabPanels, BlessTabs, BlessText } from "blessing-ui";
const tab = ref("news");
const tabs = [
  { value: "news", label: "News" },
  { value: "story", label: "Story" },
  { value: "cast", label: "Cast" },
];
</script>

<template>
  <div class="row" style="align-items: flex-start">
    <BlessMockup type="phone" style="width: 260px">
      <div style="padding: 8px">
        <BlessTabs v-model="tab" :tabs label="Sections" />
        <BlessTabPanels
          v-model="tab"
          :panels="tabs.map((t) => t.value)"
          loop
          style="padding: 12px 4px"
        >
          <template #default="{ panel, index }">
            <BlessText as="p" weight="bold">{{ tabs[index].label }}</BlessText>
            <BlessText as="p" size="sm" muted>panel “{{ panel }}” — swipe left / right</BlessText>
          </template>
        </BlessTabPanels>
      </div>
    </BlessMockup>
    <BlessText size="sm" muted style="max-width: 260px"
      >Tabs drive the model; the panels also swipe, and loop from the last back to the
      first.</BlessText
    >
  </div>
</template>

• v-model is the current panel's key, shared with the tabs; next() / prev() step in code; loop wraps.
• Each panel is a group named by its key. The tabs themselves stay the keyboard way in; the swipe is extra.

Usage

import { BlessTabPanels } from "blessing-ui";

API

Props

Name	Type	Default	Description
panels*	T[]	—	panel keys, in order; pair with BlessTabs values
swipeable	boolean	true
loop	boolean	—	wrap from last to first
threshold	number	60	px to change panel
modelValue*	T	—

Events

Name	Payload	Description
update:modelValue	[value: T]

Slots

Name	Scope	Description
default	{ panel: T; index: number; }