请选择 进入手机版 | 继续访问电脑版

2020年您应该知道的9个Web组件UI库

频道栏目 /  著作权归作者本人所有

admin  2020-3-6 13:09

当我开始搜索Web组件库以撰写这篇文章时,我最初想到的是“在哪里可以找到很棒的lit-html库?” 这是因为我还没有充分挖掘Web组件的全部潜力。这是框架/库的思维方式。就像问,我想要一个很酷的html库。根据定义,所有Web组件都可以互操作以与其他组件很好地协作。
基于Web组件标准的自定义组件和小部件将在现代浏览器上运行,并且可以与任何HTML兼容的JavaScript库或框架一起使用。
在围绕Web组件,Stencil,Svelte,Lit HTML等的所有讨论中,我决定看一下当今网络上可用的Web组件库,以便在未来起步。欢迎提出更多建议!
提示:建立自己的库!如今,借助bit.dev 和Bit(GitHub)之类的工具比以往任何时候都更加轻松,这些工具使您可以从应用程序动态收集现有的UI组件,并以团队的形式在项目中共享它们。试试看!

1.材料组件网

通常,标题“ Material”将UI组件库放在星号顶部并下载计数。Google的Material-components-web库是Material-UI库的Web组件版本。尽管仍在进行中,但这些Web组件可以并入各种上下文和框架中。绝对要跟踪这一点。

2.高分子元素

Google的Polymer库可让您构建封装的,可重复使用的Web组件,这些组件像标准HTML元素一样工作,并且具有与导入和使用任何其他HTML元素一样简单的体验。Polymer elements是一个GitHub组织,其中包含100多个可重用的Polymer组件,它们是独立的存储库,您可以浏览和使用现有的存储库。例:

<!-导入组件-> 
<script src =“ https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module” type =“ module”> </ script> 
<!-与其他任何HTML元素一样使用-> 
<paper-checkbox> Web组件!</ paper-checkbox>

3. Vaadin Web组件


我认为这一点很有希望。这是一个相当新的库,其中包含一组将近30个不断发展的开源Web组件,用于跨现代浏览器构建移动和桌面Web应用程序的UI。开发正在进行中,我一定会跟踪该库。一探究竟。

4.有线元素

有线元素是手绘的7K星集合。这些元素是为线框构建的,因此不会绘制任何两个渲染图,就像两个单独的手绘形状一样。有用?也许。好厉害 肯定:)和他们一起玩在线在这里,即使作出反应和Vue公司

5.可定制Web组件集

Elix是一组社区驱动的可重用的可定制Web组件集,用于常见的用户界面模式。为了确保高质量的标准,将根据Web组件的黄金标准清单来测量组件,该清单使用内置的HTML元素作为质量标尺。我对此感到非常兴奋,他们正在寻找贡献者……:)

6.时间要素

<local-time datetime =“ 2014-04-01T16:30:00-08:00”> 
  2014年4月1日下午4:30 
</ local-time> 
- 
<local-time datetime =“ 2014-04-01T16: 30:00-08:00“> 
  2014年4月1日21:30 
</ local-time>

这个相当老的1.5K stars库基本上是一个组件,提供标准HTML <time>元素的自定义子类型。通过将时间戳记格式化为本地字符串或在用户浏览器中自动更新的相对文本,您可以创建自定义扩展名以在任何地方使用。

7. UI5-webcomponents

该库由SAP的UI5构建,是一组轻量,可重用和独立的UI元素。但是,这些组件不是基于UI5构建的,而是独立元素。您可以跨框架和应用程序使用。组件的设计符合《SAP Fiori设计准则》,并结合了Fiori 3设计。查看现场游乐场和API。

8. Patternfly

git clone git@github.com:patternfly / patternfly-elements.git 
cd patternfly-elements 
npm install#由于lerna bootstrap 
npm运行故事书,这将花费一些时间

PatternFly Elements是将近20个灵活轻量的Web组件以及用于构建它们的工具的集合。PatternFly Elements的大小和样板都很轻巧(这几乎是Web组件的标准),可在React,Vue,Angular,vanilla JS和任何使用HTML元素的地方使用。

9. Web组件组织

这不是图书馆,而是Google的基于Polymer元素和好友的Web组件发现门户。我在这里列出它是因为它是从Polymer团队更新新的Web组件的有用方法,并且提供了一些从Web组件开始阅读的有用资源。


鲜花

握手

雷人

路过

鸡蛋
收藏 分享 邀请

暂无相关评论

评论文明上网理性发言,全站可见,请文明发言

手机版|ObjectX 超对象 |粤ICP备20005929号
Powered by  © 2019-2020版权归ObjectX 超对象