故事

Story 是 Storybook 的基本构建块。

在 Storybook Docs 中，您可以在 MDX 文件中使用 CSF 文件中的任何 story，并应用所有注解（参数、args、loaders、decorators、play function），方法是使用 Story 块。

通常，您会使用 Canvas 块来渲染带有边框和源代码的 story，但您也可以使用 Story 块仅渲染 story 本身。

Screenshot of Story block

ButtonDocs.mdx

import { Meta, Story } from '@storybook/addon-docs/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
<Story of={ButtonStories.Primary} />

Story

import { Story } from '@storybook/addon-docs/blocks';

使用 props **和** 参数进行配置

ℹ️ 与大多数块一样，Story 块使用 MDX 中的 props 进行配置。其中许多 props 从块命名空间 parameters.docs.story 中对应的参数中获取其默认值。

以下 autoplay 配置是等效的

Button.stories.ts|tsx

// 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 },
    },
  },
};

ButtonDocs.mdx

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

上面的示例在 story 级别应用了参数，但也可以在 component (或 meta) 级别或 project 级别应用。

`autoplay`

类型：boolean

默认值：parameters.docs.story.autoplay

确定 story 的 play function 是否运行。

由于文档条目中的所有 story 都会同时渲染，play function 可以执行任意可能相互作用的操作（例如抢占焦点或滚动屏幕）。因此，默认情况下，story 在文档模式下不运行 play function。

但是，如果您知道您的 play function 在文档模式下运行是“安全”的，您可以使用此 prop 来自动运行它。

如果一个 story 的 play function 中使用了 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 是内联（与文档中的其他内容在同一浏览器框架中）渲染还是在 iframe 中渲染。

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

`meta`

类型: CSF 文件导出

指定 story 所关联的 CSF 文件。

通过使用 meta prop，您可以渲染一个您尚未通过 Meta 附加到 MDX 文件中的 CSF 文件中的 story。传递 CSF 文件中的完整导出集（而不是默认导出！）。

ButtonDocs.mdx

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 块渲染的 story。如果未定义 of 并且 MDX 文件已附加，则将渲染主要的（第一个）story。