Ionic 提供了非常有用的工具類來實(shí)現(xiàn)快速設(shè)計(jì)
Colors(顏色)
ionic 提供了很多顏色的配置右钾，當(dāng)然你可以根據(jù)自己的需要自定義顏色。通常來說 顏色意味著重寫. 我們更推崇讓ionic提供一種推薦的命名約束來命名你的顏色, 樣式, 主題等.
工具類顏色被用來設(shè)置命名規(guī)約. 你可能會(huì)注意到ionic有意地不使用red或者blue這些詞語. 取而代之的是通過使用描述情緒或通用主題的詞語.
回到現(xiàn)實(shí), 設(shè)置顏色是最簡(jiǎn)單的一件事情, 不同的app對(duì)顏色有不同的要求. ionic的目標(biāo)就是提供一套干凈的系統(tǒng)用于建立在維護(hù)之上,又保持遠(yuǎn)離怎樣使不同的app通過選擇顏色的方式去自定義它的設(shè)計(jì).
要自定義顏色,你只需要簡(jiǎn)單的重寫 ionic.css
CSS 文件即可. 另外, 由于ionic使用了Sass, 為了達(dá)到更好的效果,你還可以找到_variables.scss
修改或擴(kuò)展顏色變量.
*** 為了更好的靈活性, 你還可以通過Sass自定義樣式
Icons(圖標(biāo))
ionic 也默認(rèn)提供了許多的 圖標(biāo)，大概有500多個(gè)。用法也非常的簡(jiǎn)單：
只需添加icon 和Ionicon的類名即可, Ionicon可在Ionicons此查閱.
<i class="icon ion-star"></i>
要在按鈕上面設(shè)置圖標(biāo)你可以給按鈕添加子節(jié)點(diǎn)<i> 你還可以就只是把按鈕的圖標(biāo)設(shè)置于按鈕的class上面, 點(diǎn)擊 按鈕圖標(biāo) 了解更多.
注意: Ionic對(duì)圖標(biāo)庫(kù)的使用并沒有過多限制,so盡情的用吧.
Padding(內(nèi)邊距)
在Ionic當(dāng)中, 許多組件的內(nèi)邊距,外邊距都有意的被重置為了0. 許多例子告訴我們, app都需要將其組件無縫的靠近屏幕邊緣. 這樣開發(fā)人員也可以非常容易的控制組件的內(nèi)外邊距.
你可以重用padding 類來給任何元素的內(nèi)容設(shè)置一定的空隙. 也就說會(huì)有一個(gè)默認(rèn)的10px出現(xiàn)在控件的內(nèi)容相對(duì)控件的邊緣. 以下的類不需要任何元素, 但也許可以幫助你理解布局.
-
padding在四周添加內(nèi)邊距e. -
padding-vertical添加內(nèi)邊距到頂和底. -
padding-horizontal添加內(nèi)邊距到左和右. -
padding-top添加內(nèi)邊距到頂. -
padding-right添加內(nèi)邊距到右. -
padding-bottom添加內(nèi)邊距到底. -
padding-left添加內(nèi)邊距到左.
