描述

Description 块显示组件、故事或元数据的描述，这些描述来自它们各自的 JSDoc 注释。

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

描述

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

Description 使用以下 props 进行配置

of

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

指定从何处提取描述。它可以指向故事或元数据，取决于您想显示哪个描述。

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

编写描述

根据您想实现的目标，有多种方式可以编写组件/故事的描述。描述可以在故事级别编写，以描述组件的每个故事；也可以在元数据或组件级别编写，以描述组件的通用信息。

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

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

在记录故事时，在 of prop（见下文）中引用故事导出，Description 块将按以下顺序查找描述：

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

在记录组件时，在 of prop（见下文）中引用元数据导出，Description 块将按以下顺序查找描述：

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

这种流程为您提供了强大的方式来覆盖每种情况下的描述。请看以下示例：

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

// 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';
 
/**
 * Button stories
 * These stories showcase the button
 */
const meta = {
  component: Button,
  parameters: {
    docs: {
      description: {
        component: 'Another description, overriding the comments',
      },
    },
  },
} satisfies Meta<typeof Button>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
/**
 * 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/addon-docs/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} />