ionic-CSS：Colors(颜色)+Icons(图标)+P

2017-01-12 本文已影响126人 hx永恒之恋

Ionic 提供了非常有用的工具类来实现快速设计

ionic 提供了很多颜色的配置，当然你可以根据自己的需要自定义颜色。通常来说 颜色意味着重写. 我们更推崇让ionic提供一种推荐的命名约束来命名你的颜色, 样式, 主题等.

工具类颜色被用来设置命名规约. 你可能会注意到ionic有意地不使用red或者blue这些词语. 取而代之的是通过使用描述情绪或通用主题的词语.

回到现实, 设置颜色是最简单的一件事情, 不同的app对颜色有不同的要求. ionic的目标就是提供一套干净的系统用于建立在维护之上,又保持远离怎样使不同的app通过选择颜色的方式去自定义它的设计.

要自定义颜色,你只需要简单的重写 ionic.css
CSS 文件即可. 另外, 由于ionic使用了Sass, 为了达到更好的效果,你还可以找到_variables.scss
修改或扩展颜色变量.

*** 为了更好的灵活性, 你还可以通过Sass自定义样式

ionic 也默认提供了许多的图标，大概有500多个。用法也非常的简单：
只需添加icon 和Ionicon的类名即可, Ionicon可在Ionicons此查阅.

<i class="icon ion-star"></i>

要在按钮上面设置图标你可以给按钮添加子节点<i> 你还可以就只是把按钮的图标设置于按钮的class上面, 点击按钮图标了解更多.
注意: Ionic对图标库的使用并没有过多限制,so尽情的用吧.

在Ionic当中, 许多组件的内边距,外边距都有意的被重置为了0. 许多例子告诉我们, app都需要将其组件无缝的靠近屏幕边缘. 这样开发人员也可以非常容易的控制组件的内外边距.

你可以重用padding 类来给任何元素的内容设置一定的空隙. 也就说会有一个默认的10px出现在控件的内容相对控件的边缘. 以下的类不需要任何元素, 但也许可以帮助你理解布局.