面向將來的原生 Web Components UI組件庫

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引用

<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~