本文为原创文章,转载请标明出处

目录

  1. CSS实用属性

    • 文本相关
    • 位置相关
    • padding & margin
  2. 自定义颜色
  3. 平台样式
  4. 覆写Ionic Sass变量
  5. RTL支持

1. CSS实用属性

文本相关

text-{modifier}
text-sm-{modifier} min-width: 576px
text-md-{modifier} min-width: 768px
text-lg-{modifier} min-width: 992px
text-xl-{modifier} min-width: 1200px modifier⬇⬇⬇
第一列为属性,第二列为说明
text-left => text-align: left
text-right => text-align: right
text-start => text-align: start
text-end => text-align: end
text-justify => text-align: justify
text-wrap => white-space: nowrap
text-nowrap => white-space: normal text-uppercase => text-transform: uppercase
text-lowercase => text-transform: lowercase
text-capitalize => text-transform: capitalize

位置相关

float-{modifier}
float-sm-{modifier} min-width: 576px
float-md-{modifier} min-width: 768px
float-lg-{modifier} min-width: 992px
float-xl-{modifier} min-width: 1200px modifier⬇⬇⬇
第一列为属性,第二列为说明
float-left => float: left
float-right => float: right
float-start => float: left | float: right
float-end => float: left | float: right

padding & margin

第一列为属性,第二列为说明
padding => padding: 16px
padding-top => padding-top: 16px
padding-left => padding-left: 16px
padding-right => padding-right: 16px
padding-bottom => padding-bottom: 16px
padding-vertical => padding: 16px 0
padding-horizontal => padding: 0 16px
no-padding => padding: 0 margin => margin: 16px
margin-top => margin-top: 16px
margin-left => margin-left: 16px
margin-right => margin-right: 16px
margin-bottom => margin-bottom: 16px
margin-vertical => margin: 16px 0
margin-horizontal => margin: 0 16px
no-margin => margin: 0

2. 自定义颜色

修改 ./src/theme/variables.scss

$colors: (
primary: #488aff,
secondary: #32db64,
danger: #f53d3d,
light: #f4f4f4,
dark: #222
);

可添加新颜色,如下:

twitter:(
base: #55acee,
contrast: #ffffff
)

base 作为元素背景色,contrast 作为文本颜色

html 中的使用如下:

<button ion-button color="twitter">I'm a button</button>

scss 中的使用如下:

my-component {
background: color($colors, twitter, base);
}

3. 平台样式

第一列为Platform,第二列为Mode
ios => ios
android => md
windows => wp
core => md

默认平台配置属性值:

Config Property DefaultiosValue DefaultmdValue DefaultwpValue
activator "highlight" "ripple" "highlight"
actionSheetEnter "action-sheet-slide-in" "action-sheet-md-slide-in" "action-sheet-wp-slide-in"
actionSheetLeave "action-sheet-slide-out" "action-sheet-md-slide-out" "action-sheet-wp-slide-out"
alertEnter "alert-pop-in" "alert-md-pop-in" "alert-wp-pop-in"
alertLeave "alert-pop-out" "alert-md-pop-out" "alert-wp-pop-out"
backButtonText "Back" "" ""
backButtonIcon "ios-arrow-back" "md-arrow-back" "ios-arrow-back"
iconMode "ios" "md" "ios"
loadingEnter "loading-pop-in" "loading-md-pop-in" "loading-wp-pop-in"
loadingLeave "loading-pop-out" "loading-md-pop-out" "loading-wp-pop-out"
menuType "reveal" "overlay" "overlay"
modalEnter "modal-slide-in" "modal-md-slide-in" "modal-md-slide-in"
modalLeave "modal-slide-out" "modal-md-slide-out" "modal-md-slide-out"
pageTransition "ios-transition" "md-transition" "wp-transition"
pageTransitionDelay 16 96 96
pickerEnter "picker-slide-in" "picker-slide-in" "picker-slide-in"
pickerLeave "picker-slide-out" "picker-slide-out" "picker-slide-out"
popoverEnter "popover-pop-in" "popover-md-pop-in" "popover-md-pop-in"
popoverLeave "popover-pop-out" "popover-md-pop-out" "popover-md-pop-out"
spinner "ios" "crescent" "circles"
tabsHighligh false false false
tabsLayout "icon-top" "icon-top" "icon-top"
tabsPlacement "bottom" "bottom" "top"
tabsHideOnSubPages false false true
toastEnter "toast-slide-in" "toast-md-slide-in" "toast-wp-slide-in"
toastLeave "toast-slide-out" "toast-md-slide-out" "toast-wp-slide-out"

