Skip to content

布局

ES 的样式排版使用了 Flex 布局。值得注意的是,尚不兼容网页的百分比布局。


alignItems

[MDN 文档]

alignItems决定了子元素在次轴方向的排列方式(此样式设置在父元素上)。例如若子元素本来是沿着竖直方向排列的(即主轴竖直,次轴水平),则alignItems决定了它们在水平方向的排列方式。此样式和CSS中的alignItems表现一致,默认值为stretch。

类型必需
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')

alignSelf

[MDN 文档]

alignSelf决定了元素在父元素的次轴方向的排列方式(此样式设置在子元素上),其值会覆盖父元素的alignItems的值。其表现和 CSS 上的align-self一致(默认值为auto)。

类型必需
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')

borderBottomWidth

[MDN 文档]

borderBottomWidth和 CSS 上的border-bottom-width表现一致。

类型必需
number

borderLeftWidth

[MDN 文档]

borderLeftWidth和 CSS 上的border-left-width表现一致。

类型必需
number

borderRightWidth

[MDN 文档]

borderRightWidth 和 CSS 上的border-right-width表现一致。

类型必需
number

borderTopWidth

[MDN 文档]

borderTopWidth和 CSS 上的border-top-width表现一致。

类型必需
number

borderWidth

[MDN 文档]

borderWidth和 CSS 上的border-width表现一致。

类型必需
number

bottom

MDN 文档

bottom 值是指将本组件定位到距离底部多少个逻辑像素(底部的定义取决于position属性)。

它的表现和 CSS 上的bottom类似,但注意在ES 上只能使用逻辑像素值(数字单位),而不能使用百分比、em、rem、vh 或是任何其他单位。

类型必需
number

backgroundImage

[MDN 文档]

backgroundImage 值可以直接传入背景图片地址,让这张图片渲染为一个View组件的背景图片。

类型必需
string

如果使用本地图片需先在js中引入,app.vue

点击查看源码
javascript
import img from './img'

img.js中引入所有需要在js变量中或背景图中使用的图片,本地调试时引用后会在dist/dev/assets目录中生成相应图片,

点击查看源码
javascript
import logo from './assets/logo.png';

使用时需在路径前加file://assets/图片名称

点击查看源码
css
.logo {
    background-image: url("file://assets/logo.png");
}

如果图片修改替换后没有变化可以尝试如下步骤

    1. 删除dist文件夹
    1. 重新运行npm run dev重新生成dist文件夹
    1. 清除容器缓存:执行 adb shell pm clear com.hili.mp.browse.debug
    1. 设置adb shell am broadcast -a com.hili.bct.test.CHANGE_DEBUG_HOST --es host 192.168.x.x:38989(电脑ip)

backgroundPositionX

[MDN 文档]

backgroundPositionX 指定背景图片的初始位置的横轴X坐标。

类型必需
number

backgroundPositionY

[MDN 文档]

backgroundPositionY 指定背景图片的初始位置的竖轴Y坐标。

类型必需
number

flex

[MDN 文档]

在 ES 中 flex 的表现和 CSS 有些区别。 flex 在 ES 中只能为整数值。

类型必需
number

flexBasis

[MDN 文档]

flex-basis 指定了 flex 元素在主轴方向上的初始大小。

类型必需
number

flexDirection

[MDN 文档]

flexDirection 决定了容器的子元素的排列方向:row 代表水平排列, column 代表垂直排列。其他两个参数是反向排列。 它跟 css 的 flex-direction 定义很像,但 css 是默认值为 row,而 ES 默认是 column

类型必需
enum('row', 'row-reverse', 'column', 'column-reverse')

flexGrow

[MDN 文档]

flexGrow 定义伸缩项目的扩展能力。它接受一个不带单位的值做为一个比例。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。

如果所有伸缩项目的 flex-grow 设置了 1,那么每个伸缩项目将设置为一个大小相等的剩余空间。如果你给其中一个伸缩项目设置了 flex-grow 值为 2,那么这个伸缩项目所占的剩余空间是其他伸缩项目所占剩余空间的两倍。

类型必需
number

flexShrink

[MDN 文档]

flexBasis 属性指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。

