面向未來的Web Components UI組件庫

lei___ 發布于2019-08-23 18:35 / 1379人閱讀

摘要：是一套使用原生規范開發的跨框架組件庫。真正意義上實現了樣式和功能的組件化。比如有一個點擊擴散的水波紋效果，就是采用來實現，只是輔助完成鼠標位置的獲取詳細可查看源碼。組件使用了屬性。

xy-ui

xy-ui是一套使用原生Web Components規范開發的跨框架UI組件庫。查看文檔

風格參考Ant Design、Metiral Design。

github項目地址

文檔

該文檔基于docsify動態創建，文中所有組件均為可交互實例。

現集成gitalk評論系統，有相關問題可在下方評論區留言。

特性

跨框架。無論是react、vue還是原生項目均可使用。

組件化。shadow dom真正意義上實現了樣式和功能的組件化。

類原生。一個組件就像使用一個div標簽一樣。

無依賴。純原生，無需任何預處理器編譯。

無障礙。支持鍵盤訪問。

原則

在實現組件功能時，遵循CSS為主，JavaScript為輔的思路，UI和業務邏輯分離，使得代碼結構上更加簡約。

比如xy-button有一個點擊擴散的水波紋效果，就是采用CSS來實現，JavaScript只是輔助完成鼠標位置的獲取

.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: var(--x,0); 
    top: var(--y,0);
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}
.btn:not([disabled]):active::after {
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}

詳細可查看源碼。大部分組件都是類似的設計。

兼容性

現代瀏覽器。

包括移動端，不支持IE。

IE不支持原生customElements，webcomponentsjs可以實現對IE的兼容，不過很多CSS特性仍然無效，所以放棄

安裝

目前還沒有托管npm，可以在github上獲取最新文件。

目錄如下：

.
└── xy-ui
    ├── components //功能組件
    |   ├── xy-icon.js
    |   └── ...
    └── iconfont //圖標庫
        └── icon.svg

將components和iconfont文件夾放入項目當中。

依賴

部分組件使用需要依賴其他組件，依賴關系如下

組件	依賴項	描述
xy-button	xy-icon、xy-loading	按鈕。組件使用了icon和loading屬性。
xy-icon	無	圖標。
xy-slider	xy-tips	滑動條。組件使用了showtips屬性。
xy-select	xy-button	下拉選擇器。組件內部使用xy-button組合而成。
xy-tab	xy-button	標簽頁。組件導航按鈕使用了xy-button。
xy-loading	無	加載。
xy-switch	無	開關。
xy-checkbox	無	多選。
xy-radio	無	單選。
xy-tips	無	提示。
xy-message	xy-icon	全局提示。提示信息圖標使用xy-icon。
xy-dialog	xy-icon、xy-button、xy-loading	彈窗提示。提示信息圖標使用xy-icon，確認取消按鈕使用了xy-button。組件使用了loading屬性。
xy-layout	無	布局。
xy-input	xy-icon、xy-button、xy-tips	輸入框。組件使用了icon屬性，同時有xy-button交互，表單驗證使用了xy-tips信息提示。
xy-textarea	同上	多行輸入框。同上。

無依賴組件直接引入多帶帶js即可，有依賴組件需要引入相關js。

如需多帶帶使用xy-tips組件，僅需引用xy-tips.js。

// .
// └── project
//     ├── components
//     |   └── xy-tips.js
//     └── index.html
import "./components/xy-tips.js";

如需多帶帶使用xy-input組件，需引用xy-input.js、xy-button.js、xy-icon.js、xy-tips.js。

// └── project
//     ├── components
//     |   ├── xy-input.js
//     |   ├── xy-button.js
//     |   ├── xy-icon.js
//     |   └── xy-tips.js
//     └── index.html
import "./components/xy-input.js";

大部分情況下全部引用即可

引用 html引用


button

現代瀏覽器支持原生import語法，不過需要注意script的類型type="module"。

react項目引用

import "./components/xy-icon.js";
ReactDOM.render(button, document.body);

關于react中使用Web Components的注意細節可參考https://react.docschina.org/docs/web-components.html

