描述

观看视频教程

该 Description 块显示组件、故事或元数据的描述，这些描述是从其各自的 JSDoc 注释中获取的。

Screenshot of Description block

{/* ButtonDocs.mdx */}
 
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 通过以下属性进行配置

`of`

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

指定从哪里提取描述。它可以指向故事或元数据，具体取决于您要显示哪个描述。

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

编写描述

有多个地方可以编写组件/故事的描述，具体取决于您想要实现的目标。可以在故事级别编写描述来描述组件的每个故事，或者可以在元数据或组件级别编写描述来描述组件的总体情况。

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

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

在记录故事时，请在 of 属性中引用故事导出（见下文），并且“描述”块将按以下顺序查找描述

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

在记录组件时，请在 of 属性中引用元数据导出（见下文），并且“描述”块将按以下顺序查找描述

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

此流程为您提供了覆盖每个场景的描述的强大方法。请看以下示例

// Button.jsx
 
/**
 * # The Button component
 * Shows a button
 */
export const Button = () => <button>Click me</button>;

Button.stories.ts|tsx

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

{/* ButtonDocs.mdx */}
 
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} />