說明

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 註解或 parameters 中提取，並以 markdown 格式呈現。請參閱撰寫說明以瞭解更多詳細資訊。

撰寫說明

根據您想要達成的目標，有多個地方可以撰寫組件/Story 的說明。說明可以寫在 Story 層級以描述組件的每個 Story，也可以寫在 Meta 或組件層級以概括描述組件。

說明可以寫成 Story、Meta 或組件上方的 JSDoc 註解。或者，它們也可以在 parameters 中指定。若要透過 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} />