简介
@jgertig/storybook-addon-info 是一个 Storybook 的插件，它可以帮助我们在 Storybook 中添加组件文档，并自动生成文档页面。
安装
首先，需要安装 Storybook，如果还没有安装可以通过如下命令进行安装：
npm install -g @storybook/cli
然后，安装 @jgertig/storybook-addon-info 插件：
npm install --save-dev @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
