Ionic3学习笔记（二）主题化

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

目录

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

1. CSS实用属性

文本相关

text-{modifier}text-sm-{modifier}  min-width: 576pxtext-md-{modifier}  min-width: 768pxtext-lg-{modifier}  min-width: 992pxtext-xl-{modifier}  min-width: 1200pxmodifier⬇⬇⬇第一列为属性，第二列为说明text-left           =>      text-align: lefttext-right          =>      text-align: righttext-start          =>      text-align: starttext-end            =>      text-align: endtext-justify        =>      text-align: justifytext-wrap           =>      white-space: nowraptext-nowrap         =>      white-space: normaltext-uppercase      =>      text-transform: uppercasetext-lowercase      =>      text-transform: lowercasetext-capitalize     =>      text-transform: capitalize

位置相关

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

padding & margin

第一列为属性，第二列为说明padding             =>      padding: 16pxpadding-top         =>      padding-top: 16pxpadding-left        =>      padding-left: 16pxpadding-right       =>      padding-right: 16pxpadding-bottom      =>      padding-bottom: 16pxpadding-vertical    =>      padding: 16px 0padding-horizontal  =>      padding: 0 16pxno-padding          =>      padding: 0margin              =>      margin: 16pxmargin-top          =>      margin-top: 16pxmargin-left         =>      margin-left: 16pxmargin-right        =>      margin-right: 16pxmargin-bottom       =>      margin-bottom: 16pxmargin-vertical     =>      margin: 16px 0margin-horizontal   =>      margin: 0 16pxno-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 Default ios Value Default md Value Default wp 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" tabsHighlight 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

如有不当之处，请予指正，谢谢～