Storybook 文档
迁移指南：本页面记录了 Storybook 7.0.0 中引入的最新配置方法，如果您想迁移到这种 Storybook 配置格式，请查阅迁移指南。
Storybook 文档 将您的 Storybook stories 转化为世界级的组件文档。
DocsPage. 开箱即用，您的所有 stories 都会获得一个 DocsPage。DocsPage 是对您的组件 stories、文本描述、docgen 注释、props 表格和代码示例进行的零配置聚合，形成清晰、易读的页面。
MDX. 如果您想获得更多控制权，MDX 允许您编写长篇 Markdown 文档并将 stories 包含在同一个文件中。您也可以使用它编写纯文档页面，并将其嵌入到 Storybook 中，与您的 stories 并列。
与 Storybook 一样，文档 支持所有主流视图层，包括 React、Vue 3、Angular、HTML、Web components、Svelte 等。
继续阅读了解更多
DocsPage
当您安装文档后，每个 story 都会获得一个 DocsPage。DocsPage 从您的 stories、组件、源代码和 story 元数据中提取信息，构建一个合理的零配置默认页面。
点击 Docs 选项卡查看
有关其工作原理的更多信息，请参阅DocsPage 参考。
MDX
MDX 是一种语法，用于在同一个文件中并排放置 stories 和长篇文档。与开箱即用提供智能文档的 DocsPage 不同，MDX 为您提供了对组件文档的完全控制权。
这是一个示例文件
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
import * as CheckboxStories from './Checkbox.stories';
<Meta title="MDX/Checkbox" of={CheckboxStories} />
# Checkbox
With `MDX` we can include a story for `Checkbox` right in the middle of our
markdown documentation.
<Canvas>
<Story of={CheckboxStories.Unchecked} />
</Canvas>
这是它在 Storybook 中的渲染效果
有关 MDX 的更多信息，请参阅MDX 参考。
框架支持
Storybook 文档 支持 Storybook 支持的所有视图层，除了 React Native（目前）。还有一些特定于框架的功能，例如 props 表格和内联 story 渲染。以下页面展示了当前的支持状态
注意： # = WIP 支持
想为您喜爱的框架添加增强功能吗？请查阅此开发指南
安装
首先添加包。确保您的 @storybook/* 包版本匹配
yarn add -D @storybook/addon-docs
文档 对 react 有对等依赖 (peer dependencies)。如果您想使用 MDX 编写 stories，您可能还需要添加此依赖。
yarn add -D react
然后将以下内容添加到您的 .storybook/main.js 中
export default {
stories: [
'../src/**/*.mdx', // 👈 Add this, to match your project's structure
'../src/**/*.stories.@(js|jsx|ts|tsx)',
],
addons: [
'@storybook/addon-docs', // 👈 Also add this
],
};
请务必检查特定框架的安装需求
预设选项
addon-docs 预设有一些配置选项，可用于配置其 babel/webpack 加载行为。这是一个带选项使用预设的示例
export default {
addons: [
{
name: '@storybook/addon-docs',
options: {
csfPluginOptions: null,
mdxPluginOptions: {},
},
},
],
};
csfPluginOptions 是一个用于配置 @storybook/csf-plugin 的对象。当设置为 null 时，它会告诉文档完全不运行 csf-plugin，这可以用作优化，或者如果您已在 main.js 中使用 csf-plugin。
随着 7.0 版本的发布，不再可能使用
transcludeMarkdown选项直接将.md文件导入 Storybook。相反，我们建议使用Markdown文档块 (Doc Block) 将 Markdown 文件导入您的 Storybook 文档。
TypeScript 配置
从 SB6 开始，TypeScript 是零配置的，应该能与 SB Docs 开箱即用。有关高级配置选项，请参阅Props 文档。
更多资源
想了解更多吗？这里有一些关于 Storybook 文档 的文章
