Story

观看视频教程

Story（组件测试）是 Storybook 的基本构建块。

在 Storybook 文档中，你可以使用 Story 块，在 MDX 文件的上下文中渲染来自 CSF 文件的任何 Story，并应用所有注释（参数、参数、加载器、装饰器、播放函数）。

通常情况下，你想使用 Canvas 块来渲染带有周围边框和源代码块的 Story，但你可以使用 Story 块来只渲染 Story 本身。

Screenshot of Story block

{/* ButtonDocs.mdx */}
 
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 进行配置。许多 props 的默认值来自块命名空间中对应的参数，parameters.docs.story。

以下 autoplay 配置是等效的

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: {
      story: { autoplay: true },
    },
  },
};

{/* ButtonDocs.mdx */}
 
<Story of={ButtonStories.Basic} autoplay />

上面的例子在 Story 级别应用了参数，但它也可以在组件（或元数据）级别或项目级别应用。

`autoplay`

类型：boolean

默认：parameters.docs.story.autoplay

决定 Story 的播放函数是否运行。

由于所有 Story 在文档条目中同时渲染，因此播放函数可以执行任意操作，这些操作可以相互交互（例如，窃取焦点或滚动屏幕）。因此，默认情况下，Story 不会在文档模式下运行播放函数。

但是，如果你知道你的播放函数在文档中运行是“安全的”，你可以使用此属性来自动运行它。

如果 Story 在其播放函数中使用 mount，除非 autoplay 设置为 true，否则它不会在文档中渲染。

`height`

类型：string

默认：parameters.docs.story.height

在 iframe 或内联渲染 Story 时，设置最小高度（注意，对于 iframe，这是实际高度）。这会覆盖 iframe 的 parameters.docs.story.iframeHeight。

`inline`

类型：boolean

默认：parameters.docs.story.inline 或 true（对于支持的框架）

决定 Story 是 inline（与其他文档内容在同一个浏览器框架中渲染）还是在 iframe 中渲染。

将 inline 选项设置为 false 将阻止关联的控件在文档页面内更新 Story。这是当前实现的一个已知限制，将在未来版本中解决。

`meta`

类型：CSF 文件导出

指定故事关联的 CSF 文件。

你可以通过使用 meta 属性渲染一个你没有附加到 MDX 文件 (通过 Meta) 的 CSF 文件中的故事。传递 CSF 文件中的 **完整导出集** (不是默认导出!)。

{/* ButtonDocs.mdx */}
 
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 块渲染的故事。如果未定义 of 并且 MDX 文件已附加，则将渲染主要 (第一个) 故事。

观看视频教程