Storybook 文档
迁移指南：此页面记录了最近在 7.0.0 版本中引入的配置 Storybook 的方法，如果你想迁移到这种 Storybook 配置格式，请参考 迁移指南。
Storybook 文档将你的 Storybook 故事转换为世界一流的组件文档。
DocsPage. 默认情况下，所有故事都会得到一个 DocsPage。DocsPage 是一个零配置的聚合，将你的组件故事、文本描述、docgen 注释、props 表格和代码示例汇总到干净、易读的页面中。
MDX. 如果你想要更多控制权，MDX 允许你在同一个文件中编写长篇 Markdown 文档并包含故事。你也可以用它来编写纯文档页面，并将它们嵌入到 Storybook 中，与你的故事并排显示。
就像 Storybook 一样，Docs 支持所有主要的视图层，包括 React、Vue 3、Angular、HTML、Web 组件、Svelte 等等。
继续阅读以了解更多
DocsPage
当你 安装 Docs 时，每个故事都会得到一个 DocsPage。DocsPage 会从你的故事、组件、源代码和故事元数据中提取信息，以构建一个合理的、零配置的默认值。
点击 Docs 选项卡查看
有关其工作原理的更多信息，请参阅 DocsPage 参考。
MDX
MDX 是一种语法，用于在同一个文件中编写长篇文档，并将故事并排显示。与提供开箱即用智能文档的 DocsPage 不同，MDX 让你完全控制组件文档。
这是一个示例文件
import { Meta, Story, Canvas } from '@storybook/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 Docs 支持 Storybook 支持的所有视图层，但 React Native 除外（目前）。还有一些特定于框架的功能，例如 props 表格和内联故事渲染。以下页面记录了当前的支持状态
注意： # = 正在开发中的支持
想要为你最喜欢的框架添加增强功能？查看此 开发指南
安装
首先添加包。确保你的 @storybook/* 包的版本匹配
yarn add -D @storybook/addon-docs
Docs 对 react 有对等依赖关系。如果你想用 MDX 编写故事，你可能还需要添加此依赖关系
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
],
};
请务必查看特定框架的安装需求
- React (这里有介绍)
- Vue 3
- Angular
- Ember
- Web Components
- 通用设置（所有其他框架）
预设选项
addon-docs 预设有一些配置选项，可用于配置其 babel/webpack 加载行为。以下是如何使用带有选项的预设的示例
export default {
addons: [
{
name: '@storybook/addon-docs',
options: {
csfPluginOptions: null,
mdxPluginOptions: {},
},
},
],
};
csfPluginOptions 是一个用于配置 @storybook/csf-plugin 的对象。当设置为 null 时，它告诉 docs 不要运行 csf-plugin，这可以作为优化，或者如果你已经在你的 main.js 中使用 csf-plugin。
随着 7.0 版本的发布，现在不再可以使用
transcludeMarkdown选项 直接将.md文件导入 Storybook。相反，我们建议使用Markdown文档块将 Markdown 文件导入你的 Storybook 文档。
TypeScript 配置
从 SB6 开始，TypeScript 是零配置的，应该开箱即用地与 SB Docs 协同工作。有关高级配置选项，请参考 Props 文档。
更多资源
想要了解更多？这里还有几篇关于 Storybook Docs 的文章
