Docs
Storybook Docs

元

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

¥The Meta block is used to attach a custom MDX docs page alongside a component’s list of stories. It doesn’t render any content, but serves two purposes in an MDX file:

  • 将 MDX 文件附加到组件及其故事，或者

    ¥Attaches the MDX file to a component and its stories, or

  • 控制侧边栏中未附加文档条目的位置。

    ¥Controls the location of the unattached docs entry in the sidebar.

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

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

¥The Meta block doesn’t render anything visible.

元

¥Meta

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

Meta 配置了以下属性：

¥Meta is configured with the following props:

isTemplate

类型：boolean

¥Type: boolean

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

¥Determines whether the MDX file serves as an automatic docs template. When true, the MDX file is not indexed as it normally would be.

name

类型：string

¥Type: string

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

¥Sets the name of the attached doc entry. You can attach more than one MDX file to the same component in the sidebar by setting different names for each file's Meta.

{/* 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 文件导出

¥Type: CSF file exports

指定哪个 CSF 文件是此 MDX 文件的 attached。传递 CSF 文件中的完整导出集（不是默认导出！）。

¥Specifies which CSF file is attached to this MDX file. Pass the full set of exports from the CSF file (not the default export!).

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

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

¥Attaching an MDX file to a component’s stories with the of prop serves two purposes:

  1. 确保 MDX 内容出现在组件故事列表内的侧边栏中。默认情况下，它将被命名为 main.js 中设置的 docs.defaultName（默认为 "Docs"）选项。但这可以用 name prop 覆盖。

    ¥Ensures the MDX content appears in the sidebar inside the component’s story list. By default, it will be named whatever the docs.defaultName (which defaults to "Docs") option is set to in main.js. But this can be overridden with the name prop.

  2. 将组件及其故事附加到 MDX 文件，允许你在“附加”模式下使用其他文档块（例如使用 Stories 块）。

    ¥Attaches the component and its stories to the MDX file, allowing you to use other doc blocks in “attached” mode (for instance to use the Stories block).

of 属性是可选的。如果你不想将特定的 CSF 文件附加到此 MDX 文件，你可以使用 title 属性来控制位置，或者完全发出 Meta，让 autotitle 决定它去哪里。

¥The of prop is optional. If you don’t want to attach a specific CSF file to this MDX file, you can either use the title prop to control the location, or emit Meta entirely, and let autotitle decide where it goes.

title

类型：string

¥Type: string

设置 unattached MDX 文件的标题。

¥Sets the title of an unattached MDX file.

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

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

¥If you want to change the sorting of the docs entry with the component’s stories, use Story Sorting, or add specific MDX files to your stories field in main.js in order.

附加与未附加

¥Attached vs. unattached

在 Storybook 中，当文档条目（MDX 文件）通过 Meta 的 of prop 与故事文件关联时，它就是 "attached"。附加的文档条目显示在侧边栏中组件下的故事列表旁边。

¥In Storybook, a docs entry (MDX file) is "attached" when it is associated with a stories file, via Meta's of prop. Attached docs entries display next to the stories list under the component in the sidebar.

"未附加" 文档条目与故事文件无关，可以通过 Meta 的 title prop 显示在侧边栏的任何位置。

¥"Unattached" docs entries are not associated with a stories file and can be displayed anywhere in the sidebar via Meta's title prop.