Meta
Meta
块用于将自定义 MDX 文档页关联到组件的 Stories 列表旁。它不渲染任何内容,但在 MDX 文件中起着两个作用:
- 将 MDX 文件关联到组件及其 Stories,或
- 控制未关联文档条目在侧边栏中的位置。
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 文件关联到侧边栏中的同一个组件。
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 文件的全部导出(而不是默认导出!)
import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
<Meta of={ButtonStories} />
使用 of
prop 将 MDX 文件关联到组件的 Stories 有两个作用:
- 确保 MDX 内容出现在侧边栏组件的 Story 列表中。默认情况下,它将使用
main.js
中docs.defaultName
(默认为"Docs"
)选项设置的名称。但这可以通过name
prop 进行覆盖。 - 将组件及其 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.js
的 stories
字段中。
关联 vs. 未关联
在 Storybook 中,当文档条目(MDX 文件)通过 Meta
的of
prop 与 Stories 文件关联时,它被视为“关联”的。关联的文档条目显示在侧边栏中组件的 Stories 列表旁边。
“未关联”的文档条目不与 Stories 文件关联,可以通过 Meta
的title
prop 显示在侧边栏的任何位置。