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

      • 浮动面板

      让检查器、辅助工具或短期上下文停靠在主要任务旁，并在窄屏上自然转为底部面板。

      实时预览

      用法

      <aside class="floating-panel" data-position="docked" data-state="open">
  <header><strong>检查器</strong><button type="button" class="btn" data-size="sm" data-variant="ghost" data-floating-panel-action="close">关闭</button></header><section><p>无需离开当前任务即可检查所选资源。</p></section>
</aside>

      独立控制器

      import "@a3s-lab/ui/runtime";
import "@a3s-lab/ui/floating-panel";

const component = document.querySelector(".floating-panel");
component.getState();

      控制器是幂等的；完整包可改为一次导入 @a3s-lab/ui/all。宿主通过可取消的 before-* 事件执行权限与业务校验。

      契约

      接口值
      根选择器.floating-panel
      原生根元素<aside>
      状态open, closed, floating, docked, sheet
      事件a3s:floating-panel-before-close, a3s:floating-panel-before-open, a3s:floating-panel-close, a3s:floating-panel-open
      方法close, getState, open, toggle

      产品边界

      浮动面板不等于通用卡片，也不用于必须中断用户的确认。宿主拥有持久化位置、尺寸和工作区布局。

      组件只发布可复用的交互边界。数据获取、持久化、权限、可信内容与业务实体继续由宿主产品拥有。

      可访问性

      关闭操作可由 Escape 触发并把焦点还给开启者。停靠、浮动与移动端面板保持同一内容顺序和操作语义。