文件

在 Markdown 中記錄元件用法和屬性

在 Github 上檢視

5百萬

每週下載次數

由 Storybook 製作

Storybook 文件

遷移指南：此頁面記錄了最近在 7.0.0 中引入的 Storybook 設定方法，如果要遷移到此 Storybook 設定格式，請參閱遷移指南。

Storybook 文件將您的 Storybook 故事轉換為世界一流的元件文件。

DocsPage。 開箱即用，您的所有故事都會獲得一個 DocsPage。 DocsPage 是零設定的整合，將您的元件故事、文字描述、docgen 註解、屬性表格和程式碼範例整合到整潔、可讀的頁面中。

MDX。 如果您想要更多控制權，MDX 可讓您撰寫長篇 Markdown 文件，並在同一個檔案中包含故事。您也可以使用它來撰寫純粹的文件頁面，並將它們嵌入 Storybook 中與您的故事並列。

就像 Storybook 一樣，文件支援所有主要的檢視層，包括 React、Vue 3、Angular、HTML、Web 元件、Svelte 等等。

繼續閱讀以了解更多資訊

Storybook 文件

DocsPage

當您安裝文件時，每個故事都會獲得一個 DocsPage。 DocsPage 從您的故事、元件、原始程式碼和故事中繼資料提取資訊，以建構一個合理的零設定預設值。

按一下 文件 索引標籤即可檢視

如需更多關於其運作方式的資訊，請參閱DocsPage 參考。

MDX

MDX 是一種語法，用於在同一個檔案中並排撰寫包含故事的長篇文件。與開箱即提供智慧文件的 DocsPage 相反，MDX 可讓您完全控制元件文件。

這是一個範例檔案

import { Meta, Story, Canvas } from '@storybook/blocks';
import * as CheckboxStories from './Checkbox.stories';

<Meta title="MDX/Checkbox" of={CheckboxStories} />

# Checkbox

With `MDX` we can include a story for `Checkbox` right in the middle of our
markdown documentation.

<Canvas>
  <Story of={CheckboxStories.Unchecked} />
</Canvas>

這是它在 Storybook 中的呈現方式

如需更多關於 MDX 的資訊，請參閱MDX 參考。

框架支援

Storybook 文件支援 Storybook 支援的所有檢視層，除了 React Native（目前）。還有一些框架特定的功能，例如屬性表格和內聯故事呈現。以下頁面記錄了目前的支援狀態

框架支援

注意： # = WIP 支援

想要為您最喜歡的框架新增增強功能嗎？請查看此開發人員指南

安裝

首先新增套件。確保您的 @storybook/* 套件版本一致

yarn add -D @storybook/addon-docs

文件具有 react 的對等相依性。如果您想在 MDX 中撰寫故事，您可能也需要新增此相依性

yarn add -D react

然後將以下內容新增到您的 .storybook/main.js

export default {
  stories: [
    '../src/**/*.mdx', // 👈 Add this, to match your project's structure
    '../src/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-docs', // 👈 Also add this
  ],
};

請務必查看框架特定的安裝需求

預設選項

addon-docs 預設值具有一些組態選項，可用於設定其 babel/webpack 載入行為。以下是帶選項使用預設值的範例

export default {
  addons: [
    {
      name: '@storybook/addon-docs',
      options: {
        csfPluginOptions: null,
        mdxPluginOptions: {},
      },
    },
  ],
};

csfPluginOptions 是一個用於設定 @storybook/csf-plugin 的物件。當設定為 null 時，它會告知文件完全不要執行 csf-plugin，這可以用作最佳化，或者如果您已在 main.js 中使用 csf-plugin。

隨著 7.0 版的發布，不再可能使用 transcludeMarkdown 選項直接將 .md 檔案匯入 Storybook。相反地，我們建議使用 Markdown Doc Block 將 Markdown 檔案匯入您的 Storybook 文件。

TypeScript 設定

從 SB6 開始，TypeScript 是零設定，應該可以開箱即用地與 SB 文件搭配使用。如需進階設定選項，請參閱屬性文件。

文件

Storybook 文件

DocsPage

MDX

框架支援

安裝

請務必查看框架特定的安裝需求

預設選項

TypeScript 設定

更多資源