0.10

VN 属性

通用属性

通用属性名类型默认值说明
classString引用 vnss 中的样式类；多个样式可用空格分隔
idString用于 CSS 匹配和 getElementById()
width[rpx pt dp px % auto]auto---
height[rpx pt dp px % auto]auto---
aspect-ratioFloat宽高比
background-stretch-param[整数的组合]---
background-colorcolor#FFFFFFFF取值格式为#RGB，#RRGGBB #RRGGBBAA，RRGGBBAA，如果同时设置了background，background的优先级更高
backgroundString1.不拉伸的图片如: ../image/btn_bg
alphaFloat10:透明 到 1:不透明
padding[rpx pt dp px %]0rpx参见 CSS 标准写法
padding-left[rpx pt dp px %]共存时覆盖 padding 的值
padding-right[rpx pt dp px %]共存时覆盖 padding 的值
padding-top[rpx pt dp px %]共存时覆盖 padding 的值
padding-bottom[rpx pt dp px %]]共存时覆盖 padding 的值
margin[rpx pt dp px %]0rpx参见 CSS 标准写法
margin-left[rpx pt dp px %]共存时覆盖 margin 的值
margin-right[rpx pt dp px %]共存时覆盖 margin 的值
margin-top[rpx pt dp px %]共存时覆盖 margin 的值
margin-bottom[rpx pt dp px %]共存时覆盖 margin 的值
max-height[rpx pt dp px %]---
max-width[rpx pt dp px %]---
min-height[rpx pt dp px %]---
min-width[rpx pt dp px %]---
hiddenBooleanfalse是否隐藏
enableBooleantrue是否启用，为 false 时不接收点击事件
tooltipString""鼠标hover提示，只有桌面端支持
overflow[visible hidden]hidden当内容溢出元素框时发生的事情，visible 表示溢出的内容不会被裁剪，hidden 表示溢出的内容会被裁剪，visible 必须配合 flex-shrink=0 使用
border-colorcolor#00000000设置四条边框的颜色。目前除了 View 标签能支持4个边框设置不同的值，其他标签只支持4个边框设置相同的值
border-width[rpx pt dp px]0rpx设置边框的宽度。目前除了 View 标签能支持4个边框设置不同的值，其他标签只支持4个边框设置相同的值
border-radius[rpx pt dp px]0rpx设置边框的圆角属性。目前除了 View 标签能支持4个角设置不同的值，其他标签只支持4个角设置相同的值

Flexbox 布局属性

Flexbox 布局属性用于页面排版布局，它分为容器节点相关的属性和子节点相关的属性。容器属性和子节点属性相互影响，配合生效。 关于 Flexbox 属性的详细定义，请参见: YogaLayout

代码示例如下：

<!--Flexbox.vnml-->
    <view width="100%" height="auto" flex-direction="row" align-items="center">
    <image width="200rpx" aspect-ratio="1" src="/img/video-native.png" position="relative"/>
    <text height="200rpx" width="auto" flex-grow="1" font-size="30rpx" background-color="gray">
        FlexBox
    </text>
</view>

Flex 容器节点的属性

这些属性只对容器节点有效(view/list/scroll-view/view-pager)

类型属性/事件/方法名参数类型参数默认值说明
Propertyalign-contentEnumstretch多行下多根主轴线的对齐方式：flex-start / flex-end / center / space-between / space-around / stretch
Propertyalign-itemsEnumstretch项目在交叉轴上如何对齐：flex-start / flex-end / center / baseline / stretch
Propertyflex-directionEnumrow弹性布局主轴的方向：row / row-reverse / column / column-reverse
Propertyflex-wrapEnumno-wrap折行属性，行排满，如何换行属性：nowrap / wrap / wrap-reverse
Propertyjustify-contentEnumflex-start项目在主轴上的对齐方式：flex-start / flex-end / center / space-between / space-around

Flex 子节点的属性

这些属性可配置于所有标签，但仅当其有父容器时才生效

类型属性/事件/方法名参数类型参数默认值说明
Propertyalign-selfEnumauto允许单个项目有与其他项目不一样的对齐方式：auto / flex-start / flex-end / center / baseline / stretch
Propertyflex-basis[Enum %]auto在分配多余空间之前，项目占据的主轴空间
Propertyflex-growFloat0拉伸因子，项目的放大比例
Propertyflex-shrinkFloat1收缩规则，项目的缩小比例
PropertypositionEnumrelativerelative/absolute
Propertyleft[rpx pt dp px %]0rpxleft属性影响元素的水平位置
Propertyright[rpx pt dp px %]0rpxright属性影响元素的水平位置
Propertytop[rpx pt dp px %]0rpxtop属性影响元素的竖直位置
Propertybottom[rpx pt dp px %]0rpxbottom属性影响元素的竖直位置
← VN 事件VN CSS →