选项卡

一组分层的内容部分（称为选项卡面板），一次只显示一个。

在这里更改您的帐户。完成后，单击保存。

姓名

用户名

vue

<script setup lang="ts">
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
</script>

<template>
  <TabsRoot
    class="flex flex-col w-full sm:w-[300px] shadow-[0_2px_10px] shadow-blackA4"
    default-value="tab1"
  >
    <TabsList
      class="relative shrink-0 flex border-b border-mauve6"
      aria-label="Manage your account"
    >
      <TabsIndicator class="absolute px-8 left-0 h-[2px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] rounded-full transition-[width,transform] duration-300">
        <div class="bg-grass8 w-full h-full" />
      </TabsIndicator>
      <TabsTrigger
        class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none  rounded-tl-md  hover:text-grass11 data-[state=active]:text-grass11 outline-none cursor-default focus-visible:relative focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-black"
        value="tab1"
      >
        Account
      </TabsTrigger>
      <TabsTrigger
        class="bg-white px-5 h-[45px] flex-1 flex items-center justify-center text-[15px] leading-none text-mauve11 select-none  rounded-tr-md hover:text-grass11 data-[state=active]:text-grass11 outline-none cursor-default focus-visible:relative focus-visible:shadow-[0_0_0_2px] focus-visible:shadow-black"
        value="tab2"
      >
        Password
      </TabsTrigger>
    </TabsList>
    <TabsContent
      class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
      value="tab1"
    >
      <p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
        Make changes to your account here. Click save when you're done.
      </p>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="name"
        > Name </label>
        <input
          id="name"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          value="Pedro Duarte"
        >
      </fieldset>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="username"
        > Username </label>
        <input
          id="username"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          value="@peduarte"
        >
      </fieldset>
      <div class="flex justify-end mt-5">
        <button
          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
        >
          Save changes
        </button>
      </div>
    </TabsContent>
    <TabsContent
      class="grow p-5 bg-white rounded-b-md outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
      value="tab2"
    >
      <p class="mb-5 !mt-0 text-mauve11 text-[15px] !leading-normal">
        Change your password here. After saving, you'll be logged out.
      </p>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="currentPassword"
        >
          Current password
        </label>
        <input
          id="currentPassword"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          type="password"
        >
      </fieldset>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="newPassword"
        > New password </label>
        <input
          id="newPassword"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          type="password"
        >
      </fieldset>
      <fieldset class="mb-[15px] w-full flex flex-col justify-start">
        <label
          class="text-[13px] leading-none mb-2.5 text-green12 block"
          for="confirmPassword"
        >
          Confirm password
        </label>
        <input
          id="confirmPassword"
          class="grow shrink-0 rounded px-2.5 text-[15px] leading-none text-grass11 shadow-[0_0_0_1px] shadow-green7 h-[35px] focus:shadow-[0_0_0_2px] focus:shadow-green8 outline-none"
          type="password"
        >
      </fieldset>
      <div class="flex justify-end mt-5">
        <button
          class="inline-flex items-center justify-center rounded px-[15px] text-[15px] leading-none font-medium h-[35px] bg-green4 text-green11 hover:bg-green5 focus:shadow-[0_0_0_2px] focus:shadow-green7 outline-none cursor-default"
        >
          Change password
        </button>
      </div>
    </TabsContent>
  </TabsRoot>
</template>

功能

可以是受控的或不受控的。
支持水平/垂直方向。
支持自动/手动激活。
完整的键盘导航。

安装

从命令行安装组件。

$ npm add radix-vue

解剖结构

导入所有部分并将它们拼凑在一起。

vue

