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/popover.md.
A3S UI
  • 简体中文
  • next

      • 弹出框

      弹出框在触发器附近呈现少量补充内容或轻量操作，不中断页面主任务。

      实时预览

      用法

      A3S UI 弹出窗口相对于 .popover 包装器是内联定位的。这与 shadcn/ui 的门户 Base UI 实现不同，但保持标记无依赖，并与 A3S UI 现有的下拉/选择定位模型配合使用。

      引入 CSS

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

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

      或者只导入基本CSS、Popover组件CSS和一个样式包。

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

      使用CDN或批量程序导入？请参见安装页。

      引入 JavaScript

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

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

      或者复制或提供 A3S UI 运行时和 Popover 脚本。

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

      使用CDN或批量程序导入？请参见安装页。

      添加弹出框 HTML

      <div id="demo-popover" class="popover">
  <button id="demo-popover-trigger" type="button" aria-expanded="false" aria-controls="demo-popover-popover" class="btn" data-variant="outline">Open popover</button>
  <div id="demo-popover-popover" data-popover aria-hidden="true" class="w-72">
    <header>
      <h4>Dimensions</h4>
      <p>Set the dimensions for the layer.</p>
    </header>
    <form class="grid gap-2" onsubmit="event.preventDefault()">
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-width">Width</label>
        <input type="text" id="demo-popover-width" value="100%" class="input col-span-2 h-8" autofocus />
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-max-width">Max. width</label>
        <input type="text" id="demo-popover-max-width" value="300px" class="input col-span-2 h-8" />
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-height">Height</label>
        <input type="text" id="demo-popover-height" value="25px" class="input col-span-2 h-8" />
      </div>
      <div class="grid grid-cols-3 items-center gap-4">
        <label for="demo-popover-max-height">Max. height</label>
        <input type="text" id="demo-popover-max-height" value="none" class="input col-span-2 h-8" />
      </div>
    </form>
  </div>
</div>

      HTML 结构

      <div class="popover">

      Relative wrapper for the trigger and inline popover content.

      <button type="button" aria-expanded="false" aria-controls="{ POPOVER_ID }">
      Trigger button. The script toggles aria-expanded and opens or closes the content.
      <div data-popover id="{ POPOVER_ID }" aria-hidden="true">
      Popover 内容。支持 data-side="top|right|bottom|left|inline-start|inline-end" 与 data-align="start|center|end"。默认使用 8px 侧边偏移和 8px 视口碰撞留白；可通过 data-side-offset 与 data-collision-padding 覆盖，或设置 data-collision="none" 保留静态 CSS 定位。运行时同样会定位以 aria-hidden="false" 条件挂载的 Popover。定位期间会发布 --available-height、data-resolved-side、data-resolved-align 与 data-a3s-positioned="true"。

      JavaScript API

      API类型说明
      popover.open(focus = true)方法打开浮层，并在存在 [autofocus] 时将焦点移入。
      popover.close(focusOnTrigger = true)方法关闭浮层，并按需把焦点还给触发器。
      popover.toggle(focus = true)方法根据当前 aria-expanded 状态切换。
      popover.refresh()方法替换直接子触发器或内容后重新扫描。

      React 的 usePopover 与 Vue 的同名 composable 通过 call() 暴露相同方法。控制器不管理表单数据、远程请求或业务权限。

      示例

      基本

      实时预览

      对齐

      实时预览

      侧面

      实时预览

      带表格

      实时预览

      RTL

      弹出窗口对齐使用逻辑开始和结束偏移。在父级上设置 dir="rtl" 以翻转开始/结束对齐。

      实时预览