畫布

觀看影片教學

畫布 區塊是 Story 的包裝函式，具有工具列，可讓您與其內容互動，同時自動提供所需的 原始碼 片段。

Screenshot of Canvas block

在 MDX 中使用 Canvas 區塊時，它會使用 of 屬性來參照 story

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

在舊版 Storybook 中，可以將任意元件作為子元件傳遞到 Canvas。該功能已棄用，Canvas 區塊現在僅支援單一 story。

畫布

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

使用屬性**和**參數設定

ℹ️ 與大多數區塊一樣，Canvas 區塊是使用 MDX 中的屬性設定的。這些屬性中的許多屬性都從區塊命名空間 parameters.docs.canvas 中對應的參數中取得其預設值。

下列 sourceState 設定是等效的

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: {
      canvas: { sourceState: 'shown' },
    },
  },
};

{/* ButtonDocs.mdx */}
 
<Canvas of={ButtonStories.Basic} sourceState="shown" />

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

`additionalActions`

類型

Array<{
  title: string | JSX.Element;
  className?: string;
  onClick: () => void;
  disabled?: boolean;
}>;

預設值：parameters.docs.canvas.additionalActions

提供任何其他要顯示在右下角的自訂動作。這些是簡單的按鈕，會在 onClick 函式中執行您指定的任何操作。

{/* ButtonDocs.mdx */}
 
import { Meta, Story, Canvas, SourceState } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
{/* with an additional action */}
<Canvas
  additionalActions={[
    {
      title: 'Open in GitHub',
      onClick: () => {
        window.open(
          'https://github.com/storybookjs/storybook/blob/next/code/ui/blocks/src/examples/Button.stories.tsx',
          '_blank'
        );
      },
    }
  ]}
  of={ButtonStories.Primary}
/>

`className`

類型：字串

預設值：parameters.docs.canvas.className

為預覽元素提供 HTML 類別，以進行自訂樣式設定。

`layout`

類型：'centered' | 'fullscreen' | 'padded'

預設值：parameters.layout 或 parameters.docs.canvas.layout 或 'padded'

指定畫布應如何配置 story。

centered：將 story 置中於畫布內
padded：（預設）在 story 中新增內邊距
fullscreen：以原樣顯示 story，不帶內邊距

除了 parameters.docs.canvas.layout 屬性或 layout 屬性之外，Canvas 區塊也會尊重 parameters.layout 值，該值定義了在一般 story 檢視中如何配置 story。

`meta`

類型：CSF 檔案匯出

指定 story 所關聯的 CSF 檔案。

您可以使用 meta 屬性來渲染一個 CSF 檔案中的 Story，即使該檔案沒有透過 Meta 附加到 MDX 檔案。請傳入 CSF 檔案的完整匯出集合（而非預設匯出！）。

{/* ButtonDocs.mdx */}
 
import { Meta, Canvas } 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 */}
<Canvas of={HeaderStories.LoggedIn} meta={HeaderStories} />

`of`

類型：Story 匯出

指定要顯示哪個 Story 的原始碼。

`source`

類型：SourceProps['code'] | SourceProps['format'] | SourceProps['language'] | SourceProps['type']

指定傳遞給內部 Source 區塊的 props。更多資訊，請參閱 Source 文件區塊的文件。

由於 Source 區塊在顯示為 Canvas 區塊的一部分時，總是會以深色模式呈現，因此 dark 屬性會被忽略。

`sourceState`

類型：'hidden' | 'shown' | 'none'

預設值：parameters.docs.canvas.sourceState 或 'hidden'

指定原始碼面板的初始狀態。

hidden：原始碼面板預設為隱藏
shown：原始碼面板預設為顯示
none：原始碼面板不可用，且不會渲染顯示它的按鈕

`story`

類型：StoryProps['inline'] | StoryProps['height'] | StoryProps['autoplay']

指定傳遞給內部 Story 區塊的 props。更多資訊，請參閱 Story 文件區塊的文件。

`withToolbar`

類型：boolean

預設值：parameters.docs.canvas.withToolbar

決定是否渲染包含與 Story 互動工具的工具列。