# @data-slot/accordion 中文文档

规范地址：https://npmcn.com/package/%40data-slot/accordion/

版本：1\.1\.3
npm 元数据更新时间：2026-11-05T11:55:49.928Z
中文译文更新时间：2026-11-11T13:00:53.184Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40data-slot/accordion
原文对照：https://npmcn.com/package/%40data-slot/accordion/?lang=original
项目主页：https://github.com/bejamas/data-slot#readme
源码仓库：https://github.com/bejamas/data-slot

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：35.9 kB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2026-01-09T14:58:03.657Z
- 最新版本发布：2026-11-05T11:55:49.543Z
- 近 30 天下载量：12340（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：164（近 12 个月 164 个）

## 中文简介

香草JavaScript的无头手风琴组件. 无障碍而无作相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

## 安装

```sh
npm install @data-slot/accordion
```

也可以使用：`pnpm add @data-slot/accordion`、`yarn add @data-slot/accordion`、`bun add @data-slot/accordion`

## README

# @ data- slot/ accordion

香草JavaScript的无头手风琴组件. 无障碍而无作相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相.

## 安装

```bash
npm install @data-slot/accordion
```

## 快速启动

```html
<div data-slot="accordion" data-default-value="one">
  <div data-slot="accordion-item" data-value="one">
    <button data-slot="accordion-trigger">
      <span>Section One</span>
      <svg data-slot="accordion-trigger-icon" viewBox="0 0 12 12" aria-hidden="true">
        <path d="M6.75 0H5.25V5.25H0V6.75H5.25V12H6.75V6.75H12V5.25H6.75V0Z" />
      </svg>
    </button>
    <div data-slot="accordion-content">
      <div data-slot="accordion-content-inner">Content for section one</div>
    </div>
  </div>
  <div data-slot="accordion-item" data-value="two">
    <button data-slot="accordion-trigger">Section Two</button>
    <div data-slot="accordion-content">
      <div data-slot="accordion-content-inner">Content for section two</div>
    </div>
  </div>
</div>

<script type="module">
  import { create } from "@data-slot/accordion";

  const controllers = create();
</script>
```

## API 密码

### 初始化

#### `create(scope?)`

自动发现并绑定一个范围内的所有手风琴例(默认为 `document`) (中文(简体) ).

```typescript
import { create } from "@data-slot/accordion";

const controllers = create(); // Returns AccordionController[]
```

#### `createAccordion(root, options?)`

为特定元素创建控制器.

```typescript
import { createAccordion } from "@data-slot/accordion";

const accordion = createAccordion(element, {
  multiple: true,
  defaultValue: ["one"],
  orientation: "vertical",
  loopFocus: true,
  hiddenUntilFound: false,
  onValueChange: (values) => console.log(values),
});
```

### 槽数

#### 运行时间槽

-   `accordion` - 管理扩展项目和键盘导航的根元素.
-   `accordion-item` - 一个部分的集装箱。 设置独有 `data-value` ;至少需要一件物品.
-   `accordion-trigger` - 切换其内容和接收的项目中的按钮 `aria-expanded`。 。 。 .
-   `accordion-content` - 某一物品内部的面板,与其触发器相连,并显示该物品扩大时.

#### 只有样式的槽

-   `accordion-trigger-icon` - 触发器内的可选图标,用于与开放状态旋转.
-   `accordion-content-inner` - 动画面板内内容粘贴的可选包装.

#### 标记

```html
<div data-slot="accordion">
  <div data-slot="accordion-item" data-value="unique-id">
    <button data-slot="accordion-trigger">
      <span>Trigger</span>
      <span data-slot="accordion-trigger-icon">+</span>
    </button>
    <div data-slot="accordion-content">
      <div data-slot="accordion-content-inner">Content</div>
    </div>
  </div>
</div>
```

### 数据属性

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

