文档

使用 Markdown 文档化组件用法和属性

每周下载量

Storybook Docs

迁移指南：本页面记录了 Storybook 7.0.0 中引入的配置方法，如果您想迁移到这种 Storybook 配置格式，请查阅迁移指南。

Storybook Docs 将您的 Storybook stories 转化为世界一流的组件文档。

DocsPage。开箱即用，您的所有 stories 都会获得一个 DocsPage。DocsPage 是对您的组件 stories、文本描述、docgen 注释、props 表和代码示例进行零配置聚合，生成干净、可读的页面。

MDX。如果您想要更多控制，MDX 允许您编写长篇 Markdown 文档，并将 stories 包含在同一个文件中。您也可以用它来编写纯文档页面，并将其嵌入到 Storybook 中，与您的 stories 并列。

就像 Storybook 一样，Docs 支持所有主要的视图层，包括 React、Vue 3、Angular、HTML、Web Components、Svelte 等等。

继续阅读了解更多

Storybook Docs

DocsPage

当您安装 Docs 后，每个 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 Docs 支持 Storybook 支持的所有视图层，但 React Native（目前）除外。还有一些框架特定的功能，例如 props 表和行内 story 渲染。下页记录了当前的支持状态

框架支持

注意： # = WIP 支持

想为您喜欢的框架添加增强功能吗？请查阅此开发者指南

安装

首先添加软件包。确保您的 @storybook/* 软件包版本匹配

yarn add -D @storybook/addon-docs

Docs 依赖于 react 对等依赖。如果您想使用 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 时，它会告诉 docs 完全不运行 csf-plugin，这可以用作优化，或者如果您已经在 main.js 中使用了 csf-plugin。

随着 7.0 版本的发布，使用 transcludeMarkdown 选项直接将 .md 文件导入 Storybook 已不再可能。相反，我们建议使用 Markdown Doc Block 将 Markdown 文件导入您的 Storybook 文档。

TypeScript 配置

从 SB6 开始，TypeScript 是零配置的，应该可以开箱即用地与 SB Docs 一起工作。有关高级配置选项，请参阅 Props 文档。

文档

Storybook Docs

DocsPage

MDX

框架支持

安装

务必查看特定框架的安装需求

预设选项

TypeScript 配置

更多资源