通用样式,即所有组件都可以支持的样式
它们均与 css 的属性样式用法保持一致,开发者可写在内联样式
或<style>
标签里,实现组件样式的定制化
关于组件样式的设置,可以参考此文档入门
<template>
<div>
<div class="box-normal" style="background-color:red"></div>
<div class="box-normal"></div>
</div>
</template>
<style>
.box-normal{
background-color: green;
width: 100px;
height: 100px;
}
</style>
注:
通用样式均为非必填项。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
width | <length> | <percentage> | - | 未设置时使用组件自身内容需要的宽度 |
height | <length> | <percentage> | - | 未设置时使用组件自身内容需要的高度 |
min-width 1080+ | auto | <length> | <percentage> | auto | 指定元素的最小宽度。该属性不能为负值,默认值 auto 为弹性元素的默认最小宽度,下同 |
min-height 1080+ | auto | <length> | <percentage> | auto | 指定元素的最小高度 |
max-width 1080+ | none | <length> | <percentage> | none | 指定元素的最大宽度。该属性不能为负值,默认值 none 表示不做限制,下同 |
max-height 1080+ | none | <length> | <percentage> | none | 指定元素的最大高度 |
padding | <length> | 0 | 简写属性,在一个声明中设置所有的内边距属性,该属性可以有 1 到 4 个值,具体请参考MDN文档 |
padding-[left|top|right|bottom] | <length> | 0 | 设置一个元素的某个方向的内边距,padding 区域指一个元素的内容和其边界之间的空间,该属性不能为负值。 |
margin | <length> | 0 | 简写属性,在一个声明中设置所有的外边距属性,该属性可以有 1 到 4 个值,具体请参考MDN文档 |
margin-[left|top|right|bottom] | <length> | 0 | 设置一个元素的某个方向的外边距,该属性不能为负值。 |
border | - | 0 | 简写属性,在一个声明中设置所有的边框属性,可以按顺序设置属性 width style color,不设置的值为默认值 |
border-[left|top|right|bottom] 1050+ | - | 0 | 简写属性,在一个声明中设置对应位置的所有边框属性,可以按顺序设置属性 width style color,不设置的值为默认值 |
border-style | dotted | dashed | solid | solid | 暂时仅支持 1 个值,为元素的所有边框设置样式 |
border-width | <length> | 0 | 简写属性,在一个声明中设置元素的所有边框宽度,或者单独为各边边框设置宽度,具体请参考MDN文档 |
border-[left|top|right|bottom]-width | <length> | 0 | 为元素的某个方向的边框设置边框宽度 |
border-color | <color> | black | 简写属性,在一个声明中设置元素的所有边框颜色,或者单独为各边边框设置颜色,颜色值的填入请参考 颜色配置 |
border-[left|top|right|bottom]-color | <color> | black | 颜色值的填入请参考 颜色配置 |
border-radius | <length> | <percentage> 1070+ | 0 | border-radius 属性允许你设置元素的外边框圆角。设置时需要同时设置 border-width、border-color,单独设置 border-[left|top|right|bottom]-width,border-[left|top|right|bottom]-color 时 border-radius 无效 |
border-[top|bottom]-[left|right]-radius | <length> | <percentage> 1070+ | 0 | 设置四个角的圆角弧度 |
background | <linear-gradient> | - | 支持 渐变样式,暂时不能与 background-color、background-image 同时使用 |
background-color | <color> | - | 颜色值的填入请参考 颜色配置 |
color | <color> | - | 颜色值的填入请参考 颜色配置 |
background-image | <uri> | - | 暂时不支持与 background-color,border-color 同时使用;支持本地图片资源;1030+支持网络图片资源;1010+版本支持 9-patch 图,详情见背景图样式 |
background-size | contain | cover | auto | <length> | <percentage> | 100% 100% 1000+ | auto auto 1080+ | 设置背景图片大小,详情见背景图样式 注:仅有在快应用引擎为 1080+ 版本与快应用项目的minPlatformVersion >= 1080 时,background-size 的默认值才为auto auto |
background-repeat | repeat | repeat-x | repeat-y | no-repeat | repeat | 设置是否及如何重复绘制背景图像,详情见背景图样式 |
background-position 1010+ | <length> |<percentage> | left | right | top | bottom | center | 0px 0px | 描述了背景图片在容器中绘制的位置,支持 1-4 个参数,详情见背景图样式 |
opacity | <number> | 1 | opacity 属性指定了一个元素的透明度。 |
display | flex | none | flex | 快应用只支持 flex 布局;将当前元素的 display 设置为 none 快应用页面将不渲染此元素 |
visibility | visible | hidden | visible | visibility 属性控制显示或隐藏元素而不更改文档的布局 |
flex | <number> | - | 父容器为<div>、<list-item>、<tabs> 时生效 |
flex-grow | <number> | 0 | 父容器为<div>、<list-item> 时生效 |
flex-shrink | <number> | 1 | 父容器为<div>、<list-item> 时生效 |
flex-basis | <number> | -1 | 父容器为<div>、<list-item> 时生效 |
flex-direction | <string> | 'row' | 默认为横向’row', 父容器为<div>、<list-item> 时生效 |
align-items | <string> | 'flex-start' | align-items 定义了伸缩项目可以在伸缩容器的当前行的侧轴上对齐方式。flex-start(默认值):伸缩项目在侧轴起点边的外边距紧靠住该行在侧轴起始的边。flex-end:伸缩项目在侧轴终点边的外边距靠住该行在侧轴终点的边 。center:伸缩项目的外边距盒在该行的侧轴上居中放置。baseline:伸缩项目根据他们的基线对齐。stretch:伸缩项目拉伸填充整个伸缩容器。此值会使项目的外边距盒的尺寸在遵照「min/max-width/height」属性的限制下尽可能接近所在行的尺寸。 |
justify-content | <string> | 'flex-start' | justify-content 定义了伸缩项目沿着主轴线的对齐方式。flex-start(默认值):伸缩项目向一行的起始位置靠齐。flex-end:伸缩项目向一行的结束位置靠齐。center:伸缩项目向一行的中间位置靠齐。space-between:伸缩项目会平均地分布在行里。第一个伸缩项目一行中的最开始位置,最后一个伸缩项目在一行中最终点位置。space-around:伸缩项目会平均地分布在行里,两端保留一半的空间。 |
position | fixed | absolute1060+ | relative1060+ | relative | 1060+版本将新增支持 relative 和 absolute 属性值,且默认值为 relative;父容器为<list>、<swiper> 时不生效。 |
[left|top|right|bottom] | <number> | - | 一般配合fixed 或absolute (1060+)布局使用 |