本文共 4214 字，大约阅读时间需要 14 分钟。
本文为原创文章，转载请标明
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 => 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
修改 ./src/theme/variables.scss 中
$colors: ( primary: #488aff, secondary: #32db64, danger: #f53d3d, light: #f4f4f4, dark: #222);
可添加新颜色，如下：
twitter:( base: #55acee, contrast: #ffffff )
base 作为元素背景色，contrast 作为文本颜色
html 中的使用如下： 在 scss 中的使用如下：
my-component { background: color($colors, twitter, base);} 第一列为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;} 详见
$app-direction: multi // Both RTL and LTR$app-direction: rtl // RTL only$app-direction: ltr // LTR only
默认 LTR
如有不当之处，请予指正，谢谢～