Meta

Meta 块用于附加自定义 MDX 文档页面以及组件的 story 列表。它不渲染任何内容，但在 MDX 文件中具有两个用途

将 MDX 文件附加到组件及其 story，或
控制侧边栏中未附加文档条目的位置。

ButtonDocs.mdx

import { Meta } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />

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

Meta

import { Meta } from '@storybook/blocks';

Meta 配置了以下属性

`isTemplate`

类型：boolean

确定 MDX 文件是否用作自动文档模板。当为 true 时，MDX 文件不会像通常那样被索引。

`name`

类型：string

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

Component.mdx

import { Meta } from '@storybook/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/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />

使用 of 属性将 MDX 文件附加到组件的 story 有两个目的

确保 MDX 内容出现在侧边栏组件的 story 列表中。默认情况下，它将被命名为 docs.defaultName（默认为 "Docs"）选项在 main.js 中设置的值。但这可以使用 name 属性覆盖。
将组件及其 story 附加到 MDX 文件，允许您在“附加”模式下使用其他文档块（例如，使用 Stories 块）。

of 属性是可选的。如果您不想将特定的 CSF 文件附加到此 MDX 文件，您可以选择使用 title 属性来控制位置，或者完全省略 Meta，并让自动标题决定其位置。

`title`

类型：string

设置未附加 MDX 文件的标题。

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

如果您想更改文档条目与组件 story 的排序，请使用Story 排序，或按顺序将特定的 MDX 文件添加到 main.js 中的 stories 字段中。

附加与未附加

在 Storybook 中，当文档条目（MDX 文件）通过 Meta 的 of 属性与 story 文件关联时，该文档条目是“附加的”。附加的文档条目显示在侧边栏中组件下的 story 列表旁边。

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