LogoMkSaaS文档
LogoMkSaaS文档
首页

介绍

快速入门什么是 Fumadocs对比

设置

手动安装静态导出

写作

Markdown国际化

UI

概览主题搜索
Components
手风琴
横幅
代码块(动态)
文件
GitHub 信息
可缩放图片
内联目录
根切换器
步骤
选项卡
类型表格
MDX
X (Twitter)
Components

步骤

在文档中添加步骤

Buy Coffee

Some text here

Go to Office Some text here

Some text here

Have a meeting Some text here

Some text here

使用方法

将您的步骤放入 Steps 容器中。

import { Step, Steps } from 'fumadocs-ui/components/steps';
 
<Steps>
<Step>
 
### 你好世界
 
</Step>
 
<Step>
 
### 你好世界
 
</Step>
</Steps>

我们建议在 Tailwind CSS 项目中直接使用 Tailwind CSS 实用类。

不使用导入

您可以在不导入的情况下使用 Tailwind CSS 实用工具。

<div className="fd-steps">
  <div className="fd-step" />
</div>

它支持仅对带有任意变体的标题添加步骤样式。

<div className='fd-steps [&_h3]:fd-step'>
 
### 你好世界
 
</div>

你好世界

您不再需要使用步骤组件了。

根切换器

在页面树之间切换

选项卡

使用 Radix UI 构建的选项卡组件,具有持久性和共享值等附加功能。

目录

使用方法
不使用导入
你好世界