Storybook 插件依赖

此插件将交互式依赖树添加到自动文档页面。

入门

此插件支持 v7 和 v8。要将其与 Storybook 7 一起使用，请安装 npm i -D [email protected]

1. 安装

npm i -D storybook-addon-dependencies
yarn add -D storybook-addon-dependencies

2. 在 main.js 中注册插件

export default {
  addons: ["storybook-addon-dependencies"],
};

3. 构建依赖树

4. 运行 Storybook

开发脚本

要构建故事组件的依赖树，请运行

npx storybook-addon-dependencies

代码块

此插件覆盖默认的文档页面，如果存在自定义文档页面，请在您的模板中使用此自定义文档代码块。

import { Dependencies, Dependents } from "storybook-addon-dependencies/blocks";

钩子

要使用自定义文档代码块创建您自己的树设计，请使用钩子获取当前的故事标题，并使用 API 获取标题树。

import { useCurrentStoryTitle } from "storybook-addon-dependencies/hooks";

API

import { getTree, getDependenciesTree, getDependentsTree } from "storybook-addon-dependencies/api";

警告

• 不要在同一个文件中编写故事组件。这可能会导致与树构建器发生冲突。