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 内容出现在侧边栏组件的 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 显示在侧边栏的任何位置。