---
title: "详情扩展"
description: "在 Tiptap 中使用详情扩展以启用 `` HTML 标签用于显示和隐藏内容。更多内容请参阅我们的文档！"
canonical_url: "https://tiptap.zhcndoc.com/editor/extensions/nodes/details"
---

# 详情扩展

在 Tiptap 中使用详情扩展以启用 `` HTML 标签用于显示和隐藏内容。更多内容请参阅我们的文档！

详情扩展使您能够在编辑器中使用 `<details>` HTML 标签。这非常适合显示和隐藏内容。

> **Interactive demo:** [Details](https://embed.tiptap.dev/preview/Nodes/Details)

## 安装

```bash
npm install @tiptap/extension-details
```

此扩展要求 [`DetailsSummary`](https://tiptap.zhcndoc.com/editor/extensions/nodes/details-summary.md) 和 [`DetailsContent`](https://tiptap.zhcndoc.com/editor/extensions/nodes/details-content.md) 节点。

## 设置

### persist

指定打开状态是否应保存在文档中。默认为 `false`。

```js
Details.configure({
  persist: true,
})
```

### openClassName

指定切换内容时设置的 CSS 类。默认为 `is-open`。

```js
Details.configure({
  openClassName: 'is-open',
})
```

### renderToggleButton

自定义切换详情节点的按钮。回调接收按钮 `element`、当前 `isOpen` 状态以及应用于推导标签的 `node`。

当您想要更改按钮的可访问标签或直接更新按钮元素时，这很有用。

```js
Details.configure({
  renderToggleButton: ({ element, isOpen, node }) => {
    element.setAttribute(
      'aria-label',
      isOpen
        ? `Collapse details: ${node.textContent || 'details'}`
        : `Expand details: ${node.textContent || 'details'}`,
    )
  },
})
```

### HTMLAttributes

应添加到渲染的 HTML 标签中的自定义 HTML 属性。

```js
Details.configure({
  HTMLAttributes: {
    class: 'my-custom-class',
  },
})
```

## 命令

### setDetails()

将内容包装在一个详情节点中。

```js
editor.commands.setDetails()
```

### unsetDetails()

解包详情节点。

```js
editor.commands.unsetDetails()
```