Ionic3学习笔记(二)主题化
本文为原创文章,转载请标明出处
目录
- 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: 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 | Defaultios Value |
Defaultmd Value |
Defaultwp Value |
---|---|---|---|
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变量
5. RTL支持
$app-direction: multi // Both RTL and LTR
$app-direction: rtl // RTL only
$app-direction: ltr // LTR only
默认 LTR
详见Ionic Docs
如有不当之处,请予指正,谢谢~
Ionic3学习笔记(二)主题化的更多相关文章
- Vue.js官方文档学习笔记(二)组件化应用的构建
组件化应用的构建 组件化应用允许我们使用小型.独立和通常可复用的组件构建大型应用. Vue注册组件 Vue.component('todo-item',{template:'<li>这是个 ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules
amazeui学习笔记二(进阶开发3)--HTML/CSS规范Rules 一.总结 1.am:以 am 为命名空间 2.模块状态: {命名空间}-{模块名}-{状态描述} 3.子模块: {命名空间}- ...
- [Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
- Go语言学习笔记二: 变量
Go语言学习笔记二: 变量 今天又学了一招如何查看go的版本的命令:go version.另外上一个笔记中的代码还可以使用go run hello.go来运行,只是这种方式不会生成exe文件. 定义变 ...
- 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 ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- MongoDB学习笔记二- Mongoose
MongoDB学习笔记二 Mongoose Mongoose 简介 之前我们都是通过shell来完成对数据库的各种操作, 在开发中大部分时候我们都需要通过程序来完成对数据库的操作 而Mongoose就 ...
- WPF的Binding学习笔记(二)
原文: http://www.cnblogs.com/pasoraku/archive/2012/10/25/2738428.htmlWPF的Binding学习笔记(二) 上次学了点点Binding的 ...
随机推荐
- Java 生产图片验证码
import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.Graphics2D;impor ...
- NET .NET深入体验和实战精要
在学习.NET之前要充分理解基础,在这里将基础的知识点一一列举. 万丈高楼平地起 1.命名空间 命名空间是一种特殊的分类机制,他将与一个特定功能集有关的所有类型都分到一起,是.避免类名冲突的一种方式 ...
- java 静态方法分析
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt210 1.大家都以为"实例方法需要先创建实例才可以调用,比较麻烦, ...
- 制作Visual Studio 2017 (VS 2017) 离线安装包
史上功能最强大的Visual Studio 2017版本发布,但是由于版本更新速度加快和与第三方工具包集成的原因,微软研发团队没有为这个版本提供离线下载的安装文件.如果用户处在一个与外网隔离的网络环境 ...
- STEP 7-MicroWIN SMART 西门子PLC再次安装问题
我的电脑第一次安装s7(STEP 7-MicroWIN SMART 西门子PLC)是没有问题的,有一次不小心删除,再次安装却怎么也安装不上.猫那个咪的!Why! 网上各种查资料,完全不能解决问题,有的 ...
- JS中event.keyCode用法及keyCode对…
js中event.keyCode用法及keyCode对照表 标签: javascriptJavaScriptJavascriptjavaScript 2012-12-11 15:11 HTML Jav ...
- IPv4子网掩码回顾
子网掩码的介绍: IP协议标准规定:每一个使用子网的节点都选择一个32位的位模式,若位模式中的某位置为1,则对应IP地址中的某位就为网络地址(包括网络部分和子网号)中的一位:若位模式中的某位置0,则对 ...
- 团队作业10——beta阶段项目复审
小组的名字和链接 优点 缺点(bug报告) 最终名次 拖鞋大队 基本功能都实现了,符合用户的需求:每次都能按时完成博客,满足题目要求,所以作业完成的也比较优秀.较alpha版本新增了查重自定义的功能, ...
- 【Alpha】Daily Scrum Meeting——Day2
站立式会议照片 1.本次会议为第二次 Meeting会议: 2.本次会议在中午12:30,在陆大楼召开,本次会议为30分钟讨论昨天的任务完成情况以及接下来的任务安排. 每个人的工作分配 成 员 昨天已 ...
- 201521123101 《Java程序设计》第8周学习总结
1. 本周学习总结 2. 书面作业,本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 学习使用泛型,熟悉定义泛型,熟悉List中实现删除 2.统计文字中的单词数量并按出现 ...