2018

年 (共 61 篇文章)

[Angular Material 完全攻略]雜項技巧(1) - 自己的theme自己設計

Angular Material內建了4種不同主題的theme,未來應該還會持續增加,但這些theme未必是我們喜歡的,而在Angular Material中,要設計自己的theme非常簡單,我們就來看看該如何做吧!

繼續閱讀
[Angular Material 完全攻略]Angular CDK(7) - Coercion、Platform

今天我們來講兩個Angular CDK文件上沒有介紹,但很有機會使用到的隱藏版功能,分別是型別轉換(coercion)、平台偵測(platform)。

繼續閱讀
[Angular Material 完全攻略]Angular CDK(6) - Overlay

今天我們要來介紹Angular CDK中的Overlay!Overlay在Angular Material中可以說是隨處可見,只要是任何會從螢幕上彈出資訊的功能,如Select、Dialog等等都免不了要使用Overlay;因此也能說Overlay是Angular Material中讓畫面更具有立體感的大功臣,到底這個功能能幫助我們達到多少目標呢?就讓我們繼續看下去吧!

繼續閱讀
[Angular Material 完全攻略]Angular CDK(5) - Portal

接下來我們要介紹Angular CDK中的Portal分類,透過這裡面的功能,我們可以很容易的動態切換各種不同的元件和templates,讓動態產生內容不再是件麻煩的事情!

其實在Angular中,我們已經能夠使用<ng-container>搭配ngTemplateOutletngComponentOutlet來切換不同的template或component了,而Angular CDK的Portal可以想像成是它的簡單好用加強版!甚至我們可以透過Portals裡面的功能,把元件放在整個Angular程式的控制範圍之外,但元件依然還在Angular的控制內,非常的強大!

就讓我們繼續往下看吧!!

繼續閱讀
[Angular Material 完全攻略]Angular CDK(4) - Observables、Scrolling

今天我們要介紹兩個比較簡單的Angular CDK功能分類,分別是Observables和Scroll。這兩個功能使用上非常簡單,但乍看之下使用的機會不高,因此我們也會來稍微偷看一下Angular Material的原始碼,看看有什麼樣讓人意想不到的使用情境!

繼續閱讀
[Angular Material 完全攻略]Angular CDK(3) - Bidirectionality、Layout

今天我們來講Angular CDK中兩個跟版面配置有關的功能,分別是Bidirectionality、Layout。

Bidirectionality主要是用來調整LTR(Left To Right)跟RTL(Right To Left)配置及偵測的工具。

而Layout則是用來偵測瀏覽器可用的寬度與高度,來判斷目前網站使用在什麼樣的平台上,如果不使用任何其他的RWD工具,Layout可是Angular CDK中實現RWD不可或缺的幫手哩!

繼續閱讀
[Angular Material 完全攻略]Angular CDK(2) - Accessibility

今天我們要來介紹第一個Angular CDK的分類功能-Accessibility。Accessibility(簡稱A11y)主要是放置一些方便與使用者互動的功能,以及讓我們在使用螢幕閱讀器時更加方便的工具。我們將介紹裡面幾個有趣的功能!

繼續閱讀
[Angular Material 完全攻略]Angular CDK(1) - 基礎介紹

我們即將要邁入新的篇章-Angular CDK,我們今天先不來寫程式,而是大致的把目前(5.0.0)Angular CDK的架構做一個整體的介紹,讓讀者們能先在心中有個藍圖,在未來學習Angular CDK應該會更有感覺!

繼續閱讀
[Angular Material 完全攻略]收件夾頁面(4) - Table (進階功能)

昨天我們把一個data table的基礎功能-「顯示資料、分頁、排序」都大致說明了一遍,今天我們來講一些進階的data table用法,以及分頁和排序元件的補充說明;Angular Material中的分頁和排序功能都很強,而且也不會和<mat-table>綁死,在任何地方可以應用。

就讓我們繼續往下看吧!

繼續閱讀
[Angular Material 完全攻略]收件夾頁面(3) - Table (基礎功能)

今天我們要來介紹Angular Material中最複雜的元件之一:表格Table。透過組合table、sort header和paginator這三個功能,我們會完成一個大部分情境都適用的data table。

Data table可以說是許多軟體都會被使用到的功能,尤其是管理各種資料的後台程式,更是使用data table的大宗來源,而在商務應用上後台軟體的開發需求也是源源不絕,因此data table可以說是前端應用最大的一個議題也不為過!

也因此在Angular Material中要設計data table自然有非常多彈性可以調整的地方,尤其是我們會一次組合3種元件,來完成data table的功能,讓狀況更加的複雜,因此我們會將data table這個主題拆成2篇介紹,今天我們會先完成一個大部分情境都適用的data table,明天則會針對一些細節的部分做進階的介紹;準備好了嗎?開始囉!

繼續閱讀