iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

Web Component 網頁元件之路 系列

當我是 React 工程師時 , 我使用 Material-UI ,
當我是 Vue 工程師時 , 我需要用 Element-UI ,
那我換到 Angular 時 , 我需要學新的一套 UI 框架 (っ °Д °;)っ
有沒有不更換 UI 框架的方法呢 ?
基於上方的問題 , 我踏上了 Web Component 網頁元件的旅途
希望各位看官喜歡這 30 天的沿途風景 <( _ _ )>

鐵人鍊成 | 共 30 篇文章 | 3 人訂閱 訂閱系列文 RSS系列文
DAY 1

[Day01] - 旅途開始前的茶室閒聊

去年寶哥在 Modern WEB 中介紹過 Angular 有時會發生版本不相容的 issue , 利用 Web Component 可以 讓舊版的 Angul...

2021-09-05 ‧ 由 Tree 分享
DAY 2

[Day02] - 旅途開始前的行前解說

昨天提到了 Web Component , 今天先初步了解一下什麼是 WebComponent 跟他能做什麼吧 ! WebComponent 簡介 WebCo...

2021-09-06 ‧ 由 Tree 分享
DAY 3

[Day03] - 第一個 WebComponent 元件

昨天借用了 Wired Elements 來說明什麼是 WebComponent 跟它有什麼特點 今天我們來製作一個 MyElement 吧 ! 素材準備 我...

2021-09-07 ‧ 由 Tree 分享
DAY 4

[Day04] - 新擬物風按鈕(二) - shadow dom 介紹

昨天我們做了一個不能點的 neuomorphic-button 今天我們把他可以點擊 & 加上 shadow-dom 讓元件內外的 styling 區隔...

2021-09-08 ‧ 由 Tree 分享
DAY 5

[Day05] - 新擬物風按鈕(三) - 參數設定

昨天我們利用 shadow-dom 將元件內外的樣式區隔開來 不過 , 目前的 neuomorphic-button 有個奇怪之處 我們沒有辦法直接指定按鈕要用...

2021-09-09 ‧ 由 Tree 分享
DAY 6

[Day06] - 新擬物風按鈕(四) - 事件處理

昨天文末時 , 請 邦友 設定的 3 項屬性不知道各位做出來了嗎 ? 如果沒有 , 可以到 neuomorphic-button-05.js 這裡來參考作法...

2021-09-10 ‧ 由 Tree 分享
DAY 7

[Day07] - 新擬物風按鈕(五) - 參數改變 & 監聽變化

Day05 時 , 我們製作了一個可傳入參數的 neuomorphic-button <neuomorphic-button icon="fas...

2021-09-11 ‧ 由 Tree 分享
DAY 8

[Day08] - 彈跳視窗 Modal - Slot 介紹

網頁元件中 , 常會使用 Modal 這種類型的元件 如果我們將其製作成一個 <Modal> 的 WebComponent , 之後在使用時 ,...

2021-09-12 ‧ 由 Tree 分享
DAY 9

[Day09] - 未知網址的彈跳視窗 - is 屬性

早上查看文章時 , 發現貼到昨天的資料 本魯立馬作文章修改 , 如造成 邦友 的不便 , 請各位海涵 有時 客制化元件時 , 我們只是想在 HTML 基...

2021-09-13 ‧ 由 Tree 分享
DAY 10

[Day10] - Tab頁籤切換效果 - Web Component 的樣式設定

在 Web Component 中有些特別的 css styling 可以設定 , ex : 如果我們想要設定元件根元素 (Root Element) 的底色時...

2021-09-14 ‧ 由 Tree 分享