摘要：最近组件库支持了，并且做了功能的升级，文档看这里下文不谈论这门技术，我打算从组件的设计以及一些细节来谈谈组件库这件事。组件细节举几个例子来谈谈组件设计和细节固钉当滚动条滑动，固钉元素划出视界时候，我们希望它能仍然钉在那里，展示在视界内。
最近组件库 N3 支持了 vue 2.0 ，并且做了功能的升级， 文档看这里 https://n3-components.github....
下文不谈论 vue 这门技术，我打算从组件的设计以及一些细节来谈谈组件库这件事。
UI组件库是什么？
浏览器的UI组件是 web 程序中离用户最近的功能性部件，交互基本都通过它们实现。
由于浏览器提供的原生组件数量有限，又存在很多限制，所以我们需要更丰富的ui组件来帮助我们的应用突破边界，更好的与用户沟通。
随着 web 的崛起，大量的网页程序出现，各种组件也被设计出来，好的，用户接受的，喜欢的组件设计被留下来，用户觉得难用的，变扭的组件设计就被淘汰。
这些被留下来的，使用场景比较广泛，功能性强，比较实用的组件们被放到了一起组成一个组件库，1.方便我们使用 2.统一界面风格 3.统一管理(维护和升级)
基础组件
我以为基础组件的功能已经比较明确了，应该有个规范，包括所需要实现的功能，接口以及表现等，组件开发者都按照这个规范开发，提高效率。
基础组件是只有很明确的功能，他只完成他的使命，不应该有太多主张。
组件细节
举几个例子来谈谈组件设计和细节
固钉: 当滚动条滑动，固钉元素划出视界时候，我们希望它能仍然钉在那里，展示在视界内。实现可能就是监听滚动事件，然后设置元素的定位，当元素设置为 position:fixed 的时候，由于其脱离文档流，页面的其它元素可能会上移，那在原来的位置放置一个同样高宽的占位元素就能避免抖动。
按钮：按钮的设计是拟物而来，但是随着扁平化设计流行已久，现在的按钮基本已经被拍扁，用户也已经习惯。N3 也是遵从扁平化的设计，但在按钮上，我给他的按压状态添加了内部阴影，试图营造一种软按钮的按压效果，看起来不那么扁平。
时间选择: 在 N3 中，时间选择器用了一个滑块的设计，我承认这是一个低效的设计，直接用数字的滚动能让用户更快达到目的。在钟表中，转动旋钮来拨动指针，那是我会很仔细，因为不容易。时间选择是个得出精确值的操作，希望借此提醒用户慎重操作，也让过程不那么无趣。
以上是我在写 N3 过程中的一些想法, N3 还需要不断完善， 也会继续和大家一起交流分享。
感谢 @x-cold , @Dafrok ,@chanyying 三位对 N3 做出的贡献
2017 大家一起加油: )
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50393.html
摘要：引言组件中有很多弹出式组件，常见的如，以及等。这样一种层次结构在实践中大大降低了各类弹层组件的实现和维护成本。但是的组件实现了一个大多数组件库都没有实现的功能弹层的嵌套处理。 引言 UI 组件中有很多弹出式组件，常见的如 Dialog，Tooltip 以及 Select 等。这些组件都有一个特点，它们的弹出层通常不是渲染在当前的 DOM 树中，而是直接插入在 body （或者其它类似的...
阅读 2255·2023-04-26 02:14
阅读 2926·2021-09-30 09:46
阅读 2100·2021-09-24 09:48
阅读 951·2021-09-24 09:47
阅读 3252·2019-08-30 15:44
阅读 1878·2019-08-30 15:44
阅读 3278·2019-08-30 14:18
阅读 1948·2019-08-30 12:58
