@ data- slot/ 可缩写
香草JavaScript的无头相撞(show/hide)组件. 无障碍而无作相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.
安装
npm install @data-slot/collapsible
快速启动
<div data-slot="collapsible">
<button data-slot="collapsible-trigger">Toggle Content</button>
<div data-slot="collapsible-content" hidden>
Hidden content revealed on click.
</div>
</div>
<script type="module">
import { create } from "@data-slot/collapsible";
const controllers = create();
</script>
API 密码
初始化
create(scope?)
自动发现并绑定一个范围内的所有相撞事件(默认为 document) (中文(简体) ).
import { create } from "@data-slot/collapsible";
const controllers = create(); // Returns CollapsibleController[]
createCollapsible(root, options?)
为特定元素创建控制器.
import { createCollapsible } from "@data-slot/collapsible";
const collapsible = createCollapsible(element, {
defaultOpen: false,
hiddenUntilFound: false,
closeOnEscape: false,
closeOnClickOutside: false,
onOpenChange: (open) => console.log(open),
});
槽数
运行时间槽
collapsible- 管理开放状态的根元素.collapsible-trigger- 需要切换内容并接收的按钮aria-expanded。 。 。 .collapsible-content- 需要显示或隐藏在打开状态下的面板.
标记
<div data-slot="collapsible">
<button data-slot="collapsible-trigger">Toggle</button>
<div data-slot="collapsible-content">Content</div>
</div>
数据属性
也可以通过根元素上的数据属性来设定选项. 联合来文的选择优先.
| 属性 | 类型 | 默认 | 说明 |
|---|---|---|---|
data-default-open | 布尔 | false | 初始打开状态 |
data-hidden-until-found | 布尔 | false | 使用 hidden="until-found" 关闭时 |
data-close-on-escape | 布尔 | false | 按下 Escape 键时关闭 |
data-close-on-click-outside | 布尔 | false | 在相撞器外的指针上关闭 |
布尔属性: 存在或 "true" 没错, "false" =虚假,缺席=默认.
<!-- Start expanded -->
<div data-slot="collapsible" data-default-open>
...
</div>
选项
| 选项 | 类型 | 默认 | 说明 |
|---|---|---|---|
defaultOpen | boolean | false | 初始打开状态 |
hiddenUntilFound | boolean | false | 使用 hidden="until-found" 关闭时 |
closeOnEscape | boolean | false | 按下 Escape 键时关闭 |
closeOnClickOutside | boolean | false | 在相撞器外的指针上关闭 |
onOpenChange | (open: boolean) => void | undefined | 打开状态更改时调用( 未调用 init) |
主计长
| 方法/财产 | 说明 |
|---|---|
open() | 打开可折叠的 |
close() | 关闭相撞 |
toggle() | 切换相撞 |
isOpen | 当前打开状态( 只读) boolean(中文(简体) ) |
destroy() | 清理所有事件听众 |
活动
境外事件
通过自定义事件聆听更改 :
element.addEventListener("collapsible:change", (e) => {
console.log("Collapsible open:", e.detail.open);
});
入境事件
通过事件控制相撞:
| 活动 | 细节 | 说明 |
|---|---|---|
collapsible:set | { open: boolean } | 方案设置开放状态 |
// Open the collapsible
element.dispatchEvent(
new CustomEvent("collapsible:set", { detail: { open: true } })
);
// Close the collapsible
element.dispatchEvent(
new CustomEvent("collapsible:set", { detail: { open: false } })
);
说明: 已禁用触发时被屏蔽( has disabled 属性或 aria-disabled="true") (中文(简体) ).
折旧形状
下列形状已贬值并会在v1.0中去除:
// Deprecated: { value: boolean }
element.dispatchEvent(
new CustomEvent("collapsible:set", { detail: { value: true } })
);
使用 { open: boolean } 换句话说.
样式
使用 data-state 用于 CSS 样式的属性(在根和内容上都有):
/* Hidden state */
[data-slot="collapsible-content"][hidden] {
display: none;
}
/* Or use data-state */
[data-slot="collapsible"][data-state="closed"] [data-slot="collapsible-content"] {
display: none;
}
/* Animate using data-state on content */
[data-slot="collapsible-content"] {
overflow: hidden;
transition: max-height 0.3s;
max-height: 0;
}
[data-slot="collapsible-content"][data-state="open"] {
max-height: 500px;
}
/* Presence lifecycle markers */
[data-slot="collapsible-content"][data-starting-style] {
opacity: 0;
}
[data-slot="collapsible-content"][data-ending-style] {
opacity: 0;
}
CSS 变量
内容元素会暴露大小变量, 用于维度动画 :
| 变量 | 说明 |
|---|---|
--collapsible-panel-height | 面板高度( E)auto 在开放休息时,在过渡期间测量px, 0px 当关闭时) |
--collapsible-panel-width | 面板宽度( O)auto 在开放休息时,在过渡期间测量px, 0px 当关闭时) |
示例
[data-slot="collapsible-content"] {
overflow: hidden;
height: var(--collapsible-panel-height);
width: var(--collapsible-panel-width);
transition: height 0.25s ease, width 0.25s ease, opacity 0.2s ease;
}
[data-slot="collapsible-content"][data-starting-style],
[data-slot="collapsible-content"][data-ending-style] {
height: 0;
opacity: 0;
}
无障碍
该组件自动处理 :
aria-expanded启动状态aria-controls连接触发到内容role="region"关于内容aria-labelledby链接内容返回触发- 唯一用于触发和内容的ID生成
- 禁用触发支持( 尊重)
disabled属性和aria-disabled="true"(中文(简体) ) - 当逃生关闭相撞时, 焦点返回触发器, 而焦点就在其中
行为
开除
折叠器会一直打开直到默认切换. 启用 closeOnEscape 财务报告和审定财务报表
closeOnClickOutside (或 data-close-on-escape 财务报告和审定财务报表 data-close-on-click-outside(中文(简体) )
如移动导航板.
<div data-slot="collapsible" data-close-on-escape data-close-on-click-outside>
<button data-slot="collapsible-trigger">Menu</button>
<nav data-slot="collapsible-content" aria-label="Main">...</nav>
</div>
Dismissal 使用与 popover , 对话框和菜单相同的层叠 :
- 逃逸只关闭了最近打开的地层,所以面板内部的弹出会先关闭.
- 被传送的后人内部按压,如从面板上打开的弹出器,算在内.
- 在触摸装置上,外部媒体关闭了面板
click,所以滚动页面并不否定它. - 触发器被禁用时, 解职被屏蔽 .
查找页面支持
启用 hiddenUntilFound (或 data-hidden-until-found关闭面板
hidden="until-found"。这允许浏览器在页面中查找显示匹配的文本.
以尾风:
<div data-slot="collapsible" class="group">
<button data-slot="collapsible-trigger" class="flex items-center gap-2">
<span>Show more</span>
<svg class="group-data-[state=open]:rotate-180 transition-transform">...</svg>
</button>
<div data-slot="collapsible-content" class="hidden group-data-[state=open]:block">
Content here
</div>
</div>
许可证
麻省理工学院