类型必需
number

flexWrap

[MDN 文档]

flexWrap 定义了子元素如何在接触到父容器底部时执行换行的行为。

类型必需
enum('wrap', 'nowrap')

height

[MDN 文档]

height 定义了容器的高度,单位为 pt

类型必需
number,

justifyContent

[MDN 文档]

justifyContent 定义了浏览器如何分配顺着父容器主轴的弹性元素之间及其周围的空间。

类型必需
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')

left

[MDN 文档]

left 值是指将本组件定位到距离左边多少个逻辑像素(左边的定义取决于position属性)。

它的表现和 CSS 上的 left 类似,但注意在 ES 上只能使用逻辑像素值(数字单位),而不能使用百分比、em或是任何其他单位。

类型必需
number

margin

[MDN 文档]

设置 margin 与同时对marginTop, marginLeft, marginBottom, 和 marginRight设置了同样的值效果一致。

类型必需
number

marginBottom

[MDN 文档]

marginBottom 和 CSS 的 margin-bottom 类似。

类型必需
number

marginHorizontal

设置 marginHorizontal 与同时设置 marginLeft and marginRight一个值效果一致.

类型必需
number

marginLeft

[MDN 文档]

marginLeft 与 CSS 的 margin-left 类似。

类型必需
number

marginRight

[MDN 文档]

marginRight 与 CSS 的 margin-right 类似。

类型必需
number

marginTop

[MDN 文档]

marginTop 和 CSS 的 margin-top 类似。

类型必需
number

marginVertical

设置 marginVertical 与同时设置 marginTop and marginBottom一个值效果一致。

类型必需
number

overflow

overflow 定义了子元素超过父容器宽高度后的显示情况 overflow: hidden 的情况会导致子元素被父容器切割超出显示范围的部分 overflow: visible 会让子容器正常显示全部,即使超出父容器的显示范围。

类型必需
enum('visible', 'hidden')

padding

[MDN 文档]

设置 padding 与同时设置paddingTop, paddingBottom, paddingLeft, 和 paddingRight一个值时效果一致。

类型必需
number

paddingBottom

[MDN 文档]

paddingBottom 与 CSS 的 padding-bottom 类似。

类型必需
number

paddingHorizontal

设置 paddingHorizontal 与同时设置 paddingLeftpaddingRight一个值时效果一致.

类型必需
number

paddingLeft

[MDN 文档]

paddingLeft 与 CSS 的 padding-left 类似。

类型必需
number

paddingRight

[MDN 文档]

paddingRight 和 CSS 的 padding-right 类似。

类型必需
number

paddingTop

[MDN 文档]

paddingTop 和 CSS 的 padding-top 类似。

类型必需
number

paddingVertical

设置 paddingVertical 与同时设置 paddingToppaddingBottom一个值时效果一致.

类型必需
number

position

[MDN 文档]

position 在 ES 里表现与 CSS基本一致, 但是所有时候都是默认为 relative, 所以当元素设置 absolute 的时候可以保证永远只对上一级父元素绝对定位。

它和 CSS 的'position'属性类似,但 ES 内的position只有absoluterelative两个属性。

类型必需
enum('absolute', 'relative')

[MDN 文档]

right 值是指将本组件定位到距离右边多少个逻辑像素(右边的定义取决于position属性)。

它的表现和 CSS 上的right类似,但注意在React Native上只能使用逻辑像素值(数字单位),而不能使用百分比、em或是任何其他单位。

类型必需
number

top

[MDN 文档]

top 值是指将本组件定位到距离顶部多少个逻辑像素(顶部的定义取决于position属性)。

它的表现和 CSS 上的top类似,但注意在React Native上只能使用逻辑像素值(数字单位),而不能使用百分比、em或是任何其他单位。

类型必需
number

width

[MDN 文档]

width定义了容器的宽度

类型必需
number

zIndex

[MDN 文档]

zIndex 决定了容器排列的顺序。一般情况下,你无需直接使用 zIndex,容器元素会按照节点树的顺序依次渲染,在后面的元素会覆盖前面的元素(如果有覆盖情况的话)。zIndex 可以在你需要手动指定绘制层级的情况使用。

类型必需
number