iT邦幫忙

DAY 5
0

開發 Mobile 手機的新一代霸主-ionic framework系列 第 5

ionic 中的 CSS components

  • 分享至 

  • xImage
  •  

參考網址: http://ionicframework.com/docs/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 可以修改

http://ionicframework.com/tutorials/customizing-ionic-with-sass/

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


上一篇
建立第一個 Project
下一篇
ionic 中的JavaScript
系列文
開發 Mobile 手機的新一代霸主-ionic framework30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0

我要留言

立即登入留言