画布

The Canvas block is a wrapper around a Story, featuring a toolbar that allows you to interact with its content while automatically providing the required Source snippets.

当在 MDX 中使用 Canvas 块时，它通过 of 属性引用一个故事。

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

画布

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

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

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

类型：string

默认值：parameters.docs.canvas.className

为预览元素提供 HTML 类，用于自定义样式。

layout

类型：'centered' | 'fullscreen' | 'padded'

默认值：parameters.layout 或 parameters.docs.canvas.layout 或 'padded'

指定画布应如何布局故事。

• centered: 将故事居中于画布内
• padded: (默认) 为故事添加填充
• fullscreen: 原样显示故事，不添加填充

除了 parameters.docs.canvas.layout 属性或 layout prop 之外，Canvas 块还将遵守定义 故事如何布局 的 parameters.layout 值，该值在常规故事视图中。

meta

类型：CSF 文件导出

指定与故事关联的 CSF 文件。

您可以使用 meta 属性渲染一个没有附加到 MDX 文件（通过 Meta）的 CSF 文件中的故事。请传递 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

类型：故事导出

指定显示哪个故事的源代码。

source

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

指定传递给内部 Source 块的属性。有关更多信息，请参阅 Source 文档块 文档。

sourceState

类型：'hidden' | 'shown' | 'none'

默认值：parameters.docs.canvas.sourceState 或 'hidden'

指定源面板的初始状态。

• hidden：源面板默认隐藏
• shown：源面板默认显示
• none：源面板不可用，并且不会渲染显示它的按钮

story

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

指定传递给内部 Story 块的属性。有关更多信息，请参阅 Story 文档块 文档。

withToolbar

类型：boolean

默认值：parameters.docs.canvas.withToolbar

确定是否渲染一个包含工具以与故事交互的工具栏。