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 属性覆盖 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;
}