iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

0 Like 0 留言 1145 瀏覽

鐵人賽 Modern Web DAY 18

Web Component 網頁元件之路系列第 18 篇

技術 [Day18] - 打包 Element-UI 的 Vue Component to Web Component

day-14 我們說明了 , 如何將 Vue 的 Component 轉換成 Web Component day-17 說明了 , 如何在 React 專案中...

Tree ‧ 2021-09-22

0 Like 0 留言 1208 瀏覽

鐵人賽 Modern Web DAY 17

Web Component 網頁元件之路系列第 17 篇

技術 [Day17] - 在 React 中引入現成的 Web Component

當我們拿到一個現有的 Web Component 時 , 如何在 React 專案中引用呢 ? 利用 [create]-react-app](https:/...

Tree ‧ 2021-09-21

0 Like 0 留言 1544 瀏覽

鐵人賽 Modern Web DAY 16

Web Component 網頁元件之路系列第 16 篇

技術 [Day16] - 在 Vue 中引入現成的 Web Component

當我們拿到一個現有的 Web Component 時 , 如果直接在 Vue 專案中使用會抱錯今天來解決這個 issue 吧 ! 利用 vue-cli...

Tree ‧ 2021-09-20

0 Like 0 留言 1063 瀏覽

鐵人賽 Modern Web DAY 15

Web Component 網頁元件之路系列第 15 篇

技術 [Day15] - 利用 direflow.io 將 React Components 轉換成 Web Components

昨天解說 Vue 如何製作 Web-Component 今天來說明一下 , 那 React 如何製作 Web-Component 呢 ? 可以利用 direfl...

Tree ‧ 2021-09-19

0 Like 0 留言 1166 瀏覽

鐵人賽 Modern Web DAY 14

Web Component 網頁元件之路系列第 14 篇

技術 [Day14] 利用 Vue CLI 3 來建立 Web Components 的 JS 檔

前面花了大把的時間 , 來建立跟 Vue 很像的 Web Components 其實 Vue CLI 也有提供建立 web-component 的方法下方來說...

Tree ‧ 2021-09-18

0 Like 0 留言 631 瀏覽

鐵人賽 Modern Web DAY 13

Web Component 網頁元件之路系列第 13 篇

技術 [Day13] - 利用 Button 範例 - 解說 render 函式

昨天我們解說了 , Jquery 跟 Vue 兩種處理 Dom 的模式在文末 , 提到了 Web Component 中沒有 Vue 可用 , 不過我們可以建...

Tree ‧ 2021-09-17

0 Like 0 留言 1717 瀏覽

鐵人賽 Modern Web DAY 10

Web Component 網頁元件之路系列第 10 篇

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

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

Tree ‧ 2021-09-14

0 Like 0 留言 972 瀏覽

鐵人賽 Modern Web DAY 9

Web Component 網頁元件之路系列第 9 篇

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

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

Tree ‧ 2021-09-13

1 Like 0 留言 1243 瀏覽

鐵人賽 Modern Web DAY 8

Web Component 網頁元件之路系列第 8 篇

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

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

Tree ‧ 2021-09-12

0 Like 0 留言 914 瀏覽

鐵人賽 Modern Web DAY 7

Web Component 網頁元件之路系列第 7 篇

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

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

Tree ‧ 2021-09-11

0 Like 0 留言 761 瀏覽

鐵人賽 Modern Web DAY 6

Web Component 網頁元件之路系列第 6 篇

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

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

Tree ‧ 2021-09-10

0 Like 0 留言 825 瀏覽

鐵人賽 Modern Web DAY 5

Web Component 網頁元件之路系列第 5 篇

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

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

Tree ‧ 2021-09-09

0 Like 0 留言 1405 瀏覽

鐵人賽 Modern Web DAY 4

Web Component 網頁元件之路系列第 4 篇

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

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

Tree ‧ 2021-09-08

0 Like 0 留言 1335 瀏覽

鐵人賽 Modern Web DAY 3

Web Component 網頁元件之路系列第 3 篇

技術 [Day03] - 第一個 WebComponent 元件

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

Tree ‧ 2021-09-07

1 Like 1 留言 3276 瀏覽

鐵人賽 Modern Web DAY 2

Web Component 網頁元件之路系列第 2 篇

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

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

Tree ‧ 2021-09-06

1 Like 2 留言 1434 瀏覽

鐵人賽 Modern Web DAY 1

Web Component 網頁元件之路系列第 1 篇

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

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

Tree ‧ 2021-09-05

1 Like 0 留言 2152 瀏覽

技術 Vue 圖片剪裁元件設計思考

前言當初接觸到rxjs 這套以流的方式處理事件及資料的庫時，覺得非常新奇，便嘗試自己從頭寫了一個rxjs + vuerx + vue 支援觸控端、響應式的圖片...

timtnlee ‧ 2018-11-13

2 Like 0 留言 1957 瀏覽

鐵人賽開發技術 DAY 22

你不能不知道的Polymer開發實戰系列第 22 篇

技術打造鐵人賽積分排行榜 (D3元件)

今日目標: 了解如何包裝 D3 視覺化元件視覺化元件 <d3-flare> 這元件功能是顯示目前鐵人賽各組參與人數，以及積分的視覺化效果。...

martyshu ‧ 2014-10-12

1 Like 0 留言 2099 瀏覽

鐵人賽開發技術 DAY 20

你不能不知道的Polymer開發實戰系列第 20 篇

技術 AngularJS 的後宮佳麗 (下)

今日目標: 了解Polymer 元件和AngularJS Directive元件的差異昨天的說明在AngujarJS裏面可以直接使用Polymer元件，取代...

martyshu ‧ 2014-10-10

3 Like 1 留言 2580 瀏覽

鐵人賽開發技術 DAY 19

你不能不知道的Polymer開發實戰系列第 19 篇

技術 AngularJS 的後宮佳麗 (上)

今日目標: 在 AngularJS 中使用 Polymer 元件本來題目想寫AngularJS與PolymerJS聯姻，但說聯姻好像不大對，Polymer比較...

martyshu ‧ 2014-10-09

3 Like 0 留言 1994 瀏覽

鐵人賽開發技術 DAY 18

你不能不知道的Polymer開發實戰系列第 18 篇

技術我所知道的元件聖殿、傳教士、軍火庫

今日目標: 了解元件大本營和各地軍火庫、威力強大的武器包裝成WebComponent，polymer不是第一家，但在Google加持下，的確有可能成為最大的一...

martyshu ‧ 2014-10-08

5 Like 1 留言 10337 瀏覽

鐵人賽開發技術 DAY 17

你不能不知道的Polymer開發實戰系列第 17 篇

技術用 JavaScript 實現人臉追蹤

今日目標: 學習如何使用強大的電腦視覺元件 [線上試玩] 用顏色物體控制企業號前進 (粉紅色、青綠色、黃色) 一、tracking.js 網站介紹 t...

martyshu ‧ 2014-10-07

3 Like 2 留言 5536 瀏覽

鐵人賽開發技術 DAY 16

你不能不知道的Polymer開發實戰系列第 16 篇

技術 VoiceTube元件解析 - 了解組裝元件的開發方式

今日目標: 了解源代碼與組裝元件的開發方式一、元件結構目前使用的元件清單如下 <voice-tube> 負責整合抓取字幕、youtube影片...

martyshu ‧ 2014-10-06