For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/components/tabs.md.
A3S UI
  • 简体中文
  • next

      • 标签页

      标签页在同一页面位置切换同层级内容，每次只展示一个面板并保留明确的当前状态。

      实时预览

      账户

      修改账户信息，完成后保存更改。

      用法

      引入 CSS

      导入 Tailwind 和一个完整的 A3S UI 样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

      或者只导入基础 CSS、标签页组件 CSS 和一个样式包。

      @import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/tabs.css";
@import "@a3s-lab/ui/styles/a3s.css";

      使用 CDN 或构建工具导入时，请参见安装页。

      引入 JavaScript

      复制或提供完整的 A3S UI JavaScript 包。

      <script src="/assets/js/all.min.js" defer></script>

      或者复制或提供 A3S UI 运行时和选项卡脚本。

      <script src="/assets/js/runtime.min.js" defer></script>
<script src="/assets/js/tabs.min.js" defer></script>

      使用 CDN 或构建工具导入时，请参见安装页。

      添加标签页 HTML

      <div class="tabs w-full" id="demo-tabs-with-panels">
  <nav role="tablist" aria-orientation="horizontal" class="w-full">
    <button
      type="button"
      role="tab"
      id="demo-tabs-with-panels-tab-1"
      aria-controls="demo-tabs-with-panels-panel-1"
      aria-selected="true"
      tabindex="0"
    >
      账户
    </button>
    <button
      type="button"
      role="tab"
      id="demo-tabs-with-panels-tab-2"
      aria-controls="demo-tabs-with-panels-panel-2"
      aria-selected="false"
      tabindex="-1"
    >
      密码
    </button>
  </nav>
  <div
    role="tabpanel"
    id="demo-tabs-with-panels-panel-1"
    aria-labelledby="demo-tabs-with-panels-tab-1"
    tabindex="-1"
    aria-selected="true"
  >
    <div class="card">
      <header>
        <h2>账户</h2>
        <p>修改账户信息，完成后保存更改。</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-account-name">姓名</label>
            <input type="text" id="demo-tabs-account-name" value="林安" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-account-username">用户名</label>
            <input type="text" id="demo-tabs-account-username" value="@linan" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">保存更改</button>
      </footer>
    </div>
  </div>
  <div
    role="tabpanel"
    id="demo-tabs-with-panels-panel-2"
    aria-labelledby="demo-tabs-with-panels-tab-2"
    tabindex="-1"
    aria-selected="false"
    hidden
  >
    <div class="card">
      <header>
        <h2>密码</h2>
        <p>修改密码后，当前会话将退出登录。</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-password-current">当前密码</label>
            <input type="password" id="demo-tabs-password-current" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-password-new">新密码</label>
            <input type="password" id="demo-tabs-password-new" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">保存密码</button>
      </footer>
    </div>
  </div>
</div>

      HTML 结构

      <div class="tabs">

      标签页根容器。布局方向由子级标签列表的 aria-orientation 决定。

      <nav role="tablist" aria-orientation="horizontal">

      包含标签按钮的列表。使用 aria-orientation="vertical" 切换为垂直布局，使用 data-variant="line" 启用线型样式。

      <button role="tab" id="{ TAB_ID }" aria-controls="{ PANEL_ID }" aria-selected="true" tabindex="0">

      标签触发按钮。当前标签使用 aria-selected="true" 和 tabindex="0"，其余标签使用 tabindex="-1" 。禁用标签使用 disabled 或 aria-disabled="true"。

      <div role="tabpanel" id="{ PANEL_ID }" aria-labelledby="{ TAB_ID }">
      由标签控制的内容面板，非当前面板保持隐藏。

      JavaScript API

      API类型描述
      tabs.select(tab)方法选择选项卡列表中的选项卡按钮。
      tabs.refresh()方法在现有选项卡列表/面板结构内的子项发生更改后重新扫描选项卡和面板。

      React 的 useTabs 与 Vue 的同名 composable 通过 call("select", tab, focus) 和 call("refresh") 暴露相同契约。

      水平选项卡列表会将溢出限制在自身范围内，并自动滚动以显示当前选项卡。方向键遵循视觉顺序，在 RTL 中左右方向会反转；Home 和 End 分别选择第一个和最后一个可用选项卡。

      示例

      线

      实时预览

      概览内容。

      垂直

      实时预览

      账户内容。

      已禁用

      实时预览

      首页内容。

      图标

      实时预览

      预览内容。

      RTL

      要启用 RTL 支持，请在标签页根节点或父元素上设置 dir="rtl"。

      实时预览

      نظرة عامة

      عرض مقاييسك الرئيسية وأنشطة المشروع الأخيرة. تتبع التقدم عبر جميع مشاريعك النشطة.

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