<script setup>
import { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
</script>

<template>
  <TabsRoot>
    <TabsList>
      <TabsIndicator />
      <TabsTrigger />
    </TabsList>
    <TabsContent />
  </TabsRoot>
</template>

API 参考

根

包含所有选项卡组件部分。

道具	默认值	类型
`activationMode`	`'automatic'`	`'automatic' \| 'manual'` 选项卡是自动激活（聚焦时）还是手动激活（点击时）。
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`boolean` 更改作为子元素传递的默认渲染元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。
`defaultValue`		`string \| number` 初始渲染时应激活的选项卡的值。当您不需要控制选项卡状态时使用
`dir`		`'ltr' \| 'rtl'` 组合框的阅读方向（如果适用）。如果省略，将从 `ConfigProvider` 全局继承，或假设 LTR（从左到右）阅读模式。
`modelValue`		`string \| number` 要激活的选项卡的受控值。可以绑定为 `v-model`。
`orientation`	`'horizontal'`	`'vertical' \| 'horizontal'` 选项卡的布局方向。主要用于相应地进行箭头导航（左右 vs. 上下）

发射	有效载荷
`update:modelValue`	`[payload: StringOrNumber]` 值更改时调用的事件处理程序

插槽（默认）	有效载荷
`modelValue`	`string \| number` 当前输入值

数据属性	价值
`[data-orientation]`	`"vertical" \| "horizontal"`

列表

包含沿活动内容边缘对齐的触发器。

道具	默认值	类型
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`boolean` 更改作为子元素传递的默认渲染元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。
`loop`	`true`	`boolean` 当 `true` 时，键盘导航将从最后一个选项卡循环到第一个，反之亦然。

数据属性	价值
`[data-orientation]`	`"vertical" \| "horizontal"`

触发器

激活其关联内容的按钮。

道具	默认值	类型
`as`	`'button'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`boolean` 更改作为子元素传递的默认渲染元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。
`disabled`	`false`	`boolean` 当 `true` 时，阻止用户与选项卡交互。
`value*`		`string \| number` 将触发器与内容关联的唯一值。

数据属性	价值
`[data-state]`	`"active" \| "inactive"`
`[data-disabled]`	在禁用时出现
`[data-orientation]`	`"vertical" \| "horizontal"`

指示器

突出显示当前活动选项卡的指示器。

道具	默认值	类型
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`boolean` 更改作为子元素传递的默认渲染元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。

CSS 变量	描述
`--radix-tabs-indicator-size`	指示器的大小。
`--radix-tabs-indicator-position`	指示器的位置

内容

包含与每个触发器关联的内容。

道具	默认值	类型
`as`	`'div'`	`AsTag \| Component` 此组件应渲染为的元素或组件。可以被 `asChild` 覆盖
`asChild`		`boolean` 更改作为子元素传递的默认渲染元素，合并它们的道具和行为。阅读我们的组合指南以了解更多详情。
`forceMount`		`boolean` 用于在需要更多控制时强制安装。当使用 Vue 动画库控制动画时很有用。
`value*`		`string \| number` 将内容与触发器关联的唯一值。

数据属性	价值
`[data-state]`	`"active" \| "inactive"`
`[data-orientation]`	`"vertical" \| "horizontal"`

示例

垂直

您可以使用 orientation 道具创建垂直选项卡。

vue

<script setup>
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'radix-vue'
</script>

<template>
  <TabsRoot
    default-value="tab1"
    orientation="vertical"
  >
    <TabsList aria-label="tabs example">
      <TabsTrigger value="tab1">
        One
      </TabsTrigger>
      <TabsTrigger value="tab2">
        Two
      </TabsTrigger>
      <TabsTrigger value="tab3">
        Three
      </TabsTrigger>
    </TabsList>
    <TabsContent value="tab1">
      Tab one content
    </TabsContent>
    <TabsContent value="tab2">
      Tab two content
    </TabsContent>
    <TabsContent value="tab3">
      Tab three content
    </TabsContent>
  </TabsRoot>
</template>

无障碍性

符合选项卡 WAI-ARIA 设计模式。

键盘交互

键	描述
`制表符`	当焦点移到选项卡上时，会聚焦活动触发器。当触发器被聚焦时，焦点将移到活动内容上。
`向下箭头`	根据 `orientation` 将焦点移到下一个触发器并激活其关联的内容。
`向右箭头`	根据 `orientation` 将焦点移到下一个触发器并激活其关联的内容。
`向上箭头`	根据 `orientation` 将焦点移到上一个触发器并激活其关联的内容。
`向左箭头`	根据 `orientation` 将焦点移到上一个触发器并激活其关联的内容。
`首页`	将焦点移到第一个触发器并激活其关联的内容。
`结束`	将焦点移到最后一个触发器并激活其关联的内容。

选项卡 ​

功能 ​

安装 ​

解剖结构 ​

API 参考 ​

根 ​

列表 ​

触发器 ​

指示器 ​

内容 ​

示例 ​

垂直 ​

无障碍性 ​

键盘交互 ​

选项卡

功能

安装

解剖结构

API 参考

根

列表

触发器

指示器

内容

示例

垂直

无障碍性

键盘交互