vue項目引用

與原生類似，暫無研究。

使用

使用一個組件有以下幾種方式：

html 標簽

這是最常用的使用方式（推薦）。

button

document.createElement

也可以通過document.createElement創建元素

const btn = document.createElement("xy-button");
document.body.appenChild(btn);

new 操作符

自定義組件是通過class定義，可以通過new來實例化。

import XyButton from "./components/xy-button.js";
const btn = new XyButton();
document.body.appenChild(btn);

其他

大部分情況下，可以把組件當成普通的html標簽，

比如給button添加事件，有以下幾種方式

button

btn.onclick = function(){
    alert(5)
}

btn.addEventListener("click",function(){
    alert(5)
})

自定義事件只能通過addEventListener綁定

比如元素的獲取，完全符合html規則


    tab1
    tab2
    tab3

const tab3 = document.getElementById("tab3");
tab3.parentNode;//xy-tab

組件的布爾類型的屬性也遵從原生規范（添加和移除屬性），比如

 
 
button 
button

總之，大部分情況下把它當成普通的html標簽（不用關注shadow dom的結構）就好了，以前怎么做現在仍然怎么做，只是新增了方法而已。

更多詳細介紹請查看文檔，歡迎star~

云服務器 GPU云服務器 web-components web前端和ui的區別 ui和web前端的區別 ui組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105497.html

（翻譯）Mantra官方文檔

摘要：我們通過對我們應用程序的每個部分進行單元測試來實現這一點，同時遵循一個標準。它幫助你單元測試，動作和集成容器。當在組件庫中使用庫函數時，它應該是純函數。 Mantra 工作草案-版本0.2.0 簡介這是一個Mantra草案規范，一個由Kadira創建的Meteor的應用程序架構。它幫助開發人員構建可維護的，面向未來的Meteor應用程序。版權 The MIT License (M...

denson 2019-08-20 12:26 評論0 收藏0
2018年前端開發回顧

摘要：在整個年，看到發布版增加了許多功能，包括新的生命周期方法新的上下文指針事件延遲函數和。它在等待渲染異步響應時數據，是延遲函數背后用來管理組件的代碼分割的。發布自第版開始將近年后，于年發布。前端發展發展迅速,非常的快。本文將回顧2018年一些重要的前端新聞，事件和 JavaScript 趨勢。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ showImg(ht...

crelaber 2019-08-23 14:12 評論0 收藏0
精讀《現代 js 框架存在的根本原因》

摘要：官方規范估計很難出現現代框架的設計了，因為官方設計中前端三劍客是相互分離的方案，為了解決現階段前端框架的問題，必須由完全接管，這幾乎就是，或者支持語法的，可這與最初網頁設計思路是違背的。現代前端框架正在告訴我們新的三劍客虛擬虛擬。 1 引言深入思考為何前端需要框架，以及 web components 是否可以代替前端框架？原文地址，建議先閱讀原文，或者閱讀概述。 2 概述現在前端...

coordinate35 2019-08-22 17:23 評論0 收藏0
編寫chameleon跨端組件的正確姿勢(上篇)

摘要：使用語法統一實現跨端組件請關注文章編寫跨端組件的正確姿勢下篇依靠強大的多態協議，項目中可以輕松使用各端的第三方組件封裝自己的跨端組件庫。這種做法同時解決了組件命名沖突問題，例如在微信小程序端引用表示調用小程序原生的組件而不是內置的組件。在chameleon項目中我們實現一個跨端組件一般有兩種思路：使用第三方組件封裝與基于chameleon語法統一實現。本篇是編寫chameleon跨端...

h9911 2019-08-23 15:42 評論0 收藏0
搜集React、Vue、Angular和傳統UI組件庫以及后臺管理平臺模板

摘要：高顏值好用易擴展的微信小程序庫，有贊。一套高質量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現的后臺管理系統模板一個后臺管理系統模板是一套組件化框架，支持定制主題，主要服務于前臺及中后臺產品。基于后臺管理系統。快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

zhangrxiang 2019-08-29 13:59 評論0 收藏0