Meta

Meta 區塊用於附加自訂 MDX 文件頁面於元件的故事列表旁。它不會渲染任何內容，但在 MDX 檔案中具有兩個用途

• 將 MDX 檔案附加到元件及其 Stories，或
• 控制側邊欄中未附加文件條目的位置。

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

Meta

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

Meta 使用以下 props 進行配置

isTemplate

類型：boolean

決定 MDX 檔案是否作為自動文件範本。當為 true 時，MDX 檔案不會像平常一樣被索引。

name

類型：string

設定附加的文件條目的名稱。您可以透過為每個檔案的 Meta 設定不同的名稱，將多個 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 檔案的完整匯出集合（而非預設匯出！）。

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

使用 of prop 將 MDX 檔案附加到元件的 Stories 有兩個目的

1. 確保 MDX 內容出現在側邊欄中元件的故事列表內。預設情況下，它將被命名為 docs.defaultName（預設為 "Docs"）選項在 main.js 中設定的值。但這可以透過 name prop 覆寫。
2. 將元件及其 Stories 附加到 MDX 檔案，讓您可以在「附加」模式下使用其他 doc blocks（例如使用 Stories block）。

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" />

附加與未附加

在 Storybook 中，文件條目（MDX 檔案）在透過 Meta 的 of prop 與 stories 檔案關聯時為「已附加」。附加的文件條目會顯示在側邊欄中元件下方的 stories 列表旁。

「未附加」的文件條目未與 stories 檔案關聯，可以透過 Meta 的 title prop 顯示在側邊欄中的任何位置。