在 MDX 中使用折叠功能

在 MDX 中使用折叠功能

  1. 教程 💃
  2. 2024-03-20 00:00
  3. 2 min read

在写技术博客时，有时候我们需要隐藏一些细节内容，让读者可以选择性地查看。Astro 的 MDX 支持让我们可以轻松地添加这样的交互功能。

基本用法

👉 基本折叠示例

这是最基本的折叠内容示例。

你可以在这里放置:

  • Markdown 格式的文本
  • 代码块
  • 列表
  • 等任何 Markdown 支持的内容

自定义图标

🔍 使用自定义图标

你可以通过 icon 属性自定义折叠指示器。

比如这里使用了放大镜图标 🔍

默认展开

👉 默认展开的内容

通过设置 defaultOpen={true} 可以让内容默认展开。

这对于重要内容很有用。

代码示例

💻 查看完整代码
---
interface Props {
    title: string;
    defaultOpen?: boolean;
    icon?: string;
}

const { title, defaultOpen = false, icon = "👉" } = Astro.props;
---

<details class="my-4" open={defaultOpen}>
    <summary>
        <span class="icon">{icon}</span>
        {title}
    </summary>
    <div class="mt-3 pl-4">
        <slot />
    </div>
</details>
Astro MDX 博客