ionic-CSS:Colors(颜色)+Icons(图标)+Padding(内边距)

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

Colors(颜色)

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

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

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

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

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


Icons(图标)

ionic 也默认提供了许多的 图标,大概有500多个。用法也非常的简单:
只需添加iconIonicon的类名即可, 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 添加内边距到左.
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,862评论 1 92
  • 转载请声明 原文链接地址 关注公众号获取更多资讯 第一部分 HTML 第一章 职业规划和前景 职业方向规划定位...
    前端进阶之旅阅读 16,668评论 32 459
  • Bootstrap是什么? 一套易用、优雅、灵活、可扩展的前端工具集--BootStrap。GitHub上介绍 的...
    凛0_0阅读 10,995评论 3 184
  • 《贵人》 人们常听说这样的话:“你有‘贵人’相助”。乍一听感觉有点唯心主义,有点像算命先生的口吻。但是,当我们在社...
    NicoleQIu阅读 286评论 0 2
  • 参考书:《瞬变》奇普·希思和丹·希思 所有行为的长久改变,靠的不是意志力,而是平衡理性与感性思维的结果。 ...
    樂菲尔阅读 626评论 0 2