codecamp

栅格子组件

栅格子组件,必须作为栅格容器组件(GridRow)的子组件使用。

说明

该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

可以包含单个子组件。

接口

GridCol(option?:{span?: number | GridColColumnOption, offset?: number | GridColColumnOption, order?: number | GridColColumnOption})

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名

类型

必填

说明

span

number | GridColColumnOption

占用列数。span为0表示该元素不参与布局计算,即不会被渲染。

默认值:1。

offset

number | GridColColumnOption

相对于前一个栅格子组件偏移的列数。

默认值:0。

order

number | GridColColumnOption

元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。

默认值:0。

属性

参数名

类型

必填

说明

span

number | GridColColumnOption

占用列数。span为0,意味着该元素不参与布局计算,即不会被渲染。

默认值:1。

从API version 9开始,该接口支持在ArkTS卡片中使用。

gridColOffset

number | GridColColumnOption

相对于前一个栅格子组件偏移的列数。

默认值:0。

从API version 9开始,该接口支持在ArkTS卡片中使用。

order

number | GridColColumnOption

元素的序号,根据栅格子组件的序号,从小到大对栅格子组件做排序。

默认值:0。

从API version 9开始,该接口支持在ArkTS卡片中使用。

GridColColumnOption

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数名

参数类型

必填

参数描述

xs

number

最小宽度类型设备。

sm

number

小宽度类型设备。

md

number

中等宽度类型设备。

lg

number

大宽度类型设备。

xl

number

特大宽度类型设备。

xxl

number

超大宽度类型设备。

span、offset、order属性按照xs、sm、md、lg、xl、xxl的顺序具有“继承性”,未设置值的断点将会从前一个断点取值。

参数\断点

xs

sm

md

lg

xl

xxl

span

2

2

3

3

4

4

offset

2

2

3

5

5

5

order

20

20

20

3

3

3

示例

请参考栅格容器示例代码(GridRow)

瀑布流组件的子组件
栅格容器组件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

媒体组件

像素

枚举

类型

接口

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }