Storybook 文档
迁移指南：此页面记录了最近在 7.0.0 版本中引入的 Storybook 配置方法，如果您想迁移到这种 Storybook 配置格式，请参阅迁移指南。
Storybook Docs 将您的 Storybook 故事转换为一流的组件文档。
DocsPage。默认情况下，所有故事都会获得一个DocsPage。DocsPage 是对您的组件故事、文本描述、docgen 注释、属性表和代码示例进行零配置聚合，生成简洁易读的页面。
MDX。如果您需要更多控制权，MDX 允许您编写长篇 Markdown 文档并在一个文件中包含故事。您还可以使用它来编写纯文档页面，并将其嵌入到 Storybook 中，与您的故事并排显示。
就像 Storybook 一样，Docs 支持所有主要的视图层，包括 React、Vue 3、Angular、HTML、Web Components、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（目前）。还有一些特定于框架的功能，例如属性表和内联故事渲染。以下页面捕获了当前的支持状态
注意：# = 正在开发中的支持
想要为您最喜欢的框架添加增强功能？查看此开发指南
安装
首先添加包。确保您的@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
],
};
请务必检查特定框架的安装需求
预设选项
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。相反，我们建议使用MarkdownDoc Block 将 Markdown 文件导入到您的 Storybook 文档中。
TypeScript 配置
从 SB6 开始，TypeScript 是零配置的，并且应该可以与 SB Docs 开箱即用。有关高级配置选项，请参阅属性文档。
更多资源
想要了解更多？以下是一些关于 Storybook Docs 的文章
