Tabs 选项卡

用于选项卡场景的 MoriUI 组件。

导入

import { Tabs, TabsContent, TabsList, TabsTrigger } from 'moriui'

示例

概览

标签切换展示不同内容。

您可以使用邮箱地址或手机号登录。

<script setup lang="ts">
  import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger
  } from 'moriui'

  const activeTab = defineModel<string>({ default: 'account' })
</script>

<template>
  <Tabs v-model="activeTab" class="w-[400px]">
    <TabsList>
      <TabsTrigger value="account">
        账号
      </TabsTrigger>
      <TabsTrigger value="password">
        密码
      </TabsTrigger>
    </TabsList>
    <TabsContent value="account">
      <Card>
        <CardHeader>
          <CardTitle>账号信息</CardTitle>
          <CardDescription>管理您的基本信息和邮箱地址。</CardDescription>
        </CardHeader>
        <CardContent class="text-sm text-muted-foreground">
          您可以使用邮箱地址或手机号登录。
        </CardContent>
      </Card>
    </TabsContent>
    <TabsContent value="password">
      <Card>
        <CardHeader>
          <CardTitle>密码设置</CardTitle>
          <CardDescription>修改您的登录密码，建议定期更换。</CardDescription>
        </CardHeader>
        <CardContent class="text-sm text-muted-foreground">
          密码长度至少为 8 位，需包含字母和数字。
        </CardContent>
      </Card>
    </TabsContent>
  </Tabs>
</template>

线条

使用 variant="line" 线条样式。

文章列表内容

<script setup lang="ts">
  import { Tabs, TabsContent, TabsList, TabsTrigger } from 'moriui'
</script>

<template>
  <Tabs default-value="posts">
    <TabsList variant="line">
      <TabsTrigger value="posts">
        文章
      </TabsTrigger>
      <TabsTrigger value="comments">
        评论
      </TabsTrigger>
      <TabsTrigger value="likes">
        点赞
      </TabsTrigger>
    </TabsList>
    <TabsContent value="posts">
      文章列表内容
    </TabsContent>
    <TabsContent value="comments">
      评论列表内容
    </TabsContent>
    <TabsContent value="likes">
      点赞列表内容
    </TabsContent>
  </Tabs>
</template>

垂直

纵向排列的标签。

个人资料设置内容

<script setup lang="ts">
  import { Tabs, TabsContent, TabsList, TabsTrigger } from 'moriui'
</script>

<template>
  <Tabs default-value="profile" orientation="vertical">
    <TabsList>
      <TabsTrigger value="profile">
        个人资料
      </TabsTrigger>
      <TabsTrigger value="security">
        安全设置
      </TabsTrigger>
      <TabsTrigger value="notifications">
        通知偏好
      </TabsTrigger>
    </TabsList>
    <TabsContent value="profile">
      个人资料设置内容
    </TabsContent>
    <TabsContent value="security">
      安全设置内容
    </TabsContent>
    <TabsContent value="notifications">
      通知偏好设置内容
    </TabsContent>
  </Tabs>
</template>

禁用

禁用某个标签。

首页内容

<script setup lang="ts">
  import { Tabs, TabsContent, TabsList, TabsTrigger } from 'moriui'
</script>

<template>
  <Tabs default-value="home">
    <TabsList>
      <TabsTrigger value="home">
        首页
      </TabsTrigger>
      <TabsTrigger value="settings" disabled>
        设置
      </TabsTrigger>
    </TabsList>
    <TabsContent value="home">
      首页内容
    </TabsContent>
    <TabsContent value="settings">
      设置内容（已禁用）
    </TabsContent>
  </Tabs>
</template>

图标

标签带图标。

预览内容

<script setup lang="ts">
  import { AppWindow, Code } from '@lucide/vue'
  import { Tabs, TabsContent, TabsList, TabsTrigger } from 'moriui'
</script>

<template>
  <Tabs default-value="preview">
    <TabsList>
      <TabsTrigger value="preview">
        <AppWindow class="size-4" />
        预览
      </TabsTrigger>
      <TabsTrigger value="code">
        <Code class="size-4" />
        代码
      </TabsTrigger>
    </TabsList>
    <TabsContent value="preview">
      预览内容
    </TabsContent>
    <TabsContent value="code">
      代码内容
    </TabsContent>
  </Tabs>
