mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-06 05:41:06 +08:00
118 lines
3.8 KiB
Plaintext
118 lines
3.8 KiB
Plaintext
---
|
||
title: 'Meta'
|
||
sidebar:
|
||
order: 8
|
||
title: Meta
|
||
---
|
||
|
||
The `Meta` block is used to [attach](#attached-vs-unattached) 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:
|
||
|
||
* Attaches the MDX file to a component and its stories, or
|
||
* Controls the location of the unattached docs entry in the sidebar.
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
```md title="ButtonDocs.mdx"
|
||
import { Meta } from '@storybook/blocks';
|
||
import * as ButtonStories from './Button.stories';
|
||
|
||
<Meta of={ButtonStories} />
|
||
```
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
<Callout variant="info" icon="💡">
|
||
The Meta block doesn’t render anything visible.
|
||
</Callout>
|
||
|
||
## Meta
|
||
|
||
```js
|
||
import { Meta } from '@storybook/blocks';
|
||
```
|
||
|
||
`Meta` is configured with the following props:
|
||
|
||
### `isTemplate`
|
||
|
||
Type: `boolean`
|
||
|
||
Determines whether the MDX file serves as an [automatic docs template](../../writing-docs/autodocs.mdx#with-mdx). When true, the MDX file is not indexed as it normally would be.
|
||
|
||
### `name`
|
||
|
||
Type: `string`
|
||
|
||
Sets the name of the [attached](#attached-vs-unattached) 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`.
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
```md title="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" />
|
||
```
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
### `of`
|
||
|
||
Type: CSF file exports
|
||
|
||
Specifies which CSF file is [attached](#attached-vs-unattached) to this MDX file. Pass the **full set of exports** from the CSF file (not the default export!).
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
```md title="ButtonDocs.mdx"
|
||
import { Meta, Story } from '@storybook/blocks';
|
||
import * as ButtonStories from './Button.stories';
|
||
|
||
<Meta of={ButtonStories} />
|
||
```
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
Attaching an MDX file to a component’s stories with the `of` prop serves two purposes:
|
||
|
||
1. 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](#name).
|
||
2. 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).
|
||
|
||
<Callout variant="info" icon="💡">
|
||
|
||
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](../../configure/user-interface/sidebar-and-urls.mdx#csf-30-auto-titles) decide where it goes.
|
||
|
||
</Callout>
|
||
|
||
### `title`
|
||
|
||
Type: `string`
|
||
|
||
Sets the title of an [unattached](#attached-vs-unattached) MDX file.
|
||
|
||
{/* prettier-ignore-start */}
|
||
|
||
```md
|
||
{/* Introduction.mdx */}
|
||
|
||
import { Meta } from '@storybook/blocks';
|
||
|
||
{/* Override the docs entry's location in the sidebar with title */}
|
||
<Meta title="path/to/Introduction" />
|
||
```
|
||
|
||
{/* prettier-ignore-end */}
|
||
|
||
<Callout variant="info" icon="💡">
|
||
|
||
If you want to change the sorting of the docs entry with the component’s stories, use [Story Sorting](../../writing-stories/naming-components-and-hierarchy.mdx#sorting-stories), or add specific MDX files to your `stories` field in `main.js` in order.
|
||
|
||
</Callout>
|
||
|
||
## Attached vs. unattached
|
||
|
||
In Storybook, a docs entry (MDX file) is "attached" when it is associated with a stories file, via `Meta`'s [`of` prop](#of). Attached docs entries display next to the stories list under the component in the sidebar.
|
||
|
||
"Unattached" docs entries are not associated with a stories file and can be displayed anywhere in the sidebar via `Meta`'s [`title` prop](#title).
|