描述

Description 块显示组件、story 或 meta 的描述，这些描述来自它们各自的 JSDoc 注释。

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

描述

import { Description } from '@storybook/blocks';

Description 通过以下 props 配置

of

类型：Story 导出或 CSF 文件导出

指定从哪里获取描述。它可以指向一个 story 或一个 meta，具体取决于您要显示的描述。

描述从 JSDoc 注释或参数中提取，并以 markdown 格式呈现。 有关更多详细信息，请参阅编写描述。

编写描述

根据您要实现的目标，可以在多个位置编写组件/story 的描述。 描述可以写在 story 级别以描述组件的每个 story，也可以写在 meta 或组件级别以描述组件的总体信息。

描述可以写成 story、meta 或组件上方的 JSDoc 注释。 或者，也可以在 parameters 中指定。 要通过参数而不是注释来描述 story，请将其添加到 parameters.docs.description.story；要描述 meta/组件，请将其添加到 parameters.docs.description.component。

我们建议使用 JSDoc 注释来编写描述，并且仅在由于某种原因无法编写注释，或者您希望 Storybook 中显示的描述与注释不同时，才使用 parameters.docs.description.X 属性。 注释提供了更好的编写体验，因为您不必担心缩进，并且对于其他正在探索 story/组件源代码的开发人员来说，它们更容易被发现。

在编写 story 文档时，在 of prop 中引用 story 导出（见下文），Description 块将按以下顺序查找描述

1. story 中的 parameters.docs.description.story
2. story 上方的 JSDoc 注释

在编写组件文档时，在 of prop 中引用 meta 导出（见下文），Description 块将按以下顺序查找描述

1. meta 中的 parameters.docs.description.component
2. meta 上方的 JSDoc 注释
3. 组件上方的 JSDoc 注释

此流程为您提供了强大的方式来覆盖每种场景的描述。 以下示例：

/**
 * The Button component shows a button
 */
export const Button = () => <button>Click me</button>;

// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Button } from './Button';
 
/**
 * Button stories
 * These stories showcase the button
 */
const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    docs: {
      description: {
        component: 'Another description, overriding the comments',
      },
    },
  },
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
/**
 * Primary Button
 * This is the primary button
 */
export const Primary: Story = {
  parameters: {
    docs: {
      description: {
        story: 'Another description on the story, overriding the comments',
      },
    },
  },
};

import { Meta, Description } from '@storybook/blocks';
import * as ButtonStories from './Button.stories';
 
<Meta of={ButtonStories} />
 
{/* Shows the description for the default export (the meta).
    If that didn't have any comments, it would show the 
    comments from the component instead */}
<Description of={ButtonStories} />
 
{/* Shows the description for the Primary export */}
<Description of={ButtonStories.Primary} />