说明

The Description 块显示组件、故事或 meta 的说明，这些说明取自其各自的 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 通过以下 prop 配置

of

类型：故事导出或 CSF 文件导出

指定从何处获取说明。它可以指向一个故事 (story) 或一个 meta，具体取决于您想要显示的说明。

说明取自 JSDoc 注释或参数，并以 markdown 格式渲染。有关更多详细信息，请参阅编写说明。

编写说明

根据您想要达到的目的，可以在多个位置编写组件/故事的说明。可以在故事级别编写说明以描述组件的每个故事，或者可以在 meta 或组件级别编写说明以描述组件总体。

说明可以作为JSDoc 注释写在故事、meta 或组件上方。或者，也可以在parameters中指定。要通过 parameters 而非注释来描述故事，将其添加到 parameters.docs.description.story；要描述 meta/组件，将其添加到 parameters.docs.description.component。

我们建议使用 JSDoc 注释来编写说明，并且只在由于某些原因无法编写注释，或者您希望 Storybook 中显示的说明与注释不同时，才使用 parameters.docs.description.X 属性。注释提供了更好的编写体验，您无需担心缩进问题，而且对于探索故事/组件源代码的其他开发者来说更易于发现。

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

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

在记录组件时，在 of prop 中引用 meta 导出（参见下文），Description 块将按以下顺序查找说明：

1. parameters.docs.description.component 在 meta 中
2. meta 上方的 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} />