Ionic3學習筆記（二）主題化

本文爲原創文章，轉載請標明出處

目錄

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	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

如有不當之處，請予指正，謝謝～