覆写平台样式,如下:

.md .button {
text-transform: capitalize;
}

或简写为:

.button-md {
text-transform: capitalize;
}

4. 覆写Ionic Sass变量

详见Ionic Docs

5. RTL支持

$app-direction: multi // Both RTL and LTR
$app-direction: rtl // RTL only
$app-direction: ltr // LTR only

默认 LTR

详见Ionic Docs

如有不当之处,请予指正,谢谢~

Ionic3学习笔记(二)主题化的更多相关文章

  1. Vue.js官方文档学习笔记(二)组件化应用的构建

    组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...

  2. amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules

    amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...

  3. amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules

    amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...

  4. [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计

    源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...

  5. Go语言学习笔记二: 变量

    Go语言学习笔记二: 变量 今天又学了一招如何查看go的版本的命令:go version.另外上一个笔记中的代码还可以使用go run hello.go来运行,只是这种方式不会生成exe文件. 定义变 ...

  6. amazeui学习笔记二(进阶开发4)--JavaScript规范Rules

    amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...

  7. amazeui学习笔记二(进阶开发2)--Web组件简介Web Component

    amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...

  8. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  9. MongoDB学习笔记二- Mongoose

    MongoDB学习笔记二 Mongoose Mongoose 简介 之前我们都是通过shell来完成对数据库的各种操作, 在开发中大部分时候我们都需要通过程序来完成对数据库的操作 而Mongoose就 ...

  10. WPF的Binding学习笔记(二)

    原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...

随机推荐

  1. 转载 远程用户连接mysql授权

    授权法:  在安装mysql的机器上运行:  1.d:\mysql\bin\>mysql -h localhost -u root  //这样应该可以进入MySQL服务器  2.mysql> ...

  2. CSS 中的 initial、inherit、unset、revert

    在css中,initial(初始).inherit(继承).unset(未设置).revert(还原)这四个关键字可以应用于所有的CSS属性. initial - 初始默认值.IE不支持 inheri ...

  3. Jenkins关于tomcat地址和端口映射的配置

    <?xml version='1.0' encoding='utf-8'?><!-- Licensed to the Apache Software Foundation (ASF) ...

  4. [js高手之路]Node.js模板引擎教程-jade速学与实战1

    环境准备: 全局安装jade: npm install jade -g 初始化项目package.json: npm init --yes 安装完成之后,可以使用 jade --help 查看jade ...

  5. 交换机的Ethernet Channel

    端口聚合也叫做以太通道(ethernet channel),主要用于交换机之间连接.由于两个交换机之间有多条冗余链路的时候,STP会将其中的几条链路关闭,只保留一条,这样可以避免二层的环 路产生.但是 ...

  6. 转:【深入Java虚拟机】之五:多态性实现机制——静态分派与动态分派

    转载请注明出处:http://blog.csdn.net/ns_code/article/details/17965867   方法解析 Class文件的编译过程中不包含传统编译中的连接步骤,一切方法 ...

  7. MySQL (二)-- 数据类型(列类型)、数值类型、 小数类型、 时间日期类型、 字符串类型 、 MySQL记录长度、列属性

    1 数据类型(列类型) 所谓的数据类型:对数据进行统一的分类,从系统的角度出发是为了能够使用统一的方式进行管理,更好的利用有限的空间. SQL中将数据类型分成了三大类: 2 数值类型 数值类型数据:都 ...

  8. 软工+C(2017第7期) 野生程序员

    // 上一篇:最近发展区/脚手架 // 下一篇:提问和回复 怎样做足够好的软件?我们就差一个程序员! 没有什么软件工程的理论的时候,程序员们凭借自己对编程的热爱,凭借着:"这是一个可以自动化 ...

  9. 201521123082 《Java程序设计》第11周学习总结

    201521123082 <Java程序设计>第11周学习总结 标签(空格分隔):java 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. Answe ...

  10. 201521123061 《Java程序设计》第七周学习总结

    201521123061 <Java程序设计>第七周学习总结 1. 本周学习总结 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList的contains源代码 贴上源 ...