面向未來的原生 Web Components UI元件庫

XboxYan發表於2019-07-09
WebUI元件

xy-ui

xy-ui是一套使用原生Web Components規範開發的跨框架UI元件庫。檢視文件

風格參考Ant Design、Metiral Design。

github專案地址

面向未來的原生 Web Components UI元件庫

文件

該文件基於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引用

<script type="module">
    import './components/xy-button.js';
</script>
<xy-button>button</xy-button>
複製程式碼

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

react專案引用

import './components/xy-icon.js';
ReactDOM.render(<xy-button>button</xy-button>, document.body);
複製程式碼

關於react中使用Web Components的注意細節可參考react.docschina.org/docs/web-co…

vue專案引用

與原生類似，暫無研究。

使用

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

html 標籤

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

<xy-button>button</xy-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標籤，

比如給<xy-button>button</xy-button>新增事件，有以下幾種方式

<xy-button onclick="alert(5)">button</xy-button>
複製程式碼
btn.onclick = function(){
    alert(5)
}

btn.addEventListener('click',function(){
    alert(5)
})
複製程式碼

自定義事件只能通過addEventListener繫結

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

<xy-tab>
    <xy-tab-content label="tab1">tab1</xy-tab-content>
    <xy-tab-content label="tab2">tab2</xy-tab-content>
    <xy-tab-content label="tab3" id="tab3">tab3</xy-tab-content>
</xy-tab>
複製程式碼
const tab3 = document.getElementById('tab3');
tab3.parentNode;//xy-tab
複製程式碼

元件的布林型別的屬性也遵從原生規範（新增和移除屬性），比如

<xy-dialog show></xy-dialog> <!-- 顯示 -->
<xy-dialog></xy-dialog> <!-- 隱藏 -->
<xy-button loading>button</xy-button> <!-- 載入中 -->
<xy-button>button</xy-button> <!-- 正常 -->
複製程式碼

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

更多詳細介紹請檢視文件，歡迎star~

相關文章