实时视图

彩色更新:易于复制与完全可检查的UI组件

加载
多米尼克阮
@domyen

2018年带来了一个全新的前景,一个新的腰带尺寸,和彩色更新!

虽然十博体育备用网址不可能回到2017年的最佳时刻,但现在十博体育备用网址可以回顾过去 和感觉 UI组件的.

这个更新的目标是简化组件评审工作流.

免费在下面注册 & 在早期访问期间无限的彩色使用!

实时视图(β)

实时视图向您展示了每个提交的组件的完全可检查的工作版本, 就像你在故事书里看到的那样. 这使得复制和确认更改变得毫不费力.

您的团队可以在不接触代码的情况下对UI组件进行QA、评审和确认. 在大多数情况下,你无需离开浏览器标签页就可以完成视觉检查.

复制品是很痛苦的. 它们通常很少被记录下来,而且要花时间才能达到正确的状态. 虽然故事书减轻了一些痛苦,但它 仍然 只是为了确认更改而签出代码并启动Storybook是很乏味的. 使用实时视图,您不需要站在开发机器的前面, 把代码, 或者使用命令行检查UI更改.

现在可供选择的Early Access用户使用,并在未来几周内向所有人推出.

用例:

  • 开发人员检查UI标记的可访问性和清洁度
  • 设计师审查设计系统的变更
  • QA团队确认UI组件的外观和交互

组件上浆算法

彩色有一个改进的算法,以更好地计算组件截图的尺寸. 特别是, it should help if your component overflows its container’s bounds; especially when using a portals-like technique to render outside of the container completely.

快照组件是微妙的. 虽然截屏很简单,但问题总是出在细节上. 十博体育备用网址经常考虑的一个细节是如何裁剪组件图像.

裁剪确定图像快照的尺寸以及组件在该快照中出现的位置. 理想情况下,您希望作物在UI组件的边界上. 这最大限度地提高了用户看到的视觉信息的数量. chroms的新算法确保十博体育备用网址在截图中获得更多的组件

作物对 作物

和更多的

  • 新方案: 最新react-chromatic v0.7.8 包含更新和bug修复
  • 性能: web应用程序的性能得到了微调. 这大大加快了组件和构建的浏览速度.
  • UX: 现在十博体育备用网址在UI中使用嵌套组件的显示名. 例如,Webapp组件/Foo将显示为Foo. (升级包)

尝试用彩色来写故事书

彩色 是Storybook的可视化快照测试工具吗.

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4402个开发者,还在增加

十博体育备用网址正在招聘!

加入故事书和彩色的团队. 构建成千上万开发人员在生产环境中使用的工具. Remote-first.

视图的工作

受欢迎的文章

审查和合作

彩色更新
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10