| 属性 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `data-multiple` | `boolean` | `false` | 允许同时打开多个项目 |
| `data-default-value` | `string` | 无 | 初始扩展项, 或多个默认的 JSON 数组字符串 |
| `data-disabled` | `boolean` | `false` | 禁用整个手风琴 |
| `data-orientation` | `"horizontal" | "vertical"` | `"vertical"` | 旋转焦点箭头键 |
| `data-loop-focus` | `boolean` | `true` | 尾端旋转焦点 |
| `data-hidden-until-found` | `boolean` | `false` | 使用 `hidden="until-found"` 关闭的面板 |
| `data-collapsible` | `boolean` | `true` | 折旧的单模式相容性别名 |

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

```html
<div
  data-slot="accordion"
  data-multiple
  data-default-value="one"
  data-orientation="horizontal"
>
  ...
</div>
```

对于HTML中的多个默认项目,将数值编码为JSON:

```html
<div
  data-slot="accordion"
  data-multiple
  data-default-value='["one","two"]'
>
  ...
</div>
```

### 选项

| 选项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `multiple` | `boolean` | `false` | 允许同时打开多个项目 |
| `defaultValue` | `string | string[]` | `undefined` | 最初扩大的项目 |
| `disabled` | `boolean` | `false` | 禁用手风琴的所有用户交互 |
| `orientation` | `"horizontal" | "vertical"` | `"vertical"` | 旋转焦点箭头键 |
| `loopFocus` | `boolean` | `true` | 尾端旋转焦点 |
| `hiddenUntilFound` | `boolean` | `false` | 使用 `hidden="until-found"` 关闭的面板 |
| `onValueChange` | `(value: string[]) => void` | `undefined` | 扩展项目更改时召回 |
| `collapsible` | `boolean` | `true` | “可以关闭最后一个打开的项目”的已折旧的单模式别名 |

#### 折旧选项

以下选项已贬值,将在下一次主要发布时删除:

```typescript
createAccordion(element, {
  // Deprecated: use the default Base UI-style collapsible behavior instead.
  collapsible: false,
});
```

### 主计长

| 方法/财产 | 说明 |
| --- | --- |
| `expand(value)` | 按值扩展项目 |
| `collapse(value)` | 按数值折叠一个项目 |
| `toggle(value)` | 按值切换项目 |
| `value` | 目前扩展的值( 只读) `string[]`(中文(简体) ) |
| `destroy()` | 清理所有事件听众 |

### 活动

#### 境外事件

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

```javascript
element.addEventListener("accordion:change", (e) => {
  console.log("Expanded items:", e.detail.value);
});
```

#### 入境事件

通过活动控制手风琴:

| 活动 | 细节 | 说明 |
| --- | --- | --- |
| `accordion:set` | `{ value: string | string[] }` | 按方案设置扩大的项目 |

```javascript
element.dispatchEvent(
  new CustomEvent("accordion:set", { detail: { value: "one" } })
);

element.dispatchEvent(
  new CustomEvent("accordion:set", { detail: { value: ["one", "two"] } })
);
```

`accordion:set` 当手风琴停用时,控制器的方法仍然有效。 由用户触发的点击和键盘交互没有.

### 样式

#### 国家钩

手风琴暴露出这些有用的花纹钩:

| 元素 | 钩子 |
| --- | --- |
| 根号 | `data-disabled`, (中文(简体) ), `data-orientation` |
| 项目 | `data-state`, (中文(简体) ), `data-open`, (中文(简体) ), `data-closed`, (中文(简体) ), `data-index`, (中文(简体) ), `data-disabled` |
| 触发 | `data-state`, (中文(简体) ), `data-panel-open`, (中文(简体) ), `data-disabled`, (中文(简体) ), `aria-expanded` |
| 内容 | `data-state`, (中文(简体) ), `data-open`, (中文(简体) ), `data-closed`, (中文(简体) ), `data-index`, (中文(简体) ), `data-disabled`, (中文(简体) ), `data-orientation`, (中文(简体) ), `data-starting-style`, (中文(简体) ), `data-ending-style` |

