Story

觀看影片教學

Stories（元件測試）是 Storybook 的基本建構區塊。

在 Storybook 文件中，您可以使用 Story 區塊，在 MDX 檔案的上下文中，渲染 CSF 檔案中的任何 story，並套用所有註解（parameters、args、loaders、decorators、play function）。

通常您會想要使用 Canvas 區塊來渲染帶有周圍邊框和原始碼區塊的 story，但您可以使用 Story 區塊僅渲染 story。

Screenshot of Story block

ButtonDocs.mdx

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

Story

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

使用 props **和** parameters 進行設定

ℹ️ 就像大多數區塊一樣，Story 區塊是使用 MDX 中的 props 進行設定。這些 props 中的許多預設值都來自區塊命名空間 parameters.docs.story 中對應的 parameter。

以下 autoplay 設定是等效的

Button.stories.ts|tsx

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Basic: Story = {
  parameters: {
    docs: {
      story: { autoplay: true },
    },
  },
};

ButtonDocs.mdx

<Story of={ButtonStories.Basic} autoplay />

上面的範例在 story 層級套用了 parameter，但它也可以套用在元件（或 meta）層級或專案層級。

`autoplay`

類型：boolean

預設值：parameters.docs.story.autoplay

決定是否執行 story 的 play function。

由於所有 stories 都會在文件條目中同時渲染，因此 play functions 可以執行可能彼此互動的任意動作（例如竊取焦點或捲動畫面）。因此，預設情況下，stories **在文件模式下不會執行 play functions**。

但是，如果您知道您的 play function 在文件中「安全」執行，則可以使用此 prop 自動執行它。

如果 story 使用 mount 在其 play function 中，則除非將 autoplay 設定為 true，否則它不會在文件中渲染。

`height`

類型：string

預設值：parameters.docs.story.height

設定在 iframe 或 inline 中渲染 story 時的最小高度（請注意，對於 iframe，這是實際高度）。這會覆寫 iframe 的 parameters.docs.story.iframeHeight。

`inline`

類型：boolean

預設值：parameters.docs.story.inline 或 true（對於支援的框架）

決定 story 是 inline 渲染（與其他文件內容在相同的瀏覽器框架中）還是在 iframe 中渲染。

將 inline 選項設定為 false 將阻止相關的 controls 更新文件頁面中的 story。這是目前實作的已知限制，將在未來版本中解決。

`meta`

類型：CSF 檔案匯出

指定 story 相關聯的 CSF 檔案。

您可以使用 meta prop 渲染來自 CSF 檔案的 story，而該檔案尚未附加到 MDX 檔案（透過 Meta）。傳遞 CSF 檔案的**完整匯出集合**（而不是預設匯出！）。

ButtonDocs.mdx

import { Meta, Story } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
import * as HeaderStories from './Header.stories';
 
<Meta of={ButtonStories} />
 
{/* Although this MDX file is largely concerned with Button,
    it can render Header stories too */}
<Story of={HeaderStories.LoggedIn} meta={HeaderStories} />

`of`

類型：Story 匯出

指定 Story 區塊渲染哪個 story。如果未定義 of 且 MDX 檔案是附加的，則將渲染主要（第一個）story。

觀看影片教學