Canvas
Canvas
块是 Story
的一个包装器,它带有一个工具栏,允许您与其内容交互,同时自动提供所需的 Source
代码片段。
在 MDX 中使用 Canvas 块时,它通过 of
prop 来引用一个 story。
import { Meta, Canvas } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
<Meta of={ButtonStories} />
<Canvas of={ButtonStories.Primary} />
在 Storybook 的早期版本中,可以将任意组件作为子项传递给 Canvas
。此用法已弃用,Canvas
块现在只支持单个 story。
Canvas
import { Canvas } from '@storybook/addon-docs/blocks';
使用 props 和 参数进行配置
ℹ️ 与大多数块类似,Canvas
块在 MDX 中通过 props 进行配置。许多这些 props 的默认值来自块命名空间中对应的 参数,即 parameters.docs.canvas
。
以下 sourceState
配置是等效的
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
import { Button } from './Button';
const meta = {
component: Button,
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Basic: Story = {
parameters: {
docs: {
canvas: { sourceState: 'shown' },
},
},
};
<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
函数中指定其功能。
import { Meta, Story, Canvas, SourceState } from '@storybook/addon-docs/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.layout
或 parameters.docs.canvas.layout
或 'padded'
指定 canvas 如何布局故事 (story)。
- centered:将故事 (story) 在 canvas 中居中
- padded:(默认)为故事 (story) 添加内边距
- fullscreen:按原样显示故事 (story),无内边距
除了 parameters.docs.canvas.layout
属性或 layout
prop 之外,Canvas
块还将遵循定义故事 (story) 在常规故事 (story) 视图中如何布局的 parameters.layout
值。
meta
类型:CSF 文件导出
指定故事 (story) 所关联的 CSF 文件。
您可以使用 meta
prop 渲染一个未附加到 MDX 文件(通过 Meta
)的 CSF 文件中的故事 (story)。传递 CSF 文件中完整的导出集合(而不是默认导出!)。
import { Meta, Canvas } from '@storybook/addon-docs/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
prop 会被忽略,因为作为 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) 交互的工具的工具栏。