Storybook 文件目錄擴充套件

警告
此 Storybook 擴充套件現在是 Storybook 7.1+ 的官方功能。此儲存庫不再維護。

Storybook 文件的目錄擴充套件。

在內容旁邊取得自動產生的連結列表。

它在底層使用 tocbot。

安裝

npm i -D storybook-docs-toc

請注意，styled-components 是一個對等相依性。

用法

看看這個 Storybook 的 示範

將此加入您的 preview.js 檔案

- import { DocsContainer } from '@storybook/addon-docs';
+ import { withTableOfContents } from 'storybook-docs-toc';

- addParameters({
-    docs: {
-        container: DocsContainer,
-    },
-});

+ addParameters(withTableOfContents());

或如果您需要更多彈性

+ import React from 'react';
- import { DocsContainer } from '@storybook/addon-docs';
+ import { BackToTop, TableOfContents } from 'storybook-docs-toc';

export const parameters = {
    docs: {
-        container: DocsContainer,
+        container: ({ children, ...rest }) => (
+            <React.Fragment>
+                <DocsContainer {...rest}>
+                    <TableOfContents className="sbdocs sbdocs-toc--custom" />
+                    {children}
+                    <BackToTop className="sbdocs sbdocs-top--custom" />
+                </DocsContainer>
+            </React.Fragment>
+        ),
    },
};

配置

您可以透過 DocsContainerHOC 或 TableOfContents 上的 config prop 覆寫 tocbot 的預設選擇器。這些也接受自訂的 title。

自訂

提供一些 CSS 自訂屬性，以自訂目錄和回到頂部按鈕的樣式。

.sbdocs.sbdocs-toc--custom {
  --toc-color: #202020;
  --toc-background: #fff;
  --toc-indicator-color: #efefef;
  --toc-indicator-color--active: #fbd476;
}

.sbdocs.sbdocs-top--custom {
  --toc-button-color: #66bf3cff;
  --toc-button-color--hover: #66bf3ccc;
  --toc-button-color--active: #66bf3caa;
  --toc-button-background: #e7fdd8ff;
  --toc-button-background--hover: #e7fdd8cc;
  --toc-button-background--active: #e7fdd8aa;
}