2014年10月4日 星期六

ionic 中的 CSS components



CSS components  如同現在開發 web 的前端UI套件(例如: bootstrap 、foundation...等等)一樣,提供多許多 component 元件可以使用,ionic css component 是專為在mobile元件設計的 UI元件,所以在mobile上呈現出來的感覺也會比較接近native的元件。

舉件來說,在手機中常會使用的元件 List


打開之前建立的tab Project 修改 template/tab-dash.html


在Browser 的畫面如下


接下來試著把 toogle 的元件再放到List


像這種清單的Prototype畫面,簡單的 HTML + CSS 就可以完成了


目前ionic 提供的元件還算足夠,所以元件部份在這邊就不多介紹了,其中ionic CSS component 是使用 sass 開發的,內鍵也提架構好的custom的sassfile 可以修改

另外,如果想要直接想要都使用內鍵的元件,預設每個 CSS Component 的顏色如下圖


沒有留言:

張貼留言