Story

觀看影片教學

Stories (元件測試) 是 Storybook 的基本建構區塊。

在 Storybook 文件中，您可以使用 Story 區塊，在 MDX 檔案的內容中，使用所有註解 (參數、args、載入器、裝飾器、play 函數) 呈現來自 CSF 檔案的任何 story。

通常您會想要使用 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 **和** 參數設定

ℹ️ 與大多數區塊一樣，Story 區塊是在 MDX 中使用 props 設定的。許多 props 的預設值都來自區塊命名空間 parameters.docs.story 中對應的參數。

下列 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 層級套用參數，但也可以在元件 (或 meta) 層級或專案層級套用。

`autoplay`

類型：boolean

預設值：parameters.docs.story.autoplay

決定是否執行 story 的 play 函數。

因為所有 stories 都會在文件條目中同時呈現，所以 play 函數可以執行任意動作，這些動作可以相互互動 (例如竊取焦點或捲動畫面)。因此，預設情況下，stories **不會在文件模式中執行 play 函數**。

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

如果 story 在其 play 函數中使用 mount，除非 autoplay 設定為 true，否則它不會在文件中呈現。

`height`

類型：string

預設值：parameters.docs.story.height

在 iframe 或內嵌中呈現 story 時，設定最小高度 (請注意，對於 iframe，這是實際高度)。這會覆寫 iframe 的 parameters.docs.story.iframeHeight。

`inline`

類型：boolean

預設值：parameters.docs.story.inline 或 true (適用於支援的框架)

決定 story 是以 inline (與其他文件內容在相同的瀏覽器框架中) 還是 iframe 中呈現。

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

`meta`

類型：CSF 檔案匯出

指定故事所關聯的 CSF 檔案。

您可以使用 meta 屬性，從未附加到 MDX 檔案 (透過 Meta) 的 CSF 檔案渲染故事。傳遞 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 區塊渲染的故事。如果沒有定義 of，且 MDX 檔案為已附加，則會渲染主要 (第一個) 故事。

觀看影片教學