iT邦幫忙

polymer相關文章
共有 30 則文章
鐵人賽 開發技術 DAY 30

技術 Polymer 30天全面解析

整理分享30天文章與範例,從入門、進階、範例等循序漸進方式介紹,讓開發者能一窺Polymer全貌、快速入門 = 一、入門篇 官網使用介紹 使用介紹有 30秒、...

鐵人賽 開發技術 DAY 29

技術 最終還是要打包

今日目標: 使用Polymer Vulcanize 打包,了解如何使用Yeoman 使用Polymer開發Web應用,元件慣例是一個html檔案存放,方便管理...

鐵人賽 開發技術 DAY 28

技術 Material Design - 自適應(RWD)鍵盤,有這種事?

今日目標: 拿計算機元件,組裝出RWD鍵盤 自適應(RWD)網站、(RWD)圖片相信大家都聽過,但是RWD鍵盤沒聽過吧....今日就讓我們用昨日計算機的key...

鐵人賽 開發技術 DAY 27

技術 Material Design - 案例研究(HTML結構)

今日目標: 深入了解Polymer官網的計算機案例 [線上試玩] Polymer官網使用了Material Design開發兩個應用範例,充分展現了組裝元件式...

鐵人賽 開發技術 DAY 26

技術 Material Design - 對話框

今日目標: 了解 <paper-dialog> 元件與用法 Dialog 是很常見的元件形態,那套上了Material Design又有什麼特別...

鐵人賽 開發技術 DAY 25

技術 Material Design - 可捲動標題面板

= 今日目標: 了解 <core-scroll-header-panel> 元件與用法 scroll-header-panel 捲動標題面板,是...

鐵人賽 開發技術 DAY 24

技術 Material Design - Rippe效果

今日目標: 了解Ripple效果並包裝成img-ripple元件 分享Polymer 20幾天,是該來談談 Google 今年推出的 Material Des...

鐵人賽 開發技術 DAY 23

技術 打造鐵人卡片元件

今日目標: 包裝鐵人卡片元件 鐵人卡片 <itironman-card> [線上試玩] **** [Github] **** 卡片很多..要稍...

鐵人賽 開發技術 DAY 22

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

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

鐵人賽 開發技術 DAY 21

技術 打造鐵人賽積分排行榜 (應用篇)

今日目標: 用Polymer開發鐵人賽積分排行榜 想不想看目前各組鐵人積分排名? 很想對不對? 好,雖然IT鐵人賽官方網頁沒公佈,但資料倒是很齊全。所以今天就...

鐵人賽 開發技術 DAY 20

技術 AngularJS 的後宮佳麗 (下)

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

鐵人賽 開發技術 DAY 19

技術 AngularJS 的後宮佳麗 (上)

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

鐵人賽 開發技術 DAY 18

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

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

鐵人賽 開發技術 DAY 17

技術 用 JavaScript 實現人臉追蹤

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

鐵人賽 開發技術 DAY 16

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

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

鐵人賽 開發技術 DAY 15

技術 自己的英文自己救~結合VoiceTube

今日目標: 開發練習英文聽力的Web應用 線上試玩 今天我們進一步整合google-youtube元件,以及voicetube網站提供的字幕,使用Polyme...

鐵人賽 開發技術 DAY 14

技術 鐵人賽分享徽章又不見了? 沒關係,有產生器

今日目標: 打造鐵人賽挑戰徽章產生器 鐵人賽寫了14天,習慣每次寫完後,得到當天的挑戰徽章,就分享到FB。可是不知道是不是我的Chrome相容性不好,好幾次鐵人...

鐵人賽 開發技術 DAY 13

技術 來點實際應用 - 出英文考題 (電腦請評分)

今日目標: 學習拿Polymer做實際應用 [線上試玩] <x-sentence> 這標籤可以用來輸入英文整句句子,並即時與正確答案進行比對,而且...

鐵人賽 開發技術 DAY 12

技術 來點實際應用 - 出英文考題

今日目標: 學習拿Polymer做實際應用 先來看看實際應用的小範例 (翻譯練習) [線上試玩] 自訂HTML標簽 <x-word>...<...

鐵人賽 開發技術 DAY 11

技術 使用Polymer也要顧門面 (Layout)

今日目標: 學習 Polymer Layout各種使用方式 Polymer提供了聲明式的佈局宣告,是基於 CSS Flexbox 建構而成,透過Polymer加...

鐵人賽 開發技術 DAY 10

技術 用RWD讓悟空變身

今日目標: 學習 Template auto-binding + core-media-query 元件 今天我們要整合底下三樣素材, 目標就是讓悟空可以隨著螢...

鐵人賽 開發技術 DAY 9

技術 Model、View 同步的各種方式 (3/3)

今日目標: 了解Model與Template 的多種綁定方式 Material Design 重裝上陣 今天將水果籃結合了最潮的 Google Material...

鐵人賽 開發技術 DAY 8

技術 Model、View 同步的各種方式 (⅔)

今日目標: 了解Model與Template 的多種綁定方式 接續昨天例子,接下來我們進一步將template repeat , model 封裝到元件中 綁定...

鐵人賽 開發技術 DAY 7

技術 Model、View 同步的各種方式 (⅓)

今日目標: 了解Model與Template 的多種綁定方式 瀏覽器根據DOM結構繪製畫面的長相,所以只要改變DOM就能更新View,而資料則是放在Model裏...

鐵人賽 開發技術 DAY 6

技術 Polymer 自定HTML標籤-GoogleMap三重奏(下)

今日目標: 了解元件包裝原始碼 延續昨天範例,接下來說明元件 完整程式碼 [線上範例] 第1行是載入polymer基本元件與polymer核心程式 第2行是載...

鐵人賽 開發技術 DAY 5

技術 Polymer 自定HTML標籤-GoogleMap三重奏(上)

今日目標: 動手打造自己專屬的HTML標籤 [線上執行範例] [程式碼] google-map-x3 這HTML標籤可以同時顯示三個不同地圖面貌,分別街道+衛星...

鐵人賽 開發技術 DAY 4

技術 Polymer 元件應用

今日目標: 完成 GoogleMap + MarterialDesign 元件互動 今天就來感受一下Polymer的template與data-binding的...

鐵人賽 開發技術 DAY 3

技術 Polymer 淺嚐元件使用

今日目標: 了解與使用GoogleMap元件 今天就來感受一下使用元件的快感,昨天雖然裝完Polymer核心和Marterial元件後,已經有數十個元件可以使用...

鐵人賽 開發技術 DAY 2

技術 Polymer 安裝

今日目標: 完成本機Polymer安裝 雖然我們可以藉由雲端工具淺嚐Polymer開發,例如JSBin、CodePen等,或是可直接拖拉Polymer元件的EZ...

鐵人賽 開發技術 DAY 1

技術 Polymer 簡介

開發Web前端,應該很常聽到 AngularJS,Google一推出就造成轟動。但是較少人知道Google去年也推出了Polymer,由於這算是比較前瞻性的東西...