数据位/ 核心

共享数据槽无头UI组件的公用设施.

安装

npm install @data-slot/core

API 密码

DOM 公用事业

getPart(root, slot)

查询组件根内的单个部分/槽.

const trigger = getPart<HTMLButtonElement>(root, "dialog-trigger");

getParts(root, slot)

查询组件根内的所有部件/槽.

const items = getParts<HTMLElement>(root, "accordion-item");

getRoots(scope, slot)

通过数据槽值在一个范围内查找所有组件根.

const dialogs = getRoots(document, "dialog");

重点公用事业

isFocusable(element) 检查单个元素能否收到 方案重点,使用与后裔发现相同的资格规则.

getFocusable(container) 返回DOM中可方案重点的后代 顺序,包括负数元素 tabindex。 。 。 . getTabbables(container) 返回符合 Tab 导航条件的子集,核算已检查的收音机 组合。 返回 DOM 命令, 而不是排序为正 tabindex 数值.

getAutofocusOrFirstFocusable(container) 选择符合条件的 [autofocus] 后人,否则第一个可关注后人,或 undefined 如果不存在的话.

每次通话都读取当前DOM状态. 隐藏、惰性和本地禁用控制 除外. aria-disabled 财务报告和审定财务报表 data-disabled 仅此而已,不能取消本地焦点 资格。 查询将容器本身排除在外,不会穿入巢中 阴影根;直接通过阴影根来查询其后人.

ARIA 公用事业

ensureId(element, prefix)

确保元素具有识别码,必要时生成识别码.

const id = ensureId(content, "dialog-content");
// Returns existing id or generates "dialog-content-1"

setAria(element, name, value)

设置或删除 ARIA 属性 。 布尔值转换为字符串 .

setAria(trigger, "expanded", true);  // aria-expanded="true"
setAria(trigger, "expanded", null);  // removes aria-expanded

linkLabelledBy(content, title, description)

通过ARIA将内容元素与其标签和描述联系起来.

linkLabelledBy(dialogContent, titleElement, descriptionElement);
// Sets aria-labelledby and aria-describedby

水电费

on(element, type, handler, options?)

添加事件倾听器并返回清理功能 .

const cleanup = on(button, "click", () => console.log("clicked"));
// Later: cleanup() to remove listener

onRoot(root, type, handler)

直接发送到元件根上的事件听好了 。 突发事件 后代被这个处理者所忽视,并继续被宣传. 回返a 清理功能, 如 on。 。 。 .

用于输入组件命令, 因此嵌入实例无法更改 父状态 :

const cleanup = onRoot(root, "tabs:set", handleSet);

emit(element, name, detail?)

以可选的细节发送自定义自定义事件 。 外出活动 可在祖先身上观察到;检查 event.target 以识别源根.

emit(root, "tabs:change", { value: "tab-2" });

composeHandlers(...handlers)

将多个事件处理器组成一个. 停止,如果 event.defaultPrevented。 。 。 .

const handler = composeHandlers(onClickProp, internalHandler);

模块和解雇公用事业

createModalStackItem(options)

用文档的模式堆栈登记表面 。 控制器提供 open(), (中文(简体) ), close(), (中文(简体) ), destroy(),并只读 isTopmost 属性。 使用 isTopmost 用于交互所有,而不是读取样式属性.

设定 isolateOutside: true 来保持背景内容惰性和隐藏 打开时的辅助技术 。 最上面的隔离 堆栈项目,包括抽屉上方打开的对话框,并允许其拥有 门户. 关闭或销毁项目恢复先前的隔离并写入 属性。 不要求隔离的项目保留其现有行为 当没有隔离项目打开时.

createDismissLayer(options)

坐标外按,出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出入出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出入出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出出. onDismiss(details) 收到触发器 originalEvent 联 合 国 reason数字 : "outside-press", (中文(简体) ), "escape-key",或 "focus-out"触摸解雇报告 启动点击; Iframe difference 报告窗口模糊事件 。 回电 不需要这些细节,也无需继续争论.

手势

createSwipeGesture(options)

一次从媒体上跟踪一个指针或切换 element无 报告到行动通过为止 lockThreshold (默认 8px ) 允许 axes; 以另一个轴为主的拖动,或 lock 回调 拒绝(例如当滚动容器拥有它时),则留到页面上. start(event, target) 确定媒体会刷取或返回什么 null 改为 别管它 一旦锁定, 指针被捕获到元素上 capture 返回时, move 接受生的三角洲,和 release 增加新闻时间 速度。 速度. reset 当锁定的手势结束而不释放时运行。 点击 随即释放出一丝被吞下 控制器提供 cancel(), (中文(简体) ), 可选择针对一个目标,以及 destroy()。 。 。 .

组件使用量

此软件包被全部内部使用 @data-slot/* 组件包。 您通常不需要直接导入, 除非构建自定义组件 .

import { getPart, setAria, on } from "@data-slot/core";

function createCustomComponent(root: Element) {
  const trigger = getPart(root, "custom-trigger");
  const content = getPart(root, "custom-content");
  
  const cleanup = on(trigger, "click", () => {
    const isOpen = content.hidden;
    content.hidden = !isOpen;
    setAria(trigger, "expanded", isOpen);
  });
  
  return { destroy: cleanup };
}

终端生命周期

createTerminalLifecycle() 管理必须在 控制器被摧毁 。 它返回一个 TerminalLifecycleController数字 :

import { createTerminalLifecycle } from "@data-slot/core";

const lifecycle = createTerminalLifecycle();
const frame = lifecycle.trackRaf(() => updatePosition());
lifecycle.cancelRaf(frame);
lifecycle.onDestroy(() => observer.disconnect());
lifecycle.destroy();

registerFloatingTerminalResources(lifecycle, resources) 登记册清理 positionSync, (中文(简体) ), presence, (中文(简体) ), portal页:1 cleanups 数组,和一个 unbind 召回电话, 依此顺序。 资源使用导出 FloatingTerminalResources 类型. 该部门仍对其封闭状态和重点政策负责.

registerModalTerminalResources(lifecycle, resources) 可选择登记 a beforeDestroy 钩子,然后处理 modalStack中,每个条目 presence 数组, 调用 reset, (中文(简体) ), releaseScrollLock,以及 cleanup,清理无效 portal,排水管收听器 cleanups和电话 unbind顺序. ModalTerminalResources 描述这些召回和资源。 重点政策 互动活动仍然是组成部分的责任.

drainCleanups(cleanups) 从数组中删除当前调用,并引用 他们的顺序。 重复空出数组的调用毫无作用 。 清理 调用应同步完成而不丢出.

许可证

麻省理工学院

保留已关闭的重叠内容

createContentMount({ root, target, strategy: "lazy" }) 保留同一作者 连接文档外的节点。 通过外部作者的门户/定位器 作为 target 当在现相. strategy: "eager" 保留内容连接.

• 打电话 mount() 在门户安装、定位、ARIA参考或焦点之前.
• 打电话 unmount() 存在退出完成后,门户恢复.
• 打电话 cleanup() 在清理后恢复作者的放置并删除 占位符。 清净是终端和一能.

帮助者只拥有安置. 组件自己的能见度,动画,焦点, ARIA,和开放状态. getRoots(scope, slot) 包括嵌入于 保留的内容属于该范围内的根属;正常的DOM查询没有. 分遣队在初始化后会减少活的DOM,而不是服务器所交付的HTML字节.