故事

故事是 Storybook 的基本构建块。

在 Storybook 文档中，您可以在 MDX 文件的上下文中渲染 CSF 文件中的任何故事，并应用所有注解（参数、args、加载器、装饰器、play 函数），方法是使用 Story 块。

通常您会使用Canvas 块来渲染带边框和源码块的故事，但您可以使用 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} />

故事

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

使用 props 和 parameters 配置

ℹ️ 像大多数块一样，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 />

上面的例子将参数应用到了故事级别，但它也可以应用到组件（或 meta）级别或项目级别。

`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 文件中的所有导出（不是默认导出！）。

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