面向未來(lái)的Web Components UI組件庫(kù)

lei___ 發(fā)布于2019-08-23 18:35 / 1445人閱讀

摘要：是一套使用原生規(guī)范開(kāi)發(fā)的跨框架組件庫(kù)。真正意義上實(shí)現(xiàn)了樣式和功能的組件化。比如有一個(gè)點(diǎn)擊擴(kuò)散的水波紋效果，就是采用來(lái)實(shí)現(xiàn)，只是輔助完成鼠標(biāo)位置的獲取詳細(xì)可查看源碼。組件使用了屬性。

xy-ui

xy-ui是一套使用原生Web Components規(guī)范開(kāi)發(fā)的跨框架UI組件庫(kù)。查看文檔

風(fēng)格參考Ant Design、Metiral Design。

github項(xiàng)目地址

文檔

該文檔基于docsify動(dòng)態(tài)創(chuàng)建，文中所有組件均為可交互實(shí)例。

現(xiàn)集成gitalk評(píng)論系統(tǒng)，有相關(guān)問(wèn)題可在下方評(píng)論區(qū)留言。

特性

跨框架。無(wú)論是react、vue還是原生項(xiàng)目均可使用。

組件化。shadow dom真正意義上實(shí)現(xiàn)了樣式和功能的組件化。

類(lèi)原生。一個(gè)組件就像使用一個(gè)div標(biāo)簽一樣。

無(wú)依賴(lài)。純?cè)瑹o(wú)需任何預(yù)處理器編譯。

無(wú)障礙。支持鍵盤(pán)訪問(wèn)。

原則

在實(shí)現(xiàn)組件功能時(shí)，遵循CSS為主，JavaScript為輔的思路，UI和業(yè)務(wù)邏輯分離，使得代碼結(jié)構(gòu)上更加簡(jiǎn)約。

比如xy-button有一個(gè)點(diǎn)擊擴(kuò)散的水波紋效果，就是采用CSS來(lái)實(shí)現(xiàn)，JavaScript只是輔助完成鼠標(biāo)位置的獲取

.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;
}

詳細(xì)可查看源碼。大部分組件都是類(lèi)似的設(shè)計(jì)。

兼容性

現(xiàn)代瀏覽器。

包括移動(dòng)端，不支持IE。

IE不支持原生customElements，webcomponentsjs可以實(shí)現(xiàn)對(duì)IE的兼容，不過(guò)很多CSS特性仍然無(wú)效，所以放棄

安裝

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

目錄如下：

.
└── xy-ui
    ├── components //功能組件
    |   ├── xy-icon.js
    |   └── ...
    └── iconfont //圖標(biāo)庫(kù)
        └── icon.svg

將components和iconfont文件夾放入項(xiàng)目當(dāng)中。

依賴(lài)

部分組件使用需要依賴(lài)其他組件，依賴(lài)關(guān)系如下

組件	依賴(lài)項(xiàng)	描述
xy-button	xy-icon、xy-loading	按鈕。組件使用了icon和loading屬性。
xy-icon	無(wú)	圖標(biāo)。
xy-slider	xy-tips	滑動(dòng)條。組件使用了showtips屬性。
xy-select	xy-button	下拉選擇器。組件內(nèi)部使用xy-button組合而成。
xy-tab	xy-button	標(biāo)簽頁(yè)。組件導(dǎo)航按鈕使用了xy-button。
xy-loading	無(wú)	加載。
xy-switch	無(wú)	開(kāi)關(guān)。
xy-checkbox	無(wú)	多選。
xy-radio	無(wú)	單選。
xy-tips	無(wú)	提示。
xy-message	xy-icon	全局提示。提示信息圖標(biāo)使用xy-icon。
xy-dialog	xy-icon、xy-button、xy-loading	彈窗提示。提示信息圖標(biāo)使用xy-icon，確認(rèn)取消按鈕使用了xy-button。組件使用了loading屬性。
xy-layout	無(wú)	布局。
xy-input	xy-icon、xy-button、xy-tips	輸入框。組件使用了icon屬性，同時(shí)有xy-button交互，表單驗(yàn)證使用了xy-tips信息提示。
xy-textarea	同上	多行輸入框。同上。

