简介
@jgertig/storybook-addon-info 是一个 Storybook 的插件，它可以帮助我们在 Storybook 中添加组件文档，并自动生成文档页面。
安装
首先，需要安装 Storybook，如果还没有安装可以通过如下命令进行安装：
--- ------- -- --------------
然后，安装 @jgertig/storybook-addon-info 插件：
--- ------- ---------- -----------------------------
使用
在
.storybook目录下新建一个文件夹addons，并在该文件夹下创建一个名为info.js的文件。在
info.js中添加如下代码：
------ - ------------- --------- - ---- ------------------- ------ --------- ---- -------------------------------- ------------------------ -------- ------------- - -- -- ------- ------ ---------- -- ---------------------- - ---------------------- --------
- 在你组件的 stories.js 文件中，导入
withInfo方法，并使用它对组件进行装饰：
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ - -------- - ---- -------------------------------- ------ ----------- ---- ---------------- ------------------------ ------- ----------------------- --------------- -- -- ------------ ----
- 现在就可以在 Storybook 中查看你的组件文档啦！
配置
@jgertig/storybook-addon-info 提供了很多配置项，可以根据需求进行设置。这里列举一些常用的配置：
header
用来自定义文档的标题，可以是一个字符串或者一个函数。
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ - -------- - ---- -------------------------------- ------ ----------- ---- ---------------- ----- ------ - -- -- - --------------- ------- -- ------------------------ ------- ------------------------ ------ --- --------------- -- -- ------------ ----
inline
用来设置文档是内联显示还是在弹出框中显示，默认为内联显示。
------ ----- ---- -------- ------ - --------- - ---- ------------------- ------ - -------- - ---- -------------------------------- ------ ----------- ---- ---------------- ------------------------ ------- ------------------------ ------- ----- --- --------------- -- -- ------------ ----
text
用来设置组件的描述文本。
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - -------- - ---- --------------------------------
------ ----------- ---- ----------------
------------------------ -------
------------------------
----- -
---------------------------
-
---
--------------- -- -- ------------ ----propTables
用来设置需要渲染的组件/组件库的 propTypes。
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - -------- - ---- --------------------------------
------ ----------- ---- ----------------
------ - ------ - ---- -------
------------------------ -------
------------------------
----------- ---------
------------------ -------------
---
--------------- -- -- ------------ ----结语
@jgertig/storybook-addon-info 是一个十分实用的 Storybook 插件，可以让我们方便地添加组件文档，并自动生成文档页面。希望本教程可以帮助大家更好地使用它。
完整示例代码
.storybook/addons/info.js
------ - ------------- --------- - ---- ------------------- ------ --------- ---- -------------------------------- ------------------------ -------- ------------- - ---------------------- - ---------------------- --------
src/stories/MyComponent.stories.js
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - -------- - ---- --------------------------------
------ ----------- ---- ----------------
------ - ------ - ---- -------
----- ------ - -- -- -
--------------- -------
--
------------------------ -------
------------------------
-------
------- ------
----- -
---------------------------
--
----------- ---------
------------------ -------------
---
--------------- -- -- ------------ ----来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/128074