#折叠面板

一组垂直堆叠的交互式标题，每个标题显示一部分内容。

#用途

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

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

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

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

<section class="accordion">
  <details open>
    <summary>
      Is it accessible?
      <svg class="lucide lucide-chevron-down" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
    </summary>
    <section>Yes. It uses native disclosure semantics.</section>
  </details>
</section>

A3S UI uses native <details> and <summary> elements for disclosure semantics. The accordion JavaScript only enforces single-item behavior by default and prevents disabled items from toggling. Add data-multiple to the root when more than one item can be open at a time.

#HTML 结构

<section class="accordion">

Root accordion container. Add data-multiple to allow multiple open items.

<details open>

Accordion item. Use the native open attribute for the default expanded item. Add aria-disabled="true" when an item should not toggle.

<summary>

Accordion trigger. Keep the trigger text visible and add an optional trailing icon.

<section>

Accordion content. Use any semantic element that fits your content.

#JavaScript API

Accordion不公开自定义方法或事件。使用原生details.open布尔值以编程方式打开或关闭项目。

document.querySelector("#billing").open = true

#示例

#基本

一次显示一个项目的基本折叠面板。第一项默认打开。

#多个

使用data-multiple允许同时打开多个项目。

#已禁用

在某个项目上使用 aria-disabled="true" 将其禁用。

#边框

使用带边框的根时，向行添加水平填充。

#卡

将折叠面板包裹在卡片中以进行分组支持或计费内容。

#RTL

折叠面板间距使用逻辑属性。在折叠面板或父元素上设置 dir="rtl"。