無(wú)依賴(lài)組件直接引入多帶帶js即可，有依賴(lài)組件需要引入相關(guān)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

現(xiàn)代瀏覽器支持原生import語(yǔ)法，不過(guò)需要注意script的類(lèi)型type="module"。

react項(xiàng)目引用

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

關(guān)于react中使用Web Components的注意細(xì)節(jié)可參考https://react.docschina.org/docs/web-components.html

vue項(xiàng)目引用

與原生類(lèi)似，暫無(wú)研究。

使用

使用一個(gè)組件有以下幾種方式：

html 標(biāo)簽

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

button

document.createElement

也可以通過(guò)document.createElement創(chuàng)建元素

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

new 操作符

自定義組件是通過(guò)class定義，可以通過(guò)new來(lái)實(shí)例化。

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

其他

大部分情況下，可以把組件當(dāng)成普通的html標(biāo)簽，

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

button

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

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

自定義事件只能通過(guò)addEventListener綁定

比如元素的獲取，完全符合html規(guī)則


    tab1
    tab2
    tab3

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

組件的布爾類(lèi)型的屬性也遵從原生規(guī)范（添加和移除屬性），比如

 
 
button 
button

總之，大部分情況下把它當(dāng)成普通的html標(biāo)簽（不用關(guān)注shadow dom的結(jié)構(gòu)）就好了，以前怎么做現(xiàn)在仍然怎么做，只是新增了方法而已。

更多詳細(xì)介紹請(qǐng)查看文檔，歡迎star~

GPU云服務(wù)器云服務(wù)器 web-components web前端和ui的區(qū)別 ui和web前端的區(qū)別 ui組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/105497.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

lei___

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

史上最強(qiáng)C語(yǔ)言教程----分支和循環(huán)（4）

閱讀 3771·2021-11-11 16:55
Windows平臺(tái)常用分析工具的使用總結(jié)

閱讀 1695·2021-10-08 10:04
今天收到《新程序員》雜志，忽然發(fā)現(xiàn)在CSDN賬號(hào)注冊(cè)已經(jīng)21年了！

閱讀 3651·2021-09-27 13:36
Element UI table參數(shù)中的selectable的使用

閱讀 2869·2019-08-30 15:53
90%的項(xiàng)目經(jīng)理都想不到，溝通成本原來(lái)可以這么小

閱讀 1925·2019-08-30 11:17
vue中render函數(shù)的使用

閱讀 1322·2019-08-29 16:55
vuejs實(shí)現(xiàn)圖片放大鏡效果

閱讀 2159·2019-08-29 13:57
css布局，左右固定中間自適應(yīng)實(shí)現(xiàn)

閱讀 2579·2019-08-29 13:13

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

面向未來(lái)的Web Components UI組件庫(kù)

相關(guān)文章

（翻譯）Mantra官方文檔

2018年前端開(kāi)發(fā)回顧

精讀《現(xiàn)代 js 框架存在的根本原因》

編寫(xiě)chameleon跨端組件的正確姿勢(shì)(上篇)

**搜集React、Vue、Angular和傳統(tǒng)UI組件庫(kù)以及后臺(tái)管理平臺(tái)模板**

發(fā)表評(píng)論

0條評(píng)論

lei___

男|高級(jí)講師

TA的文章

史上最強(qiáng)C語(yǔ)言教程----分支和循環(huán)（4）

Windows平臺(tái)常用分析工具的使用總結(jié)

今天收到《新程序員》雜志，忽然發(fā)現(xiàn)在CSDN賬號(hào)注冊(cè)已經(jīng)21年了！

Element UI table參數(shù)中的selectable的使用

90%的項(xiàng)目經(jīng)理都想不到，溝通成本原來(lái)可以這么小

vue中render函數(shù)的使用

vuejs實(shí)現(xiàn)圖片放大鏡效果

css布局，左右固定中間自適應(yīng)實(shí)現(xiàn)

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

面向未來(lái)的Web Components UI組件庫(kù)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！