Storybook Docs 目录插件

警告
这个 Storybook 插件现在是 Storybook 7.1+ 的官方功能。这个仓库不再维护了。

用于 Storybook Docs 的目录插件。

在你的内容旁边获取自动生成的链接列表。

它在内部使用了 tocbot。

安装

npm i -D storybook-docs-toc

请注意，styled-components 是一个 peer dependency。

使用方法

查看这个 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 属性来覆盖 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;
}