From a2db44a5e31fcb7dbbdada027d3569e95d68c05c Mon Sep 17 00:00:00 2001 From: Yao yuchi Date: Wed, 23 Feb 2022 18:20:23 +0800 Subject: [PATCH] update grid and enum api docs Signed-off-by: Yao yuchi --- .../reference/arkui-ts/ts-appendix-enums.md | 103 ++++++++++-------- .../reference/arkui-ts/ts-container-grid.md | 33 ++++-- 2 files changed, 79 insertions(+), 57 deletions(-) diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md index a63bdad329..a124b8d36e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-appendix-enums.md @@ -2,91 +2,100 @@ ## Alignment枚举说明 -| 名称 | 描述 | +| 名称 | 描述 | | -------- | -------- | -| TopStart | 顶部起始端。 | -| Top | 顶部横向居中。 | -| TopEnd | 顶部尾端。 | -| Start | 起始端纵向居中。 | -| Center | 横向和纵向居中。 | -| End | 尾端纵向居中。 | -| BottomStart | 底部起始端。 | -| Bottom | 底部横向居中。 | -| BottomEnd | 底部尾端。 | +| TopStart | 顶部起始端。 | +| Top | 顶部横向居中。 | +| TopEnd | 顶部尾端。 | +| Start | 起始端纵向居中。 | +| Center | 横向和纵向居中。 | +| End | 尾端纵向居中。 | +| BottomStart | 底部起始端。 | +| Bottom | 底部横向居中。 | +| BottomEnd | 底部尾端。 | ## Axis枚举说明 -| 名称 | 描述 | +| 名称 | 描述 | | -------- | -------- | -| Vertical | 方向为纵向。 | -| Horizontal | 方向为横向。 | +| Vertical | 方向为纵向。 | +| Horizontal | 方向为横向。 | ## ItemAlign枚举说明 -| 名称 | 描述 | +| 名称 | 描述 | | -------- | -------- | -| Auto | 使用Flex容器中默认配置。 | -| Start | 元素在Flex容器中，交叉轴方向首部对齐。 | -| Center | 元素在Flex容器中，交叉轴方向居中对齐。 | -| End | 元素在Flex容器中，交叉轴方向底部对齐。 | -| Stretch | 元素在Flex容器中，交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 | -| Baseline | 元素在Flex容器中，交叉轴方向文本基线对齐。 | +| Auto | 使用Flex容器中默认配置。 | +| Start | 元素在Flex容器中，交叉轴方向首部对齐。 | +| Center | 元素在Flex容器中，交叉轴方向居中对齐。 | +| End | 元素在Flex容器中，交叉轴方向底部对齐。 | +| Stretch | 元素在Flex容器中，交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。 | +| Baseline | 元素在Flex容器中，交叉轴方向文本基线对齐。 | ## LineCapStyle枚举说明 -| 名称 | 描述 | +| 名称 | 描述 | | -------- | -------- | -| Butt | 分割线两端为平行线。 | -| Round | 分割线两端为半圆。 | -| Square | 分割线两端为平行线。 | +| Butt | 分割线两端为平行线。 | +| Round | 分割线两端为半圆。 | +| Square | 分割线两端为平行线。 | ## PlayMode枚举值说明 -| 名称 | 描述 | +| 名称 | 描述 | | -------- | -------- | -| Normal | 动画按正常播放。 | -| Reverse | 动画反向播放。 | -| Alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 | -| AlternateReverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 | +| Normal | 动画按正常播放。 | +| Reverse | 动画反向播放。 | +| Alternate | 动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 | +| AlternateReverse | 动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 | ## ImageRepeat枚举说明 -| 名称 | 描述 | +| 名称 | 描述 | | -------- | -------- | -| X | 只在水平轴上重复绘制图片。 | -| Y | 只在竖直轴上重复绘制图片。 | -| XY | 在两个轴上重复绘制图片。 | -| NoRepeat | 不重复绘制图片。 | +| X | 只在水平轴上重复绘制图片。 | +| Y | 只在竖直轴上重复绘制图片。 | +| XY | 在两个轴上重复绘制图片。 | +| NoRepeat | 不重复绘制图片。 | ## TextDecorationType枚举说明 -| 名称 | 描述 | +| 名称 | 描述 | | -------- | -------- | -| Underline | 文字下划线修饰。 | -| LineThrough | 穿过文本的修饰线。 | -| Overline | 文字上划线修饰。 | -| None | 不使用文本装饰线。 | +| Underline | 文字下划线修饰。 | +| LineThrough | 穿过文本的修饰线。 | +| Overline | 文字上划线修饰。 | +| None | 不使用文本装饰线。 | ## TextCase枚举说明 -| 名称 | 描述 | +| 名称 | 描述 | | -------- | -------- | -| Normal | 保持文本原有大小写。 | -| LowerCase | 文本采用全小写。 | -| UpperCase | 文本采用全大写。 | +| Normal | 保持文本原有大小写。 | +| LowerCase | 文本采用全小写。 | +| UpperCase | 文本采用全大写。 | ## BarState枚举说明 -| 名称 | 描述 | +| 名称 | 描述 | | -------- | -------- | -| Off | 不显示。 | -| On | 常驻显示。 | -| Auto | 按需显示(触摸时显示，2s后消失)。 | +| Off | 不显示。 | +| On | 常驻显示。 | +| Auto | 按需显示(触摸时显示，2s后消失)。 | + +## LayoutDirection枚举说明 + +| 名称 | 描述 | +| -------- | -------- | +| Row | 沿水平方向布局，即先填满一行，再去填下一行。 | +| Column | 沿垂直方向布局，即先填满一列，再去填下一列。 | +| RowReverse | 与Row方向相反进行布局。 | +| ColumnReverse | 与Column相反方向进行布局。 | \ No newline at end of file diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md index 111c5d38e1..dc44c04623 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-grid.md @@ -3,8 +3,9 @@ > ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：** > 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局。 + -网格容器，二维布局，将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以任意组合不同的网格，做出各种各样的布局。 ## 权限列表 @@ -17,7 +18,7 @@ 包含[GridItem](ts-container-griditem.md)子组件。 -## 接口说明 +## 接口 Grid() @@ -30,20 +31,32 @@ Grid() | rowsTemplate | string | '1fr' | 用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 | | columnsGap | Length | 0 | 用于设置列与列的间距。 | | rowsGap | Length | 0 | 用于设置行与行的间距。 | -| editMode | boolean | flase | 是否进入编辑模式，进入编辑模式可以拖拽Gird组件内部[GridItem](ts-container-griditem.md)。 | -| maxCount | number | 1 | 表示可显示的最大行数。 | -| minCount | number | 1 | 表示可显示的最小行数。 | -| cellLength | number | 0 | 表示每行的固定高度。 | -| $multiSelectable^{8+}$ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 | +| editMode 8+ | boolean | flase | 是否进入编辑模式，进入编辑模式可以拖拽Gird组件内部[GridItem](ts-container-griditem.md)。 | +| layoutDirection8+ | [LayoutDirection](ts-appendix-enums.md) | LayoutDirection.Row |设置布局的主轴方向，目前支持的主轴布局方向如下：
- LayoutDirection.Row：沿水平方向布局，即先填满一列，再去填下一列。
- LayoutDirection.Column：沿垂直方向布局，即先填满一行，再去填下一行。| +| maxCount 8+ | number | 1 | 当layoutDirection是Row时，表示可显示的最大行数
当layoutDirection是Column时，表示可显示的最大列数。 | +| minCount 8+ | number | 1 | 当layoutDirection是Row时，表示可显示的最小行数
当layoutDirection是Column时，表示可显示的最小列数。 | +| cellLength 8+ | number | 0 | 当layoutDirection是Row时，表示一行的高度
当layoutDirection是Column时，表示一列的宽度。 | +| multiSelectable8+ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 | +| dragAnimation8+ | boolean | false | 是否开启拖拽GridItem动画。 | +| edgeEffection8+ | EdgeEffect | EdgeEffect.Spring | 设置边缘滑动效果，目前支持的滑动效果参见EdgeEffect枚举说明。 | + + + +- EdgeEffect枚举说明 + +| 名称 | 描述 | +| -------- | -------- | +| Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 | +| None | 滑动到边缘后无效果。 | + ## 事件 -| 名称 | 功能描述 | +| 名称 | 功能描述 | | -------- | -------- | | onScrollIndex(first: number) => void | 当前列表显示的起始位置item发生变化时触发。 | - ## 示例 ``` @@ -105,4 +118,4 @@ struct GridExample { } ``` -![zh-cn_image_0000001219744183](figures/zh-cn_image_0000001219744183.gif) +![zh-cn_image_0000001219744183](figures/zh-cn_image_0000001219744183.gif) \ No newline at end of file -- GitLab