故事
故事是 Storybook 的基本构建块。
在 Storybook 文档中,您可以在 MDX 文件的上下文中渲染 CSF 文件中的任何故事,并应用所有注解(参数、args、加载器、装饰器、play 函数),方法是使用 Story
块。
通常您会使用Canvas
块来渲染带边框和源码块的故事,但您可以使用 Story
块只渲染故事本身。
import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
<Meta of={ButtonStories} />
<Story of={ButtonStories.Primary} />
故事
import { Story } from '@storybook/addon-docs/blocks';
使用 props 和 parameters 配置
ℹ️ 像大多数块一样,Story
块在 MDX 中使用 props 配置。许多 props 从块的命名空间 parameters.docs.story
中对应的参数派生其默认值。
以下 autoplay
配置是等效的
// 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: {
story: { autoplay: true },
},
},
};
<Story of={ButtonStories.Basic} autoplay />
autoplay
类型: boolean
默认值: parameters.docs.story.autoplay
确定是否运行故事的 Play 函数。
因为所有故事都在文档条目中同时渲染,Play 函数可以执行任意操作,这些操作可能会相互影响(例如抢占焦点或滚动屏幕)。因此,默认情况下,故事不会在文档模式下运行 Play 函数。
然而,如果您知道您的 Play 函数在文档中运行是“安全”的,您可以使用此 prop 自动运行它。
如果故事在其 Play 函数中使用了mount
,则除非将 autoplay
设置为 true
,否则它将不会在文档中渲染。
height
类型: string
默认值: parameters.docs.story.height
在 iframe 或内联模式下渲染故事时,设置最小高度(注意:对于 iframe,这是实际高度)。这会覆盖 iframe 的 parameters.docs.story.iframeHeight
。
inline
类型: boolean
默认值: parameters.docs.story.inline
或 true
(对于支持的框架)
确定故事是渲染为 inline
(与文档内容在同一浏览器框架中)还是在 iframe 中。
将 inline
选项设置为 false 将阻止相关的控件在文档页面内更新故事。这是当前实现的已知限制,将在未来的版本中解决。
meta
类型: CSF file exports
指定故事关联的 CSF 文件。
您可以使用 meta
prop 渲染未附加到 MDX 文件(通过 Meta
)的 CSF 文件中的故事。传递 CSF 文件中的所有导出(不是默认导出!)。
import { Meta, Story } 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 */}
<Story of={HeaderStories.LoggedIn} meta={HeaderStories} />
of
类型: Story export
指定由 Story
块渲染哪个故事。如果未定义 of
并且 MDX 文件是附加的,则会渲染主要(第一个)故事。