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/accordion.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/accordion.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/accordion.min.js" defer></script>

      使用 CDN 或包管理器集成时，请参见安装页。

      添加折叠面板 HTML

      <section class="accordion">
  <details open>
    <summary>
      是否支持键盘操作？
      <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>支持。组件保留原生详情元素的展开状态、焦点顺序与键盘行为。</section>
  </details>
</section>

      A3S UI 保留原生 <details> 与 <summary> 的披露语义。脚本默认只允许打开一个项目，并阻止不可用项目切换；需要同时展开多个项目时，在根元素上添加 data-multiple。

      HTML 结构

      <section class="accordion">

      折叠面板根容器。添加 data-multiple 后可同时展开多个项目。

      <details open>

      单个折叠项目。用原生 open 设置初始展开项；项目不可切换时添加 aria-disabled="true"。

      <summary>
      折叠触发器。始终保留可见标题；尾部图标只辅助表达方向。
      <section>
      展开内容。根据内容选择合适的语义元素，不需要额外角色。

      JavaScript API

      折叠面板不公开自定义方法或事件。需要编程控制时，直接读写原生 details.open 布尔值。

      document.querySelector("#deployment-details").open = true;

      状态与变体

      基本

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

      实时预览
      如何撤销一次发布？
      在发布记录中选择目标版本并发起回滚。系统会先展示受影响的实例和配置差异。
      如何轮换访问密钥？
      先创建新密钥并更新调用方，确认流量稳定后再撤销旧密钥。
      审计记录保留多久？
      默认保留 90 天；更长周期由工作区的数据保留策略决定。

      多个

      使用 data-multiple 允许用户同时比较多个相关项目。

      实时预览
      通知渠道
      分别配置发布失败、审批等待和安全事件的通知接收人。
      会话与安全
      查看活跃会话、设置登录策略，并撤销不再可信的设备。
      数据保留
      为日志、产物和审计记录设置独立的保留周期。

      已禁用

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

      实时预览
      可以查看近期操作记录吗？
      可以。活动页面会按时间展示当前工作区内可见的操作。
      跨组织审计记录
      当前角色没有查看跨组织审计记录的权限。
      如何修改通知邮箱？
      在个人设置中提交新地址，并通过新邮箱中的确认链接完成变更。

      边框

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

      实时预览
      发布何时开始计时？
      从第一台实例接收变更开始计时；等待审批和主动暂停会单独记录，不计入执行耗时。
      传输内容是否加密？
      传输链路与持久化数据都需要加密，密钥管理由宿主环境负责。
      可以接入哪些事件源？
      组件不绑定服务商；宿主可把仓库、流水线和告警系统的事件映射到同一契约。

      卡

      当一组问题需要独立标题和背景说明时，可在单个卡片内组合折叠面板。

      实时预览

      发布与回滚

      确认发布范围、失败处理和回滚窗口。

      发布前会检查什么？
      系统会校验配置、依赖版本、目标实例和必要审批，并明确列出阻塞项。
      部分实例失败怎么办？
      先停止继续扩散，再根据健康实例比例选择重试、回滚或人工接管。
      回滚窗口有多长？
      窗口由发布策略定义；超过窗口后仍可发起新的回滚任务，但需要重新评估数据兼容性。

      RTL

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

      实时预览
      كيف يمكنني إعادة تعيين كلمة المرور؟
      انقر على 'نسيت كلمة المرور' في صفحة تسجيل الدخول، أدخل عنوان بريدك الإلكتروني، وسنرسل لك رابطا لإعادة تعيين كلمة المرور. سينتهي صلاحية الرابط خلال 24 ساعة.
      هل يمكنني تغيير خطة الاشتراك الخاصة بي؟
      نعم، يمكنك تغيير الخطة من إعدادات الفوترة.
      ما هي طرق الدفع التي تقبلونها؟
      نقبل بطاقات الائتمان الرئيسية والتحويلات البنكية.

      可访问性

      保留原生 <details> 与 <summary>，不要用普通容器模拟展开状态。标题必须可见且能独立说明内容；图标使用 aria-hidden="true"，不能替代标题。不可切换的项目同时设置 aria-disabled="true"，并由控制器阻止指针和键盘切换。展开状态由浏览器暴露，宿主只在状态变化需要跨区域反馈时增加简短播报。