标签页

Account

Make changes to your account here. Click save when you're done.

用途

Include 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或批量程序导入？请参见安装页。

Include 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或批量程序导入？请参见安装页。

Add your tabs 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">Account</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">Password</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>Account</h2>
        <p>Make changes to your account here. Click save when you're done.</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-account-name">Name</label>
            <input type="text" id="demo-tabs-account-name" value="Pedro Duarte" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-account-username">Username</label>
            <input type="text" id="demo-tabs-account-username" value="@peduarte" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">Save changes</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>Password</h2>
        <p>Change your password here. After saving, you'll be logged out.</p>
      </header>
      <section>
        <form class="grid gap-4">
          <div role="group" class="field">
            <label for="demo-tabs-password-current">Current password</label>
            <input type="password" id="demo-tabs-password-current" />
          </div>
          <div role="group" class="field">
            <label for="demo-tabs-password-new">New password</label>
            <input type="password" id="demo-tabs-password-new" />
          </div>
        </form>
      </section>
      <footer>
        <button type="button" class="btn">Save password</button>
      </footer>
    </div>
  </div>
</div>

HTML 结构

<div class="tabs">

Root tabs container. It becomes horizontal or vertical based on the child tablist's aria-orientation.

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

Tablist containing tab buttons. Set aria-orientation="vertical" for vertical tabs and data-variant="line" for the line style.

<button role="tab" id="{ TAB_ID }" aria-controls="{ PANEL_ID }" aria-selected="true" tabindex="0">: Tab trigger. The active tab has aria-selected="true" and tabindex="0". Inactive tabs use tabindex="-1". Disabled tabs use disabled or aria-disabled="true".

<div role="tabpanel" id="{ PANEL_ID }" aria-labelledby="{ TAB_ID }">

Panel controlled by a tab. Inactive panels are hidden.

JavaScript API

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

示例

线

Overview content.

垂直

Account content.

已禁用

Home content.

图标

Preview content.

RTL

要启用RTL支持，请在选项卡根或父元素上设置dir="rtl"。

نظرة عامة

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

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

标签页

Account

Password

用途

Include CSS

Include JavaScript

Add your tabs HTML

HTML 结构

JavaScript API

示例

线

垂直

已禁用

图标

RTL

نظرة عامة

التحليلات

التقارير

الإعدادات

#标签页

#用途

Include CSS

Include JavaScript

Add your tabs HTML

#HTML 结构

#JavaScript API

#示例

#线

#垂直

#已禁用

#图标

#RTL

标签页

用途

HTML 结构

JavaScript API

示例

线

垂直

已禁用

图标

RTL