</template>

RTL

从右到左的标签布局。

لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.

<script setup lang="ts">
  import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
    DirectionProvider,
    Tabs,
    TabsContent,
    TabsList,
    TabsTrigger
  } from 'moriui'
</script>

<template>
  <DirectionProvider dir="rtl">
    <Tabs default-value="overview" class="w-full max-w-sm">
      <TabsList>
        <TabsTrigger value="overview">
          نظرة عامة
        </TabsTrigger>
        <TabsTrigger value="analytics">
          تحليلات
        </TabsTrigger>
        <TabsTrigger value="reports">
          تقارير
        </TabsTrigger>
        <TabsTrigger value="settings">
          إعدادات
        </TabsTrigger>
      </TabsList>
      <TabsContent value="overview">
        <Card>
          <CardHeader>
            <CardTitle>نظرة عامة</CardTitle>
            <CardDescription>عرض المقاييس الرئيسية ونشاط المشروع الأخير.</CardDescription>
          </CardHeader>
          <CardContent class="text-sm text-muted-foreground">
            لديك ١٢ مشروعًا نشطًا و٣ مهام معلقة.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="analytics">
        <Card>
          <CardHeader>
            <CardTitle>تحليلات</CardTitle>
            <CardDescription>تتبع الأداء ومقاييس تفاعل المستخدمين.</CardDescription>
          </CardHeader>
          <CardContent class="text-sm text-muted-foreground">
            زيادة مشاهدات الصفحة بنسبة ٢٥٪ مقارنة بالشهر الماضي.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="reports">
        <Card>
          <CardHeader>
            <CardTitle>تقارير</CardTitle>
            <CardDescription>إنشاء وتنزيل التقارير التفصيلية.</CardDescription>
          </CardHeader>
          <CardContent class="text-sm text-muted-foreground">
            لديك ٥ تقارير جاهزة ومتاحة للتصدير.
          </CardContent>
        </Card>
      </TabsContent>
      <TabsContent value="settings">
        <Card>
          <CardHeader>
            <CardTitle>إعدادات</CardTitle>
            <CardDescription>إدارة تفضيلات الحساب والخيارات.</CardDescription>
          </CardHeader>
          <CardContent class="text-sm text-muted-foreground">
            تكوين الإشعارات والأمان والسمات.
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  </DirectionProvider>
</template>

使用说明

组合方式

Tabs 由 List、Trigger 和 Content 组成；List 内 Trigger 控制对应 Content 的显示。

线条变体

TabsList 的 variant="line" 切换为下划线指示器样式。

垂直方向

orientation="vertical" 使标签垂直排列。

禁用标签

TabsTrigger 支持 disabled 属性。

RTL

方向由 DirectionProvider 控制。

变体

TabsList 的 variant 支持 default 与 line；orientation 支持 horizontal 与 vertical。

可访问性

Tabs 复用 Reka UI 的 tablist/tab/tabpanel ARIA、方向键导航和 aria-selected/aria-controls。TabTrigger 应提供清晰标签。

API 参考

属性	类型	默认值	说明
`Tabs v-model`	`string`	`undefined`	当前激活标签的值。
`Tabs defaultValue`	`string`	`undefined`	非受控初始激活标签。
`Tabs orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	标签排列方向。
`Tabs activationMode`	`'automatic' \| 'manual'`	`'automatic'`	标签激活方式（自动/手动）。
`TabsList variant`	`'default' \| 'line'`	`'default'`	标签栏视觉变体。
`TabsList class`	`HTMLAttributes["class"]`	`undefined`	合并到标签栏的调用方类。
`TabsTrigger value`	`string`	`—`	必填，关联的标签值。
`TabsTrigger disabled`	`boolean`	`false`	禁用此标签。
`TabsContent value`	`string`	`—`	必填，关联的标签值。
`TabsContent class`	`HTMLAttributes["class"]`	`undefined`	合并到内容区域的调用方类。