本文为原创文章,转载请标明出处
目录
- 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
默认平台配置属性值:
<table border="1"> <thead> <tr> <th>Config Property</th> <th>Default <code class="highlighter-rouge">ios</code> Value</th> <th>Default <code class="highlighter-rouge">md</code> Value</th> <th>Default <code class="highlighter-rouge">wp</code> Value</th> </tr> </thead> <tbody> <tr> <td><code class="highlighter-rouge">activator</code></td> <td><code class="highlighter-rouge">"highlight"</code></td> <td><code class="highlighter-rouge">"ripple"</code></td> <td><code class="highlighter-rouge">"highlight"</code></td> </tr> <tr> <td><code class="highlighter-rouge">actionSheetEnter</code></td> <td><code class="highlighter-rouge">"action-sheet-slide-in"</code></td> <td><code class="highlighter-rouge">"action-sheet-md-slide-in"</code></td> <td><code class="highlighter-rouge">"action-sheet-wp-slide-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">actionSheetLeave</code></td> <td><code class="highlighter-rouge">"action-sheet-slide-out"</code></td> <td><code class="highlighter-rouge">"action-sheet-md-slide-out"</code></td> <td><code class="highlighter-rouge">"action-sheet-wp-slide-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">alertEnter</code></td> <td><code class="highlighter-rouge">"alert-pop-in"</code></td> <td><code class="highlighter-rouge">"alert-md-pop-in"</code></td> <td><code class="highlighter-rouge">"alert-wp-pop-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">alertLeave</code></td> <td><code class="highlighter-rouge">"alert-pop-out"</code></td> <td><code class="highlighter-rouge">"alert-md-pop-out"</code></td> <td><code class="highlighter-rouge">"alert-wp-pop-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">backButtonText</code></td> <td><code class="highlighter-rouge">"Back"</code></td> <td><code class="highlighter-rouge">""</code></td> <td><code class="highlighter-rouge">""</code></td> </tr> <tr> <td><code class="highlighter-rouge">backButtonIcon</code></td> <td><code class="highlighter-rouge">"ios-arrow-back"</code></td> <td><code class="highlighter-rouge">"md-arrow-back"</code></td> <td><code class="highlighter-rouge">"ios-arrow-back"</code></td> </tr> <tr> <td><code class="highlighter-rouge">iconMode</code></td> <td><code class="highlighter-rouge">"ios"</code></td> <td><code class="highlighter-rouge">"md"</code></td> <td><code class="highlighter-rouge">"ios"</code></td> </tr> <tr> <td><code class="highlighter-rouge">loadingEnter</code></td> <td><code class="highlighter-rouge">"loading-pop-in"</code></td> <td><code class="highlighter-rouge">"loading-md-pop-in"</code></td> <td><code class="highlighter-rouge">"loading-wp-pop-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">loadingLeave</code></td> <td><code class="highlighter-rouge">"loading-pop-out"</code></td> <td><code class="highlighter-rouge">"loading-md-pop-out"</code></td> <td><code class="highlighter-rouge">"loading-wp-pop-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">menuType</code></td> <td><code class="highlighter-rouge">"reveal"</code></td> <td><code class="highlighter-rouge">"overlay"</code></td> <td><code class="highlighter-rouge">"overlay"</code></td> </tr> <tr> <td><code class="highlighter-rouge">modalEnter</code></td> <td><code class="highlighter-rouge">"modal-slide-in"</code></td> <td><code class="highlighter-rouge">"modal-md-slide-in"</code></td> <td><code class="highlighter-rouge">"modal-md-slide-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">modalLeave</code></td> <td><code class="highlighter-rouge">"modal-slide-out"</code></td> <td><code class="highlighter-rouge">"modal-md-slide-out"</code></td> <td><code class="highlighter-rouge">"modal-md-slide-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">pageTransition</code></td> <td><code class="highlighter-rouge">"ios-transition"</code></td> <td><code class="highlighter-rouge">"md-transition"</code></td> <td><code class="highlighter-rouge">"wp-transition"</code></td> </tr> <tr> <td><code class="highlighter-rouge">pageTransitionDelay</code></td> <td><code class="highlighter-rouge">16</code></td> <td><code class="highlighter-rouge">96</code></td> <td><code class="highlighter-rouge">96</code></td> </tr> <tr> <td><code class="highlighter-rouge">pickerEnter</code></td> <td><code class="highlighter-rouge">"picker-slide-in"</code></td> <td><code class="highlighter-rouge">"picker-slide-in"</code></td> <td><code class="highlighter-rouge">"picker-slide-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">pickerLeave</code></td> <td><code class="highlighter-rouge">"picker-slide-out"</code></td> <td><code class="highlighter-rouge">"picker-slide-out"</code></td> <td><code class="highlighter-rouge">"picker-slide-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">popoverEnter</code></td> <td><code class="highlighter-rouge">"popover-pop-in"</code></td> <td><code class="highlighter-rouge">"popover-md-pop-in"</code></td> <td><code class="highlighter-rouge">"popover-md-pop-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">popoverLeave</code></td> <td><code class="highlighter-rouge">"popover-pop-out"</code></td> <td><code class="highlighter-rouge">"popover-md-pop-out"</code></td> <td><code class="highlighter-rouge">"popover-md-pop-out"</code></td> </tr> <tr> <td><code class="highlighter-rouge">spinner</code></td> <td><code class="highlighter-rouge">"ios"</code></td> <td><code class="highlighter-rouge">"crescent"</code></td> <td><code class="highlighter-rouge">"circles"</code></td> </tr> <tr> <td><code class="highlighter-rouge">tabsHighlight</code></td> <td><code class="highlighter-rouge">false</code></td> <td><code class="highlighter-rouge">false</code></td> <td><code class="highlighter-rouge">false</code></td> </tr> <tr> <td><code class="highlighter-rouge">tabsLayout</code></td> <td><code class="highlighter-rouge">"icon-top"</code></td> <td><code class="highlighter-rouge">"icon-top"</code></td> <td><code class="highlighter-rouge">"icon-top"</code></td> </tr> <tr> <td><code class="highlighter-rouge">tabsPlacement</code></td> <td><code class="highlighter-rouge">"bottom"</code></td> <td><code class="highlighter-rouge">"bottom"</code></td> <td><code class="highlighter-rouge">"top"</code></td> </tr> <tr> <td><code class="highlighter-rouge">tabsHideOnSubPages</code></td> <td><code class="highlighter-rouge">false</code></td> <td><code class="highlighter-rouge">false</code></td> <td><code class="highlighter-rouge">true</code></td> </tr> <tr> <td><code class="highlighter-rouge">toastEnter</code></td> <td><code class="highlighter-rouge">"toast-slide-in"</code></td> <td><code class="highlighter-rouge">"toast-md-slide-in"</code></td> <td><code class="highlighter-rouge">"toast-wp-slide-in"</code></td> </tr> <tr> <td><code class="highlighter-rouge">toastLeave</code></td> <td><code class="highlighter-rouge">"toast-slide-out"</code></td> <td><code class="highlighter-rouge">"toast-md-slide-out"</code></td> <td><code class="highlighter-rouge">"toast-wp-slide-out"</code></td> </tr> </tbody> </table>
覆写平台样式,如下:
.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
如有不当之处,请予指正,谢谢~