弹出框

用途

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

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

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

Add your popover 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 content. Supports data-side="top|right|bottom|left|inline-start|inline-end" and data-align="start|center|end". Open popovers use a 4-pixel side offset and 8-pixel viewport collision padding by default. Override them with data-side-offset and data-collision-padding, or set data-collision="none" to keep static CSS positioning. While positioned, the runtime publishes --available-height, data-resolved-side, data-resolved-align, and data-a3s-positioned="true".

示例

基本

对齐

侧面

带表格

RTL

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

弹出框

Dimensions

用途

Include CSS

Include JavaScript

Add your popover HTML

HTML 结构

示例

基本

Title

对齐

侧面

带表格

Dimensions

RTL

العنوان

#弹出框

#用途

Include CSS

Include JavaScript

Add your popover HTML

#HTML 结构

#示例

#基本

#对齐

#侧面

#带表格

#RTL

弹出框

用途

HTML 结构

示例

基本

对齐

侧面

带表格

RTL