Ionic 提供了非常有用的工具类来实现快速设计
Colors(颜色)
ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。通常来说 颜色意味着重写. 我们更推崇让ionic提供一种推荐的命名约束来命名你的颜色, 样式, 主题等.
工具类颜色被用来设置命名规约. 你可能会注意到ionic有意地不使用red或者blue这些词语. 取而代之的是通过使用描述情绪或通用主题的词语.
回到现实, 设置颜色是最简单的一件事情, 不同的app对颜色有不同的要求. ionic的目标就是提供一套干净的系统用于建立在维护之上,又保持远离怎样使不同的app通过选择颜色的方式去自定义它的设计.
要自定义颜色,你只需要简单的重写 ionic.css
CSS 文件即可. 另外, 由于ionic使用了Sass, 为了达到更好的效果,你还可以找到_variables.scss
修改或扩展颜色变量.
*** 为了更好的灵活性, 你还可以通过Sass自定义样式
Icons(图标)
ionic 也默认提供了许多的 图标，大概有500多个。用法也非常的简单：
只需添加icon 和Ionicon的类名即可, Ionicon可在Ionicons此查阅.
<i class="icon ion-star"></i>
要在按钮上面设置图标你可以给按钮添加子节点<i> 你还可以就只是把按钮的图标设置于按钮的class上面, 点击 按钮图标 了解更多.
注意: Ionic对图标库的使用并没有过多限制,so尽情的用吧.
Padding(内边距)
在Ionic当中, 许多组件的内边距,外边距都有意的被重置为了0. 许多例子告诉我们, app都需要将其组件无缝的靠近屏幕边缘. 这样开发人员也可以非常容易的控制组件的内外边距.
你可以重用padding 类来给任何元素的内容设置一定的空隙. 也就说会有一个默认的10px出现在控件的内容相对控件的边缘. 以下的类不需要任何元素, 但也许可以帮助你理解布局.
-
padding在四周添加内边距e. -
padding-vertical添加内边距到顶和底. -
padding-horizontal添加内边距到左和右. -
padding-top添加内边距到顶. -
padding-right添加内边距到右. -
padding-bottom添加内边距到底. -
padding-left添加内边距到左.