#### CSS 变量

内容元素会显示高度或宽度过渡的大小变量 :

| 变量 | 说明 |
| --- | --- |
| `--accordion-panel-height` | 面板高度( E)`auto` 休息时,在过渡期间测量px, `0px` 当关闭时) |
| `--accordion-panel-width` | 面板宽度( O)`auto` 休息时,在过渡期间测量px, `0px` 当关闭时) |
| `--radix-accordion-content-height` | Tailwind/Radix手风琴键框的相容性别名 |
| `--radix-accordion-content-width` | 宽度整合的相容性别名 |

#### CSS 示例

```css
[data-slot="accordion-item"] {
  border-bottom: 1px solid #e5e7eb;
}

[data-slot="accordion-trigger"] {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: transparent;
  border: 0;
  text-align: left;
}

[data-slot="accordion-trigger-icon"] {
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  color: #6b7280;
  transition: transform 0.2s ease;
}

[data-slot="accordion-item"][data-state="open"] [data-slot="accordion-trigger-icon"] {
  transform: rotate(45deg);
}

[data-slot="accordion-content"] {
  overflow: hidden;
  height: var(--accordion-panel-height);
  transition: height 0.2s ease;
}

[data-slot="accordion-content"][data-starting-style] {
  height: 0;
}

[data-slot="accordion-content-inner"] {
  padding: 0 1rem 1rem;
}
```

#### 尾风示例

```html
<div data-slot="accordion" class="overflow-hidden border">
  <div
    data-slot="accordion-item"
    data-value="one"
    class="group border-b data-[open]:bg-muted/50"
  >
    <button
      data-slot="accordion-trigger"
      class="flex w-full items-center gap-6 p-4 text-left text-sm font-medium hover:underline"
    >
      <span>Section One</span>
      <svg
        data-slot="accordion-trigger-icon"
        viewBox="0 0 12 12"
        class="ml-auto size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-45"
      >
        <path d="M6.75 0H5.25V5.25H0V6.75H5.25V12H6.75V6.75H12V5.25H6.75V0Z" />
      </svg>
    </button>
    <div
      data-slot="accordion-content"
      class="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
    >
      <div
        data-slot="accordion-content-inner"
        class="h-(--accordion-panel-height) px-4 pb-4 pt-0 data-ending-style:h-0 data-starting-style:h-0"
      >
        Content
      </div>
    </div>
  </div>
</div>
```

### 键盘导航

| 密钥 | 行动 |
| --- | --- |
| `Enter` 编号 : `Space` | 切换焦点项目 |
| `ArrowDown` 编号 : `ArrowUp` | 将焦点移入垂直手风琴 |
| `ArrowRight` 编号 : `ArrowLeft` | 将焦点移入水平手风琴 |
| `Home` | 将焦点移动到第一个启用的触发器 |
| `End` | 将焦点移动到上次启用的触发器 |

旋转焦点时跳过已禁用的项目 .

## 许可证

麻省理工学院

## 常见问题

### @data-slot/accordion 是什么？

香草JavaScript的无头手风琴组件\. 无障碍而无作相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相\.

### 如何安装 @data-slot/accordion？

在项目目录运行 npm install @data-slot/accordion，或使用 pnpm add / yarn add / bun add。

### @data-slot/accordion 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @data-slot/accordion 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @data-slot/accordion 可以商用吗？

@data-slot/accordion 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @data-slot/accordion 的下载量有多少？

根据 npm 官方下载统计，@data-slot/accordion 在 2026/10/12 – 2026/11/10 这 30 天内被下载 12,340 次，日均约 411 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @data-slot/accordion 还在维护吗？

最新版本 1\.1\.3 发布于 2026/11/05（6 天前）；至今共发布 164 个版本，其中过去 12 个月发布了 164 个；首次发布于 2026/01/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。