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