加入直播会话:周四,美国东部时间上午 11 点,Storybook 9.0 发布 & 问答
文档
Storybook Docs

Meta

Meta 块用于将自定义 MDX 文档页关联到组件的 Stories 列表旁。它不渲染任何内容,但在 MDX 文件中起着两个作用:

  • 将 MDX 文件关联到组件及其 Stories,或
  • 控制未关联文档条目在侧边栏中的位置。
ButtonDocs.mdx
import { Meta } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />

Meta 块不会渲染任何可见内容。

Meta

import { Meta } from '@storybook/addon-docs/blocks';

Meta 使用以下 props 进行配置:

isTemplate

类型:boolean

确定此 MDX 文件是否用作自动文档模板。如果为 true,则该 MDX 文件将不会像通常那样被索引。

name

类型:string

设置关联文档条目的名称。通过为每个文件的 Meta 设置不同的名称,可以将多个 MDX 文件关联到侧边栏中的同一个组件。

Component.mdx
import { Meta } from '@storybook/addon-docs/blocks';
import * as ComponentStories from './component.stories';
 
{/* This MDX file is now called "Special Docs" */}
<Meta of={ComponentStories} name="Special Docs" />

of

类型:CSF 文件导出

指定哪个 CSF 文件关联到此 MDX 文件。传入 CSF 文件的全部导出(而不是默认导出!)

ButtonDocs.mdx
import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />

使用 of prop 将 MDX 文件关联到组件的 Stories 有两个作用:

  1. 确保 MDX 内容出现在侧边栏组件的 Story 列表中。默认情况下,它将使用 main.jsdocs.defaultName(默认为 "Docs")选项设置的名称。但这可以通过name prop 进行覆盖。
  2. 将组件及其 Stories 关联到 MDX 文件,允许你在“关联”模式下使用其他文档块(例如使用 Stories 块)。

of prop 是可选的。如果你不想将特定的 CSF 文件关联到此 MDX 文件,你可以使用 title prop 来控制位置,或者完全忽略 Meta,让自动标题 (autotitle) 决定其位置。

title

类型:string

设置未关联 MDX 文件的标题。

{/* Introduction.mdx */}
 
import { Meta } from '@storybook/addon-docs/blocks';
 
{/* Override the docs entry's location in the sidebar with title */}
<Meta title="path/to/Introduction" />

如果你想更改文档条目与组件 Stories 的排序,请使用Story 排序,或按顺序将特定的 MDX 文件添加到 main.jsstories 字段中。

关联 vs. 未关联

在 Storybook 中,当文档条目(MDX 文件)通过 Metaof prop 与 Stories 文件关联时,它被视为“关联”的。关联的文档条目显示在侧边栏中组件的 Stories 列表旁边。

“未关联”的文档条目不与 Stories 文件关联,可以通过 Metatitle prop 显示在侧边栏的任何位置。