Ionic3学习笔记(二)主题化
2019独角兽企业重金招聘Python工程师标准>>>
本文为原创文章,转载请标明出处
目录
- CSS实用属性
- 文本相关
- 位置相关
- padding & margin
- 自定义颜色
- 平台样式
- 覆写Ionic Sass变量
- 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: 1200pxmodifier⬇⬇⬇
第一列为属性,第二列为说明
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: normaltext-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: 1200pxmodifier⬇⬇⬇
第一列为属性,第二列为说明
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: 0margin => 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
默认平台配置属性值:
<table border="1"> <thead> <tr> <th>Config Property</th> <th>Default <code class="highlighter-rouge">ios</code> Value</th> <th>Default <code class="highlighter-rouge">md</code> Value</th> <th>Default <code class="highlighter-rouge">wp</code> Value</th> </tr> </thead> <tbody> <tr> <td><code class="highlighter-rouge">activator</code></td> <td><code class="highlighter-rouge">"highlight"</code></td> <td><code class="highlighter-rouge">"ripple"</code></td> <td><code class="highlighter-rouge">"highlight"</code></td> </tr> <tr> <td><code class="highlighter-rouge">actionSheetEnter</code></td> <td><code class="highlighter-rouge">"action-sheet-slide-in"</code></td> <td><code class="highlighter-rouge">"action-sheet-md-slide-in"</code></td> <td><code class="highlighter-rouge">"action-sheet-wp-slide-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">actionSheetLeave</code></td> <td><code class="highlighter-rouge">"action-sheet-slide-out"</code></td> <td><code class="highlighter-rouge">"action-sheet-md-slide-out"</code></td> <td><code class="highlighter-rouge">"action-sheet-wp-slide-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">alertEnter</code></td> <td><code class="highlighter-rouge">"alert-pop-in"</code></td> <td><code class="highlighter-rouge">"alert-md-pop-in"</code></td> <td><code class="highlighter-rouge">"alert-wp-pop-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">alertLeave</code></td> <td><code class="highlighter-rouge">"alert-pop-out"</code></td> <td><code class="highlighter-rouge">"alert-md-pop-out"</code></td> <td><code class="highlighter-rouge">"alert-wp-pop-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">backButtonText</code></td> <td><code class="highlighter-rouge">"Back"</code></td> <td><code class="highlighter-rouge">""</code></td> <td><code class="highlighter-rouge">""</code></td> </tr> <tr> <td><code class="highlighter-rouge">backButtonIcon</code></td> <td><code class="highlighter-rouge">"ios-arrow-back"</code></td> <td><code class="highlighter-rouge">"md-arrow-back"</code></td> <td><code class="highlighter-rouge">"ios-arrow-back"</code></td> </tr> <tr> <td><code class="highlighter-rouge">iconMode</code></td> <td><code class="highlighter-rouge">"ios"</code></td> <td><code class="highlighter-rouge">"md"</code></td> <td><code class="highlighter-rouge">"ios"</code></td> </tr> <tr> <td><code class="highlighter-rouge">loadingEnter</code></td> <td><code class="highlighter-rouge">"loading-pop-in"</code></td> <td><code class="highlighter-rouge">"loading-md-pop-in"</code></td> <td><code class="highlighter-rouge">"loading-wp-pop-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">loadingLeave</code></td> <td><code class="highlighter-rouge">"loading-pop-out"</code></td> <td><code class="highlighter-rouge">"loading-md-pop-out"</code></td> <td><code class="highlighter-rouge">"loading-wp-pop-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">menuType</code></td> <td><code class="highlighter-rouge">"reveal"</code></td> <td><code class="highlighter-rouge">"overlay"</code></td> <td><code class="highlighter-rouge">"overlay"</code></td> </tr> <tr> <td><code class="highlighter-rouge">modalEnter</code></td> <td><code class="highlighter-rouge">"modal-slide-in"</code></td> <td><code class="highlighter-rouge">"modal-md-slide-in"</code></td> <td><code class="highlighter-rouge">"modal-md-slide-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">modalLeave</code></td> <td><code class="highlighter-rouge">"modal-slide-out"</code></td> <td><code class="highlighter-rouge">"modal-md-slide-out"</code></td> <td><code class="highlighter-rouge">"modal-md-slide-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">pageTransition</code></td> <td><code class="highlighter-rouge">"ios-transition"</code></td> <td><code class="highlighter-rouge">"md-transition"</code></td> <td><code class="highlighter-rouge">"wp-transition"</code></td> </tr> <tr> <td><code class="highlighter-rouge">pageTransitionDelay</code></td> <td><code class="highlighter-rouge">16</code></td> <td><code class="highlighter-rouge">96</code></td> <td><code class="highlighter-rouge">96</code></td> </tr> <tr> <td><code class="highlighter-rouge">pickerEnter</code></td> <td><code class="highlighter-rouge">"picker-slide-in"</code></td> <td><code class="highlighter-rouge">"picker-slide-in"</code></td> <td><code class="highlighter-rouge">"picker-slide-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">pickerLeave</code></td> <td><code class="highlighter-rouge">"picker-slide-out"</code></td> <td><code class="highlighter-rouge">"picker-slide-out"</code></td> <td><code class="highlighter-rouge">"picker-slide-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">popoverEnter</code></td> <td><code class="highlighter-rouge">"popover-pop-in"</code></td> <td><code class="highlighter-rouge">"popover-md-pop-in"</code></td> <td><code class="highlighter-rouge">"popover-md-pop-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">popoverLeave</code></td> <td><code class="highlighter-rouge">"popover-pop-out"</code></td> <td><code class="highlighter-rouge">"popover-md-pop-out"</code></td> <td><code class="highlighter-rouge">"popover-md-pop-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">spinner</code></td> <td><code class="highlighter-rouge">"ios"</code></td> <td><code class="highlighter-rouge">"crescent"</code></td> <td><code class="highlighter-rouge">"circles"</code></td> </tr> <tr> <td><code class="highlighter-rouge">tabsHighlight</code></td> <td><code class="highlighter-rouge">false</code></td> <td><code class="highlighter-rouge">false</code></td> <td><code class="highlighter-rouge">false</code></td> </tr> <tr> <td><code class="highlighter-rouge">tabsLayout</code></td> <td><code class="highlighter-rouge">"icon-top"</code></td> <td><code class="highlighter-rouge">"icon-top"</code></td> <td><code class="highlighter-rouge">"icon-top"</code></td> </tr> <tr> <td><code class="highlighter-rouge">tabsPlacement</code></td> <td><code class="highlighter-rouge">"bottom"</code></td> <td><code class="highlighter-rouge">"bottom"</code></td> <td><code class="highlighter-rouge">"top"</code></td> </tr> <tr> <td><code class="highlighter-rouge">tabsHideOnSubPages</code></td> <td><code class="highlighter-rouge">false</code></td> <td><code class="highlighter-rouge">false</code></td> <td><code class="highlighter-rouge">true</code></td> </tr> <tr> <td><code class="highlighter-rouge">toastEnter</code></td> <td><code class="highlighter-rouge">"toast-slide-in"</code></td> <td><code class="highlighter-rouge">"toast-md-slide-in"</code></td> <td><code class="highlighter-rouge">"toast-wp-slide-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">toastLeave</code></td> <td><code class="highlighter-rouge">"toast-slide-out"</code></td> <td><code class="highlighter-rouge">"toast-md-slide-out"</code></td> <td><code class="highlighter-rouge">"toast-wp-slide-out"</code></td> </tr> </tbody> </table>
覆写平台样式,如下:
.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
如有不当之处,请予指正,谢谢~
转载于:https://my.oschina.net/metaphors/blog/1546286
Ionic3学习笔记(二)主题化相关推荐
- 吴恩达《机器学习》学习笔记二——单变量线性回归
吴恩达<机器学习>学习笔记二--单变量线性回归 一. 模型描述 二. 代价函数 1.代价函数和目标函数的引出 2.代价函数的理解(单变量) 3.代价函数的理解(两个参数) 三. 梯度下降- ...
- amazeui学习笔记二(进阶开发4)--JavaScript规范Rules
amazeui学习笔记二(进阶开发4)--JavaScript规范Rules 一.总结 1.注释规范总原则: As short as possible(如无必要,勿增注释):尽量提高代码本身的清晰性. ...
- amazeui学习笔记二(进阶开发2)--Web组件简介Web Component
amazeui学习笔记二(进阶开发2)--Web组件简介Web Component 一.总结 1.amaze ui:amaze ui是一个web 组件, 由模板(hbs).样式(LESS).交互(JS ...
- 项目管理学习笔记二:信息系统服务管理
项目管理学习笔记二:信息系统服务管理 2010-10-22 09:56:33 标签:信息系统 笔记 项目管理 服务 学习 [推送到技术圈] 版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文 ...
- pythonsze_python学习笔记二 数据类型(基础篇)
Python基础 对于Python,一切事物都是对象,对象基于类创建 不同类型的类可以创造出字符串,数字,列表这样的对象,比如"koka".24.['北京', '上海', '深圳' ...
- 二维码学习笔记(二) | 数据分析与数据编码
唠唠闲话 二维码笔记系列(原文地址): 『二维码学习笔记(一) | 二维码概述』 『二维码学习笔记(二) | 数据分析与数据编码』 『二维码学习笔记(三) | 纠错编码』 『二维码学习笔记(四) | ...
- 武汉大学-黄如花-信息检索课程学习笔记二
武汉大学-黄如花-信息检索课程学习笔记二 一.信息检索基本方法 1.布尔逻辑检索 2.临近检索 3.短语检索(精确检索) 4.截词检索 5.字段限制检索 6.区分大小写的检索 二.多种检索方法的综合运 ...
- 投资信托学习笔记(二)
投资信托学习笔记(二) 补充 二 https://baike.baidu.com/item/%E4%BF%A1%E6%89%98%E6%8A%95%E8%B5%84/89898?fr=aladdin# ...
- qml学习笔记(二):可视化元素基类Item详解(上半场anchors等等)
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
- [转载]dorado学习笔记(二)
原文地址:dorado学习笔记(二)作者:傻掛 ·isFirst, isLast在什么情况下使用?在遍历dataset的时候会用到 ·dorado执行的顺序,首先由jsp发送请求,调用相关的ViewM ...
最新文章
- 安装yarn 心得分享
- 如何正确地从IntelliJ构建jar?
- python opencv ImportError: libGL.so.1: cannot open shared object file: No such file or directory
- Android基础---学习历程【上课用到的资源---学期!汇总!整理】【课本源码、课后习题答案、上课课件与录播】
- 学计算机编程200字感想,计算机学习心得体会
- 工业交换机品牌选择时注意的事项介绍
- matlab 文件指针回到开头,[c/c++] 文件指针位置回到文件开头(rewind)及行开头(ftell+fseek)...
- [react] react的性能优化在哪个生命周期?它优化的原理是什么?
- 监听一个可下拉区域的滚动监听_Flutter 实现一个悬浮的效果
- 【Servlet】过滤器技术
- 【动态规划】P4170 :涂色(区间dp)
- div搜索框与按钮不在一行_这款漫画资源搜索软件,堪称二次元迷的必备神器!...
- 陈纪修 数学分析,上下册
- ANDROID框架揭秘pdf
- mysql数据库服务器默认端口_各个数据库的默认端口
- 网上打印个人完税证明流程
- gogo protobuf
- 监控Linux磁盘情况,进行邮件告警
- 2022年胺基化工艺考试题库及答案
- 如何避免浏览器缓存。
热门文章
- PyQt5环境搭建及cx_freeze打包exe
- JSON——JavaScript 中的使用
- 20169219《linux内核原理与分析》第七周作业
- (一)网络编程基础之套接字入门
- 弹出对话框的同时保持页面的显示
- 取得系统当前日期和时间
- 再谈Activator.CreateInstance(Type type)方法创建对象和Expression Tree创建对象性能的比较(更新版)...
- ubuntu 19.04 + lenovo-xiaoxin-I2000 触摸板右键单击无法使用
- 计蒜客 25985.Goldbach-米勒拉宾素数判定(大素数) (2018 ACM-ICPC 中国大学生程序设计竞赛线上赛 B)...
- sqli-labs Less-11 and Less-12