成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

面向未來的Web Components UI組件庫

lei___ / 1395人閱讀

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

xy-ui

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

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

github項目地址

文檔

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

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

特性

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

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

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

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

無障礙。支持鍵盤訪問。

原則

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

比如xy-button有一個點(diǎn)擊擴(kuò)散的水波紋效果，就是采用CSS來實現(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ì)可查看源碼。大部分組件都是類似的設(shè)計。

兼容性

現(xiàn)代瀏覽器。

包括移動端，不支持IE。

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

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

目錄如下：

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

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

依賴

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

組件 依賴項 描述
xy-button xy-icon、xy-loading 按鈕。組件使用了icon和loading屬性。
xy-icon 無 圖標(biāo)。
xy-slider xy-tips 滑動條。組件使用了showtips屬性。
xy-select xy-button 下拉選擇器。組件內(nèi)部使用xy-button組合而成。
xy-tab xy-button 標(biāo)簽頁。組件導(dǎo)航按鈕使用了xy-button。
xy-loading 無 加載。
xy-switch 無 開關(guān)。
xy-checkbox 無 多選。
xy-radio 無 單選。
xy-tips 無 提示。
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 無 布局。
xy-input xy-icon、xy-button、xy-tips 輸入框。組件使用了icon屬性，同時有xy-button交互，表單驗證使用了xy-tips信息提示。
xy-textarea 同上 多行輸入框。同上。

無依賴組件直接引入多帶帶js即可，有依賴組件需要引入相關(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語法，不過需要注意script的類型type="module"。
react項目引用 
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項目引用

與原生類似，暫無研究。

使用

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

html 標(biāo)簽

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

button
document.createElement

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

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);
其他

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

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

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

btn.addEventListener("click",function(){
    alert(5)
})
自定義事件只能通過addEventListener綁定

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


    tab1
    tab2
    tab3

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

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

 
 
button 
button

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/105497.html

相關(guān)文章

  • （翻譯）Mantra官方文檔

    摘要：我們通過對我們應(yīng)用程序的每個部分進(jìn)行單元測試來實現(xiàn)這一點(diǎn)，同時遵循一個標(biāo)準(zhǔn)。它幫助你單元測試，動作和集成容器。當(dāng)在組件庫中使用庫函數(shù)時，它應(yīng)該是純函數(shù)。 Mantra 工作草案-版本0.2.0 簡介 這是一個Mantra草案規(guī)范，一個由Kadira創(chuàng)建的Meteor的應(yīng)用程序架構(gòu)。 它幫助開發(fā)人員構(gòu)建可維護(hù)的，面向未來的Meteor應(yīng)用程序。 版權(quán) The MIT License (M...

    denson 評論0 收藏0

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

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

    crelaber 評論0 收藏0

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

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

    coordinate35 評論0 收藏0

  • 編寫chameleon跨端組件的正確姿勢(上篇)

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

    h9911 評論0 收藏0

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

    摘要：高顏值好用易擴(kuò)展的微信小程序庫，有贊。一套高質(zhì)量的微信小程序組件庫。用和搭建的一個通用管理后臺基于實現(xiàn)的后臺管理系統(tǒng)模板一個后臺管理系統(tǒng)模板是一套組件化框架，支持定制主題，主要服務(wù)于前臺及中后臺產(chǎn)品?；诤笈_管理系統(tǒng)。 快來Star，在這里哦Awesome UIKit。 showImg(https://segmentfault.com/img/remote/14600000059942...

    zhangrxiang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<