Fumadocs

手风琴

在你的文档中添加手风琴菜单

Install to your codebase

Easier customisation & control.

使用

🌐 Usage

基于 Radix UI 手风琴,适用于常见问题部分。

🌐 Based on Radix UI Accordion, useful for FAQ sections.

对于 @fumadocs/base-ui,这改为基于 Base UI

在 MDX 文件中使用它,或作为普通的 React 组件使用。

🌐 Use it in MDX files or as a normal React component.

---
title: Hello World
---

import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';

<Accordions type="single">
  <Accordion title="我的标题">My Content</Accordion>
</Accordions>

手风琴

🌐 Accordions

Prop

Type

手风琴

🌐 Accordion

Prop

Type

链接到手风琴

🌐 Linking to Accordion

你可以为手风琴指定一个 id。当用户导航到带有指定 id 哈希参数的页面时,手风琴将自动展开。

🌐 You can specify an id for accordion. The accordion will automatically open when the user is navigating to the page with the specified id in hash parameter.

<Accordions>
<Accordion title="我的标题" id="my-title">

My Content

</Accordion>
</Accordions>

手风琴的默认值与标题相同。当存在 id 时,将使用 id 作为值。

Last updated on

On this page