常用样式属性

作者: IT飞牛 | 来源:发表于2018-07-31 09:48 被阅读0次

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: 76px
float-md-{modifier} min-width: 68px
float-lg-{modifier} min-width: 92px
float-xl-{modifier} min-width: 200px

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

覆写平台样式,如下:

.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

相关文章

  • 2018-07-10 CSS样式表

    常用的样式属性(文本属性): 常用的样式属性(背景属性): 常用的样式属性(方框属性): 常用的样式属性: 内嵌样...

  • day2(乱)

    css样式 1 css样式属性 #1.1 样式重置(初始化样式) 1.2 常用属性 1.3 元素水平居中 2 常用...

  • 常用样式属性

    1. CSS实用属性 文本相关 位置相关 padding & margin 2. 自定义颜色 修改 ./src/t...

  • 样式小记

    页面常用样式属性罗列 PS:不定时更新

  • Flutter 之Text、TextSpan

    Text组件常用属性 属性描述data必填项 文本信息style文本的样式信息strutStyle文本字体的样式信...

  • UITextField常用属性归纳

    UITextField常用属性归纳:文本框样式、文字样式、键盘样式、左右视图样式、清除按钮设置等,iosuitex...

  • React Native - ListView

    点击查看文档 ListView常用的属性 ScrollView 相关属性样式全部继承 dataSource Lis...

  • 2019-08-01jQuery基础

    语法 常用选择器 属性选择器 基本过滤器 书写要规范 样式设计 追加行内样式和移除 切换样式 常用 推荐on方法

  • 3.字体样式-CSS基础

    一、字体样式 1.常用的字体样式属性 属性说明font-family字体类型font-size字体大小font-w...

  • CSS

    CSS三种书写方式 外部样式 行内样式 页内样式 CSS选择器 前三个选择器比较常用 CSS属性 可继承属性 不可...

网友评论

    本文标题:常用样式属性

    本文链接:https://www.haomeiwen.com/subject/agjcvftx.html