文档
Storybook 文档

Canvas

观看视频教程

Canvas 块是 Story 的包装器,具有一个工具栏,允许您与其内容进行交互,同时自动提供所需的 Source 代码片段。

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。

Canvas

import { Canvas } from '@storybook/blocks';
使用 props parameters 进行配置

ℹ️ 与大多数块一样,Canvas 块通过 MDX 中的 props 进行配置。许多这些 props 的默认值都来自块命名空间 parameters.docs.canvas 中的相应 parameter

以下 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 级别应用了 parameter,但它也可以在 组件(或 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

类型:string

默认值:parameters.docs.canvas.className

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

layout

类型:'centered' | 'fullscreen' | 'padded'

默认值:parameters.layoutparameters.docs.canvas.layout'padded'

指定 canvas 应如何布局 story。

  • centered:将 story 居中放置在 canvas 中
  • padded:(默认)为 story 添加内边距
  • fullscreen:按原样显示 story,不带内边距

除了 parameters.docs.canvas.layout 属性或 layout 属性之外,Canvas 块还将遵循定义 story 在常规 story 视图中如何布局parameters.layout 值。

meta

类型:CSF 文件导出

指定 story 关联的 CSF 文件。

您可以使用 meta 属性渲染来自 CSF 文件的 story,该文件您尚未附加到 MDX 文件(通过 Meta)。传递 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 文档块文档

忽略 dark 属性,因为作为 Canvas 块的一部分显示时,Source 块始终以暗模式呈现。

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 交互的工具的工具栏。