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 列表，起到两个作用：

确保 MDX 内容显示在侧边栏的组件 stories 列表内。默认情况下，它将被命名为 `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 的排序，请使用 Stories 排序，或按顺序将特定 MDX 文件添加到 `main.js` 的 stories 字段中。

已附加与未附加

在 Storybook 中，当一个文档条目（MDX 文件）通过 Meta 的 of prop 与 stories 文件相关联时，它被认为是“已附加”的。已附加的文档条目将显示在侧边栏组件下的 stories 列表旁边。

“未附加”的文档条目未与 stories 文件关联，可以通过 Meta 的 title prop 显示在侧边栏的任何位置。