官方的:
Integrations | Storybook: Frontend workshop for UI development
storybook/ADDONS_SUPPORT.md at master · storybookjs/storybook · GitHub
yarn add -D @storybook/addon-docs @storybook/addon-design-assets @storybook/addon-storysource
storybook/code/addons/storysource at next · storybookjs/storybook · GitHub
查看 Storybook story 源码
查看设计原图
GitHub - storybookjs/addon-design-assets: Design asset preview for storybook
如果是sketch设计稿,直接使用:storybook-addon-sketch Addon | Storybook: Frontend workshop for UI development
storybook/code/addons/docs at next · storybookjs/storybook · GitHub
文档增强
官网插件knobs,actions,source,docs,viewport,storyshots,backgrounds,accesssibility,console,links
一般安装完,官方默认给配了actions,插件和links插件
有actions,就会有个控制台一样的面板,有点像jest的mockfn一样,触发组件操作可以通过它提供的函数打印到面板上。
这个插件比较常用,可以在不同story间进行跳转,可以当是个a链接用。
这个插件厉害了,主要是用来生成变量,并可以进行在线切换用的。比如最简单的切换文字。很多组件上面都有文字,那么文字可能有长有短,就可以使用这个插件设定一个长的文字和一个短的文字,预览时可以切换。
另外还有很多强大功能。甚至可以代替background插件改变背景颜色。
需要借助于action插件来输出,为啥要用这个插件说明上写了,说可能有些情况要。。。反正我有点没理解。
直接显示storybook上写的代码是哪一行写的。预览可以看上一个console的预览。
docs插件就不用说了吧,支持mdx,就是最后可以展示给不懂行的人看的文档。
我自己写了个组件库玩,还没写完,很多高级功能都没用,感觉这些功能比较适合团队开发,我一个人当然图快,主要就是靠docs插件做文档,同时部署静态网站到githubpage。我的组件库在线预览。
这个插件可以对tab页新增个选项,跟chrome里的切换不同设备有点像,使用这个功能,就可以把一个组件放入不同设备大小的story里。
可以设置story的背景颜色之类,当然也有些简单方法可以不需要background插件就能设置背景。
这个插件官网写的让人有点晕,实际还分成2个插件,都是jest相关。
主要插件是storyshots,它可以把jest运行结果置于底部控制台页上,介绍说还可以拿到旧代码快照什么的,有点没懂怎么搞。
另一个插件是storyshots-puppeteer,基于上面那个,pupeteer就有点像selenium一样开个虚拟浏览器去做测试。
官方插件就上面那些,有些社区插件写的也很不错,可以看看。
可以给你的移动端网站用户体验上自动提供建议。
这个功能相当6啊,对于移动开发经验不足的人有很多帮助。
这个插件我个人觉得适合比较大的项目,我们写样式往往要制作多个变量,比如antd那个样式文件,定义了很多很多变量,还有动画之类的,但人脑肯定记不过来,就算记得了也可能记不得它是什么效果。有了这个插件,就可以把变量和效果全部展示出来。在开发过程中提供帮助。
用于制作模拟graphql的插件,相当于可以模拟个假graphql传来的数据进行展示与调试。
也是graphql的一套工具,可以在线修改数据之类。
这个功能有点对标了docs插件,感觉适合纯内部分享使用,它可以对每个story做一个文档说明,并且功能和docs差不多,就是docs是在tab页并且可以独立输出,这个是在addons界面,并且不是默认展现,每个都需要点一下看见。
这个插件不支持storybook5,有段时间没维护了,就说一下功能吧,就是可以通过配置版本号实现各个版本的组件库中穿梭。比如我1.0.0的button是一个样子,1.0.1的button是另一个样子,那么就可以来回切换看。
很多设计师会用sketch软件,这个工具可以把storybook的文件导出,导入给sketch使用。不过这个只支持5以下,storybook6本身就可以自己导出给sketch了。
这个插件感觉有点对标source,或者是docs部分功能。可以显示story中jsx怎么写的。
在线实时编辑,感觉这个功能有点对标knobs。
全局国际化用。
这个插件可以设定故事iframe设定些属性。
这个插件可以用来整合一些测试工具到storybook上,有点类似storyshots插件
这个插件名字起的挺好啊,用途就是通过puppeteers来对每个故事截图,然后生成到文件夹里。
响应式布局一次头全预览!不过感觉加了viewport然后使用docs插件也能做到。
转载本站文章《storybook插件说明: integrations与addons推荐》,
请注明出处:storybook插件说明: integrations与addons推荐 - Storybook Driven Development学习笔记—组件化之后之组件管理 - 周陆军的个人网站