描述

Description 區塊會顯示元件、Story 或 meta 的描述，這些描述取自其各自的 JSDoc 註解。

{/* 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 是使用下列 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 註解

這個流程讓您能夠以強大的方式覆寫每種情境的描述。請看以下範例

// Button.jsx
 
/**
 * # 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'
      },
    },
  },
};

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