@ data- slot/ 对话框

香草JavaScript的无头模式对话框组件. 无障碍而无作相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

安装

npm install @data-slot/dialog

快速启动

<div data-slot="dialog">
  <button data-slot="dialog-trigger">Open Dialog</button>
  <div data-slot="dialog-overlay" hidden></div>
  <div data-slot="dialog-content" hidden>
    <h2 data-slot="dialog-title">Dialog Title</h2>
    <p data-slot="dialog-description">Dialog description text.</p>
    <button data-slot="dialog-close">Close</button>
  </div>
</div>

<script type="module">
  import { create } from "@data-slot/dialog";
  
  const controllers = create();
</script>

API 密码

初始化

create(scope?)

自动发现并绑定范围中的所有对话框实例(默认为 document) (中文(简体) ).

import { create } from "@data-slot/dialog";

const controllers = create(); // Returns DialogController[]

createDialog(root, options?)

为特定元素创建控制器.

import { createDialog } from "@data-slot/dialog";

const dialog = createDialog(element, {
  defaultOpen: false,
  closeOnClickOutside: true,
  closeOnEscape: true,
  lockScroll: true,
  onOpenChange: (open) => console.log(open),
});

槽数

运行时间槽

• dialog - 管理开放状态并接收对话框事件的根元素.
• dialog-trigger - 切换对话框的可选按钮.
• dialog-portal - 可选包装器搬到了 document.body 当对话框打开时.
• dialog-overlay - 需要的背景;在启用外部点击解禁时点击它删除对话框.
• dialog-content - 配有对话框语义和焦点管理的必要模式面板.
• dialog-title - 用于面板的可选标题 aria-labelledby。 。 。 .
• dialog-description - 用于面板的可选描述 aria-describedby。 。 。 .
• dialog-close - 关闭对话框的可选按钮;支持多个关闭按钮.

标记

<div data-slot="dialog">
  <button data-slot="dialog-trigger">Open</button>
  <div data-slot="dialog-overlay" hidden></div>
  <div data-slot="dialog-content" role="dialog">
    <h2 data-slot="dialog-title">Title</h2>
    <p data-slot="dialog-description">Description</p>
    <button data-slot="dialog-close">Close</button>
  </div>
</div>

数据属性

也可以通过根元素上的数据属性来设定选项. 联合来文的选择优先于数据属性.

布尔属性: 存在或 "true" 没错, "false" =虚假,缺席=默认.

<!-- Disable close on Escape -->
<div data-slot="dialog" data-close-on-escape="false">
  ...
</div>

<!-- Alert dialog that stays open when clicking outside -->
<div data-slot="dialog" data-alert-dialog data-close-on-click-outside="false">
  ...
</div>

选项

主计长

主计长销毁

destroy() 永久处理控制器并隐藏任何打开的表面,而不包含 产生额外的变化事件。 重复销毁是安全的 旧控制器变成无操作器。 在同一根上创建新控制器以重新组合 .

破坏恢复了先前的焦点,如果先前的,则会回到存活的触发器 目标被移除。 摧毁未打开的模式不会移动焦点.

活动

境外事件

通过自定义事件聆听更改 :

element.addEventListener("dialog:change", (e) => {
  console.log("Dialog open:", e.detail.open);
});

入境事件

通过事件控制对话框 :

// Open the dialog
element.dispatchEvent(
  new CustomEvent("dialog:set", { detail: { open: true } })
);

// Close the dialog
element.dispatchEvent(
  new CustomEvent("dialog:set", { detail: { open: false } })
);

折旧形状

下列形状已贬值并会在v1.0中去除:

// Deprecated: { value: boolean }
element.dispatchEvent(
  new CustomEvent("dialog:set", { detail: { value: true } })
);

使用 { open: boolean } 换句话说.

样式

对话框都显示 data-state="open|closed" 和弹出式动画钩:

• data-open 编号 : data-closed 打开 dialog, (中文(简体) ), dialog-portal, (中文(简体) ), dialog-overlay,以及 dialog-content
• data-starting-style 打开时
• data-ending-style 关闭时

使用 data-open 编号 : data-closed 与 data-starting-style 编号 : data-ending-style 动画:

/* Backdrop */
[data-slot="dialog-overlay"] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}

[data-slot="dialog-overlay"][data-open] {
  opacity: 1;
}

[data-slot="dialog-content"] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

[data-slot="dialog-content"][data-open] {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

[data-slot="dialog-overlay"][data-starting-style],
[data-slot="dialog-overlay"][data-ending-style] {
  opacity: 0;
}

[data-slot="dialog-content"][data-starting-style],
[data-slot="dialog-content"][data-ending-style] {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.95);
}

堆叠在JavaScript中是故意不硬编码的. 配置 z-index 在你的CSS中.
当多个对话框打开时, data-stack-index 并打开 CSS 变量 dialog-overlay 财务报告和审定财务报表 dialog-content数字 :

• data-stack-index
• --dialog-stack-index
• --dialog-overlay-stack-index (重叠)
• --dialog-content-stack-index (内容)

以尾风:

<div
  data-slot="dialog-overlay"
  class="fixed inset-0 bg-black/50 opacity-0 transition-opacity duration-200 data-[open]:opacity-100 data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"
></div>
<div
  data-slot="dialog-content"
  class="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 opacity-0 scale-95 transition-all duration-200 data-[open]:opacity-100 data-[open]:scale-100 data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95"
>
  <!-- Dialog content -->
</div>

键盘导航

无障碍

该组件自动处理 :

• role="dialog" 关于内容
• aria-modal="true" 关于内容
• aria-labelledby 链接到标题
• aria-describedby 与描述相链接
• aria-haspopup="dialog" 触发
• aria-expanded 启动状态
• 对话框中的焦点陷阱
• 重点恢复到关闭

许可证

麻省理工学院