本文為原創(chuàng)文章铺董，轉(zhuǎn)載請(qǐng)標(biāo)明出處
目錄
- CSS實(shí)用屬性
- 文本相關(guān)
- 位置相關(guān)
- padding & margin
- 自定義顏色
- 平臺(tái)樣式
- 覆寫(xiě)Ionic Sass變量
- RTL支持
1. CSS實(shí)用屬性
文本相關(guān)
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???
第一列為屬性莽鸿，第二列為說(shuō)明
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
位置相關(guān)
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???
第一列為屬性，第二列為說(shuō)明
float-left => float: left
float-right => float: right
float-start => float: left | float: right
float-end => float: left | float: right
padding & margin
第一列為屬性，第二列為說(shuō)明
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. 平臺(tái)樣式
第一列為Platform凰浮，第二列為Mode
ios => ios
android => md
windows => wp
core => md
默認(rèn)平臺(tái)配置屬性值：
| 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" |
覆寫(xiě)平臺(tái)樣式，如下：
.md .button {
text-transform: capitalize;
}
或簡(jiǎn)寫(xiě)為：
.button-md {
text-transform: capitalize;
}
4. 覆寫(xiě)Ionic Sass變量
詳見(jiàn)Ionic Docs
5. RTL支持
$app-direction: multi // Both RTL and LTR
$app-direction: rtl // RTL only
$app-direction: ltr // LTR only
默認(rèn) LTR
詳見(jiàn)Ionic Docs
如有不當(dāng)之處拙已，請(qǐng)予指正决记，謝謝～
