diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md index b924ecf382677766765bd4485c553954f8f15273..d811751ef8a7f316e3f6e84acc23c557d1d40bd0 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-datepicker.md @@ -16,11 +16,11 @@ ## 接口 -DatePicker(options?: DatePickerOptions) +DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) 根据指定范围的Date创建可以选择日期的滑动选择器。 -**options参数:** +**参数:** | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | ---- | ---- | ------------------ | ----------- | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md index 27dd1220854ba5d1f115b2db271c7ad5811fde61..ace3f6f67777921c5289e61b598d16f341199f3a 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md @@ -18,9 +18,8 @@ Select(options: Array\) -**参数：** - -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +**SelectOption对象说明：** +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | ----- | ----------------------------------- | ---- | ---- | ------- | | value | [ResourceStr](../../ui/ts-types.md) | 是 | - | 下拉选项内容。 | | icon | [ResourceStr](../../ui/ts-types.md) | 否 | - | 下拉选项图片。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md index 6dead6a086fcc49a77fc31e5a6f7e2c8b5c6bb29..ec399310257262a73c410c14b91fb4248c09c472 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md @@ -19,7 +19,7 @@ ## 接口 -TextPicker(options: {range: string[]|Resource, selected?: number}) +TextPicker(options: {range: string[]|Resource, selected?: number, value?: string}) 根据range指定的选择范围创建文本选择器。 @@ -28,7 +28,8 @@ TextPicker(options: {range: string[]|Resource, selected?: number}) | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | ---- | ----- | --------------- | | range | string[] \| Resource | 是 | - | 选择器的数据选择范围。 | -| selected | number | 否 | 第一个元素 | 选中项在数组中的index值。 | +| selected | number | 否 | 0 | 选中项在数组中的index值。 | +| value | string | 否 | 第一个元素值 | 选中项的值，优先级低于selected。 | ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md index 0fe6d8eaba0707369c7d4c1567c58cf025eaa045..475cda01224628fe385fc4f3238f1e5c4ccf3605 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-components-toggle.md @@ -12,7 +12,7 @@ ## 子组件 -无 +仅当ToggleType为Button时可包含子组件。 ## 接口 @@ -30,9 +30,9 @@ Toggle(options: { type: ToggleType, isOn?: boolean }) | 名称 | 描述 | | -------- | ---------------------------------------- | -| Checkbox | 提供单选框样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。
> **说明：**
> [通用属性padding](ts-universal-attributes-size.md)的默认值为：
{
 top: 14 vp,
 right: 6 vp,
 bottom: 14 vp,
 left: 6 vp
} | -| Button | 提供状态按钮样式，如果有文本设置，则相应的文本内容会显示在按钮内部。 | -| Switch | 提供开关样式，子组件设置文本不生效，如需文本设置，可将Text和当前组件放入布局组件中。
> **说明：**
> [通用属性padding](ts-universal-attributes-size.md)默认值为：
{
 top: 12 vp,
 right: 12 vp,
 bottom: 12 vp,
 left: 12 vp
} | +| Checkbox | 提供单选框样式。
> **说明：**
> [通用属性padding](ts-universal-attributes-size.md)的默认值为：
{
 top: 14 vp,
 right: 6 vp,
 bottom: 14 vp,
 left: 6 vp
} | +| Button | 提供状态按钮样式，如果子组件有文本设置，则相应的文本内容会显示在按钮内部。 | +| Switch | 提供开关样式。
> **说明：**
> [通用属性padding](ts-universal-attributes-size.md)默认值为：
{
 top: 12 vp,
 right: 12 vp,
 bottom: 12 vp,
 left: 12 vp
} | ## 属性 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md index 07fc48d403c96427080e2ae8d5433589c669cb95..7d80fc383f265c25a41ab13919c3fff84e420286 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md @@ -18,29 +18,30 @@ ## 接口 -AlphabetIndexer(value: {arrayValue : Array<string>, selected : number}) +AlphabetIndexer(value: {arrayValue: Array<string>, selected: number}) **参数：** | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | ---------- | ------------------- | ---- | ---- | ---------- | | arrayValue | Array<string> | 是 | - | 字母索引字符串数组。 | -| selected | number | 是 | - | 选中项编号。 | +| selected | number | 是 | - | 初始选中项索引值。 | ## 属性 | 名称 | 参数类型 | 描述 | | ----------------------- | ---------------------------------------- | ----------------------------------- | -| selectedColor | Color | 选中文本文字颜色。 | -| popupColor | Color | 弹出提示文本字体颜色。 | -| selectedBackgroundColor | Color | 选中文本背景颜色。 | -| popupBackground | Color | 弹窗索引背景色。 | -| usingPopup | boolean | 是否使用弹出索引提示。 | -| selectedFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | 选中文本文字样式。 | -| popupFont | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | 弹出提示文本字体样式。 | -| font | {
size?: number,
weight?: FontWeight,
family?: string,
style?: FontStyle
} | 字母索引条默认文本字体样式。 | -| itemSize | Length | 字母索引条字母区域大小，字母区域为正方形，设置正方形边长。 | -| alignStyle | IndexerAlign | 字母索引条对齐样式，支持左侧对齐样式与右侧对齐样式，影响弹窗弹出位置。 | +| color | [ResourceColor](../../ui/ts-types.md) | 设置文字颜色。 | +| selectedColor | [ResourceColor](../../ui/ts-types.md) | 设置选中项文字颜色。 | +| popupColor | [ResourceColor](../../ui/ts-types.md) | 设置提示弹窗文字颜色。 | +| selectedBackgroundColor | [ResourceColor](../../ui/ts-types.md) | 设置选中项背景颜色。 | +| popupBackground | [ResourceColor](../../ui/ts-types.md) | 设置提示弹窗背景色。 | +| usingPopup | boolean | 设置是否使用提示弹窗。 | +| selectedFont | [Font](../../ui/ts-types.md) | 设置选中项文字样式。 | +| popupFont | [Font](../../ui/ts-types.md) | 设置提示弹窗字体样式。 | +| font | [Font](../../ui/ts-types.md) | 设置字母索引条默认字体样式。 | +| itemSize | Length | 设置字母索引条字母区域大小，字母区域为正方形，即正方形边长。 | +| alignStyle | IndexerAlign | 设置提示弹窗的弹出位置。 | ## IndexerAlign枚举说明 @@ -53,10 +54,10 @@ AlphabetIndexer(value: {arrayValue : Array<string>, selected : number}) | 名称 | 功能描述 | | ---------------------------------------- | ---------------------------------------- | -| onSelected(index: number) => void(deprecated) | 索引条选中回调。 | -| onSelect(index: number) => void8+ | 索引条选中回调。 | -| onRequestPopupData(callback: (index: number) => Array<string>)8+ | 选中字母索引后，请求索引提示窗口显示内容回调。
返回值：索引对应的字符串数组，此字符串数组在弹出窗口中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。 | -| onPopupSelect(callback: (index: number) => void)8+ | 字母索引提示窗口选中回调。 | +| onSelected(callback: (index: number) => void)(deprecated) | 索引条选中回调,返回值为当前选中索引。 | +| onSelect(callback: (index: number) => void)8+ | 索引条选中回调,返回值为当前选中索引。 | +| onRequestPopupData(callback: (index: number) => Array<string>)8+ | 选中字母索引后，请求索引提示弹窗显示内容回调。
返回值：索引对应的字符串数组，此字符串数组在弹窗中竖排显示，字符串列表最多显示5个，超出部分可以滑动显示。 | +| onPopupSelect(callback: (index: number) => void)8+ | 字母索引提示弹窗字符串列表选中回调。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md index e46016e32002286fd98d4c305aaee07b77715bd5..875b3919cc3e238d4cd7f19f3b127695b9cc3037 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-badge.md @@ -20,7 +20,9 @@ ## 接口 -Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style?: BadgeStyle}) +方法1：Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style: BadgeStyle}) + +创建数字标记组件。 **参数：** @@ -29,11 +31,11 @@ Badge(value: {count: number, position?: BadgePosition, maxCount?: number, style? | count | number | 是 | - | 设置提醒消息数。 | | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | | maxCount | number | 否 | 99 | 最大消息数，超过最大消息时仅显示maxCount+。 | -| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | +| style | BadgeStyle | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | -Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle}) +方法2： Badge(value: {value: string, position?: BadgePosition, style: BadgeStyle}) -根据字符串创建提醒组件。 +根据字符串创建标记组件。 **参数：** @@ -41,23 +43,23 @@ Badge(value: {value: string, position?: BadgePosition, style?: BadgeStyle}) | -------- | ------------- | ---- | ---------------------- | --------------------------------- | | value | string | 是 | - | 提示内容的文本字符串。 | | position | BadgePosition | 否 | BadgePosition.RightTop | 设置提示点显示位置。 | -| style | BadgeStyle | 否 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | +| style | BadgeStyle | 是 | - | Badge组件可设置样式，支持设置文本颜色、尺寸、圆点颜色和尺寸。 | ## BadgeStyle对象说明 | 名称 | 类型 | 必填 | 默认值 | 描述 | | ---------- | -------------------------- | ---- | ----------- | --------- | -| color | Color | 否 | Color.White | 文本颜色。 | +| color | [ResourceColor](../../ui/ts-types.md) | 否 | Color.White | 文本颜色。 | | fontSize | number \| string | 否 | 10 | 文本大小。 | -| badgeSize | number \| string | 是 | - | badge的大小。 | -| badgeColor | Color | 否 | Color.Red | badge的颜色。 | +| badgeSize | number \| string | 否 | - | badge的大小。 | +| badgeColor | [ResourceColor](../../ui/ts-types.md) | 否 | Color.Red | badge的颜色。 | ## BadgePosition枚举说明 | 名称 | 描述 | | -------- | ------------ | -| Right | 圆点显示在右侧纵向居中。 | | RightTop | 圆点显示在右上角。 | +| Right | 圆点显示在右侧纵向居中。 | | Left | 圆点显示在左侧纵向居中。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md index b6f8c14612dba32eebbbeccf8815a7c0f24dad6b..0301e44a265475e2821b3484230fd563ddfebd48 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-column.md @@ -19,7 +19,7 @@ ## 接口 -Column(value:{space?: Length}) +Column(value?:{space?: Length}) **参数：** @@ -32,7 +32,7 @@ Column(value:{space?: Length}) | 名称 | 参数类型 | 默认值 | 描述 | | ---------------- | --------------------------------- | ---------------------- | ----------------- | | alignItems | HorizontalAlign | HorizontalAlign.Center | 设置子组件在水平方向上的对齐格式。 | -| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 | +| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在垂直方向上的对齐格式。 | ## HorizontalAlign枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md index 11b41334040d4c7b60b0f2cad0cd43f66019c5c8..4804b66653af4bb15972a94efe80dfc402d77c4e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-flex.md @@ -19,7 +19,7 @@ ## 接口 -Flex(options?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign }) +Flex(value?: { direction?: FlexDirection, wrap?: FlexWrap, justifyContent?: FlexAlign, alignItems?: ItemAlign, alignContent?: FlexAlign }) 标准Flex布局容器。 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 867eb1359ab7b54ca19a9a0b17e6a69b2ec8f123..b7821b88211bde00000e0e4f03be80dc98ff55ca 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 @@ -19,7 +19,13 @@ ## 接口 -Grid() +Grid(scroller?: Scroller) + +**参数：** + +| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | +| --------- | ---------------------------------------- | ---- | --------------------------- | ----------------------- | +| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | ## 属性 @@ -30,18 +36,44 @@ Grid() | rowsTemplate | string | '1fr' | 用于设置当前网格布局行的数量，不设置时默认1行 示例, '1fr 1fr 2fr'分三行，将父组件允许的高分为4等份，第一行占1份，第二行占一份，第三行占2份。 | | columnsGap | Length | 0 | 用于设置列与列的间距。 | | rowsGap | Length | 0 | 用于设置行与行的间距。 | -| editMode 8+ | boolean | flase | 是否进入编辑模式，进入编辑模式可以拖拽Gird组件内部[GridItem](ts-container-griditem.md)。 | -| layoutDirection8+ | number | 0 | 设置布局的主轴方向，目前支持的主轴布局方向如下：
- 0：主轴布局方向沿水平方向布局，即先填满一列，再去填下一列。
- 1：主轴布局方向沿垂直方向布局，即先填满一行，再去填下一行。 | -| maxCount 8+ | number | 1 | 当layoutDirection是0时，表示可显示的最大行数
当layoutDirection是1时，表示可显示的最大列数。 | -| minCount 8+ | number | 1 | 当layoutDirection是0时，表示可显示的最小行数。
当layoutDirection是1时，表示可显示的最小列数。 | -| cellLength 8+ | number | 0 | 当layoutDirection是0时，表示一行的高度。
当layoutDirection是1时，表示一列的宽度。 | -| multiSelectable8+ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 | +| scrollBar | [BarState](ts-appendix-enums.md#barstate枚举说明) | BarState.Off | 设置滚动条状态。 | +| scrollBarColor | string \| number \| Color | - | 设置滚动条的颜色。 | +| scrollBarWidth | Length | - | 设置滚动条的宽度。 | +| cachedCount | number | 1 | 设置预加载的GridItem的数量。 | +| editMode 8+ | boolean | flase | 是否进入编辑模式，进入编辑模式可以拖拽Grid组件内部[GridItem](ts-container-griditem.md)。 | +| layoutDirection8+ | GridDirection | GridDirection.Row | 设置布局的主轴方向。 | +| maxCount8+ | number | 1 | 当layoutDirection是Row/RowReverse时，表示可显示的最大行数
当layoutDirection是Column/ColumnReverse时，表示可显示的最大列数。 | +| minCount8+ | number | 1 | 当layoutDirection是Row/RowReverse时，表示可显示的最小行数。
当layoutDirection是Column/ColumnReverse时，表示可显示的最小列数。 | +| cellLength8+ | number | 0 | 当layoutDirection是Row/RowReverse时，表示一行的高度。
当layoutDirection是Column/ColumnReverse时，表示一列的宽度。 | +| multiSelectable8+ | boolean | false | 是否开启鼠标框选。
- false：关闭框选。
- true：开启框选。 | +| supportAnimation8+ | boolean | false | 是否支持动画。 | + +## GridDirection枚举说明8+ + +| 名称 | 描述 | +| ---------- | ---------- | +| Row | 主轴布局方向沿水平方向布局，即自左往右先填满一行，再去填下一行。 | +| Column | 主轴布局方向沿垂直方向布局，即自上往下先填满一列，再去填下一列。 | +| RowReverse | 主轴布局方向沿水平方向反向布局，即自右往左先填满一行，再去填下一行。 | +| ColumnReverse | 主轴布局方向沿垂直方向反向布局，即自下往上先填满一列，再去填下一列。 | ## 事件 | 名称 | 功能描述 | | ---------------------------------------- | ----------------------- | -| onScrollIndex(first: number) => void | 当前列表显示的起始位置item发生变化时触发。 | +| onScrollIndex(event: (first: number) => void) | 当前网格显示的起始位置item发生变化时触发，返回值为当前显示的网格起始位置的索引值。 | +| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | 开始拖拽网格元素时触发，返回值event见ItemDragInfo对象说明，itemIndex为被拖拽网格元素索引值。 | +| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入网格元素范围内时触发，返回值event见ItemDragInfo对象说明。 | +| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在网格元素范围内移动时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置。 | +| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开网格元素时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽离开的网格元素索引值。 | +| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的网格元素可作为拖拽释放目标，当在网格元素内停止拖拽时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置，isSuccess为是否成功释放。 | + +## ItemDragInfo对象说明 + +| 名称 | 类型 | 描述 | +| ---------- | ---------- | ---------- | +| x | number | 当前拖拽点的x坐标。 | +| y | number | 当前拖拽点的y坐标。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md index 691cc7f06f7a182ee270de0efbde5ae8f262302b..40551bff574f61d0d50ae29d7a092c7677c197a9 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-griditem.md @@ -38,7 +38,7 @@ GridItem() | 名称 | 功能描述 | | ---------------------------------------- | ---------------------------------------- | -| onSelect(callback: (isSelected: boolean) => any)8+ | GridItem元素被鼠标框选的状态改变时触发回调。
isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | +| onSelect(callback: (isSelected: boolean) => void)8+ | GridItem元素被鼠标框选的状态改变时触发回调。
isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md index ab48b27f7ffe68289ab6a37d9b4b24f10b95e4a5..2e2c5f33fe48f2ad9ba31587a22926e2ad1ab079 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-list.md @@ -19,21 +19,24 @@ ## 接口 -List(value:{space?: number, initialIndex?: number}) +List(value:{space?: number | string, initialIndex?: number, scroller?: Scroller}) **参数：** | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | ------------ | ------ | ---- | ---- | ---------------------------------------- | -| space | number | 否 | 0 | 列表项间距。 | +| space | Length | 否 | 0 | 列表项间距。 | | initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item，即显示第一个item，如设置的序号超过了最后一个item的序号，则设置不生效。 | +| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 | ## 属性 | 名称 | 参数类型 | 默认值 | 描述 | | ---------------------------- | ---------------------------------------- | ----------------- | ---------------------------------------- | | listDirection | [Axis](ts-appendix-enums.md#axis枚举说明) | Vertical | 设置List组件排列方向参照Axis枚举说明。 | -| divider | {
strokeWidth: Length,
color?:Color,
startMargin?: Length,
endMargin?: Length
} | - | 用于设置ListItem分割线样式，默认无分割线。
strokeWidth: 分割线的线宽。
color: 分割线的颜色。
startMargin： 分割线距离列表侧边起始端的距离。
endMargin: 分割线距离列表侧边结束端的距离。 | +| divider | {
strokeWidth: Length,
color?:[ResourceColor](../../ui/ts-types.md),
startMargin?: Length,
endMargin?: Length
} | - | 用于设置ListItem分割线样式，默认无分割线。
strokeWidth: 分割线的线宽。
color: 分割线的颜色。
startMargin： 分割线距离列表侧边起始端的距离。
endMargin: 分割线距离列表侧边结束端的距离。 | +| scrollBar | [BarState](ts-appendix-enums.md#barstate枚举说明) | BarState.Off | 设置滚动条状态。 | +| cachedCount | number | 1 | 设置预加载的ListItem的数量。 | | editMode | boolean | false | 声明当前List组件是否处于可编辑模式。 | | edgeEffect | EdgeEffect | EdgeEffect.Spring | 滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。 | | chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效，开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果：list内的list-item间隔一定距离，在基本的滑动交互行为下，主动对象驱动从动对象进行联动，驱动效果遵循弹簧物理动效。
- false：不启用链式联动。
- true：启用链式联动。 | @@ -45,14 +48,33 @@ List(value:{space?: number, initialIndex?: number}) | 名称 | 描述 | | ------ | ---------------------------------------- | | Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 | +| Fade | 阴影效果，滑动到边缘后会有圆弧状的阴影。 | | None | 滑动到边缘后无效果。 | ## 事件 | 名称 | 功能描述 | | ---------------------------------------- | ------------------------ | -| onItemDelete(index: number) => boolean | 列表项删除时触发。 | -| onScrollIndex(firstIndex: number, lastIndex: number) => void | 当前列表显示的起始位置和终止位置发生变化时触发。 | +| onItemDelete(event: (index: number) => boolean) | 列表项删除时触发。 | +| onScroll(event: (scrollOffset: number, scrollState: ScrollState) => void) | 列表滑动时触发，返回值scrollOffset为滑动偏移量，scrollState为当前滑动状态。 | +| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发，返回值分别为滑动起始位置索引值与滑动结束位置索引值。 | +| onReachStart(event: () => void) | 列表到达起始位置时触发。 | +| onReachEnd(event: () => void) | 列表到底末尾位置时触发。 | +| onScrollStop(event: () => void) | 列表滑动停止时触发。 | +| onItemMove(event: (from: number, to: number) => boolean) | 列表元素发生移动时触发，返回值from、to分别为移动前索引值与移动后索引值。 | +| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | 开始拖拽列表元素时触发，返回值event见ItemDragInfo对象说明，itemIndex为被拖拽列表元素索引值。 | +| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入列表元素范围内时触发，返回值event见ItemDragInfo对象说明。 | +| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在列表元素范围内移动时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置。 | +| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开列表元素时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽离开的列表元素索引值。 | +| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的列表元素可作为拖拽释放目标，当在列表元素内停止拖拽时触发，返回值event见ItemDragInfo对象说明，itemIndex为拖拽起始位置，insertIndex为拖拽插入位置，isSuccess为是否成功释放。 | + +## ScrollState枚举说明 + +| 名称 | 描述 | +| ------ | ------------------------- | +| Idle | 未滑动状态。 | +| Scroll | 惯性滑动状态。 | +| Fling | 手指拖动状态。 | > **说明：** > diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md index 1cefb5894adba0192db6d10c5bbe80193496bd96..4eda9fbb21d65642fb56c345ef0f8f44bf6cc371 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-listitem.md @@ -27,7 +27,7 @@ ListItem() | 名称 | 参数类型 | 默认值 | 描述 | | ----------------------- | ------- | ----------- | ---------------------------------------- | | sticky | Sticky | Sticky.None | 设置ListItem吸顶效果，参见Sticky枚举描述。 | -| editable | boolean | false | 当前ListItem元素是否可编辑，进入编辑模式后可删除。 | +| editable | boolean \| EditMode | false | 当前ListItem元素是否可编辑，进入编辑模式后可删除或移动。 | | selectable8+ | boolean | true | 当前ListItem元素是否可以被鼠标框选。
>  **说明：**
> 外层List容器的鼠标框选开启时，ListItem的框选才生效。 | ## Sticky枚举说明 @@ -36,12 +36,21 @@ ListItem() | ------ | --------- | | None | 无吸顶效果。 | | Normal | 当前item吸顶。 | +| Opacity | 当前item吸顶显示透明度变化效果。 | + +## EditMode枚举说明 + +| 名称 | 描述 | +| ------ | --------- | +| None | 编辑操作不限制。 | +| Deletable | 可删除。 | +| Movable | 可移动。 | ## 事件 | 名称 | 功能描述 | | ---------------------------------------- | ---------------------------------------- | -| onSelect(callback: (isSelected: boolean) => any)8+ | ListItem元素被鼠标框选的状态改变时触发回调。
isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | +| onSelect(event: (isSelected: boolean) => void)8+ | ListItem元素被鼠标框选的状态改变时触发回调。
isSelected：进入鼠标框选范围即被选中返回true， 移出鼠标框选范围即未被选中返回false。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md index 6c6ae8ae127d65a0759b34e00634d1c446c20765..a188391e2ea53850b0a160f5557f673b3b2fcd5b 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-row.md @@ -19,7 +19,7 @@ ## 接口 -Row(value:{space?: Length}) +Row(value?:{space?: Length}) **参数：** @@ -32,7 +32,7 @@ Row(value:{space?: Length}) | 名称 | 参数类型 | 默认值 | 描述 | | ---------------- | --------------------------------- | -------------------- | ----------------- | | alignItems | VerticalAlign | VerticalAlign.Center | 在垂直方向上子组件的对齐格式。 | -| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 | +| justifyContent8+ | [FlexAlign](ts-container-flex.md) | FlexAlign.Start | 设置子组件在水平方向上的对齐格式。 | ## VerticalAlign枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md index 73c08dfec6f98b43ae0b3e6132b9c2f0febf7dfe..37de4193c8d654c119e758214e25967192addc51 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md @@ -27,9 +27,10 @@ Scroll(scroller?: Scroller) | 名称 | 参数类型 | 默认值 | 描述 | | -------------- | ---------------------------------------- | ------------------------ | --------- | | scrollable | ScrollDirection | ScrollDirection.Vertical | 设置滚动方法。 | -| scrollBar | [BarState](ts-appendix-enums.md#barstate枚举说明) | ScrollDirection.Auto | 设置滚动条状态。 | -| scrollBarColor | Color | - | 设置滚动条的颜色。 | +| scrollBar | [BarState](ts-appendix-enums.md#barstate枚举说明) | BarState.Off | 设置滚动条状态。 | +| scrollBarColor | string \| number \| Color | - | 设置滚动条的颜色。 | | scrollBarWidth | Length | - | 设置滚动条的宽度。 | +| edgeEffect | EdgeEffect | EdgeEffect.Spring | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。 | ## ScrollDirection枚举说明 @@ -39,17 +40,25 @@ Scroll(scroller?: Scroller) | Vertical | 仅支持竖直方向滚动。 | | None | 不可滚动。 | +## EdgeEffect枚举说明 + +| 名称 | 描述 | +| ------ | ---------------------------------------- | +| Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 | +| Fade | 阴影效果，滑动到边缘后会有圆弧状的阴影。 | +| None | 滑动到边缘后无效果。 | + ## 事件 | 名称 | 功能描述 | | ---------------------------------------- | ----------------------------- | -| onScroll(xOffset: number, yOffset: number) => void | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 | -| onScrollEdge(side: Edge) => void | 滚动到边缘事件回调。 | -| onScrollEnd() => void | 滚动停止事件回调。 | +| onScroll(event: (xOffset: number, yOffset: number) => void) | 滚动事件回调, 返回滚动时水平、竖直方向偏移量。 | +| onScrollEdge(event: (side: Edge) => void) | 滚动到边缘事件回调。 | +| onScrollEnd(event: () => void) | 滚动停止事件回调。 | ## Scroller -可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，目前支持绑定到List和Scroll组件上。 +可滚动容器组件的控制器，可以将此组件绑定至容器组件，然后通过它控制容器组件的滚动，目前支持绑定到List、Scroll、ScrollBar上。 ### 导入对象 @@ -81,11 +90,17 @@ scrollEdge(value: Edge): void 滚动到容器边缘。 -**参数：** +## Edge枚举说明 -| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | -| ----- | ---- | ---- | ---- | --------- | -| value | Edge | 是 | - | 滚动到的边缘位置。 | +| 名称 | 描述 | +| ----- | ---- | +| Top | 竖直方向上边缘 | +| Center | 竖直方向居中位置 | +| Bottom | 竖直方向下边缘 | +| Baseline | 交叉轴方向文本基线位置 | +| Start | 水平方向起始位置 | +| Middle | 水平方向居中位置 | +| End | 水平方向末尾位置 | ### scrollPage @@ -98,11 +113,11 @@ scrollPage(value: { next: boolean, direction?: Axis }): void | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | --------- | ------- | ---- | ---- | ------------------------------ | | next | boolean | 是 | - | 是否向下翻页。true表示向下翻页，false表示向上翻页。 | -| direction | Axis | 否 | - | 设置滚动方向为水平或竖直方向。 | +| direction | [Axis](ts-appendix-enums.md#axis枚举说明) | 否 | - | 设置滚动方向为水平或竖直方向。 | ### currentOffset -scroller.currentOffset(): Object +currentOffset(): Object 返回当前的滚动偏移量。 @@ -115,7 +130,7 @@ scroller.currentOffset(): Object ### scrollToIndex -scroller.scrollToIndex(value: number): void +scrollToIndex(value: number): void 滑动到指定Index。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md index b372976e717b88fdeceec526c44f1b5c928f615e..e0e7049397bf532ddc8a01efa00e94e016c593fa 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -40,10 +40,13 @@ Swiper(value:{controller?: SwiperController}) | duration | number | 400 | 子组件切换的动画时长，单位为毫秒。 | | vertical | boolean | false | 是否为纵向滑动。 | | itemSpace | Length | 0 | 设置子组件与子组件之间间隙。 | +| displayMode | SwiperDisplayMode | SwiperDisplayMode.Stretch | 设置子组件显示模式。 | | cachedCount8+ | number | 1 | 设置预加载子组件个数。 | | disableSwipe8+ | boolean | false | 禁用组件滑动切换功能。 | +| displayCount8+ | number \| string | 1 | 设置一页中显示子组件的个数，设置为“auto”时等同于SwiperDisplayMode.AutoLinear的显示效果。 | +| effectMode8+ | EdgeEffect | EdgeEffect.Spring | 设置滑动到边缘时的显示效果。 | | curve8+ | [Curve](ts-animatorproperty.md#Curve枚举说明) \| Curves | Curve.Ease | 设置Swiper的动画曲线，默认为淡入淡出曲线，常用曲线参考[Curve枚举说明](ts-animatorproperty.md#Curve枚举说明)，也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 | -| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
color?: Color,
selectedColor?: Color
} | - | 设置indicator样式：
- left: 设置导航点距离Swiper组件左边的距离。
- top: 设置导航点距离Swiper组件顶部的距离。
- right: 设置导航点距离Swiper组件右边的距离。
- bottom: 设置导航点距离Swiper组件底部的距离。
- size: 设置导航点的直径。
- color: 设置导航点的颜色。
- selectedColor: 设置选中的导航点的颜色。 | +| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
mask?: boolean,
color?: [ResourceColor](../../ui/ts-types.md),
selectedColor?: [ResourceColor](../../ui/ts-types.md)
} | - | 设置indicator样式：
- left: 设置导航点距离Swiper组件左边的距离。
- top: 设置导航点距离Swiper组件顶部的距离。
- right: 设置导航点距离Swiper组件右边的距离。
- bottom: 设置导航点距离Swiper组件底部的距离。
- size: 设置导航点的直径。
- mask: 设置是否显示导航点蒙层样式。
- color: 设置导航点的颜色。
- selectedColor: 设置选中的导航点的颜色。 | ## SwiperController @@ -52,15 +55,31 @@ Swiper容器组件的控制器，可以将此对象绑定至Swiper组件，然 | 接口名称 | 功能描述 | | ------------------- | ------ | -| showNext():void | 翻至下一页。 | -| showPrevious():void | 翻至上一页。 | +| showNext() | 翻至下一页。 | +| showPrevious() | 翻至上一页。 | +| finishAnimation(callback?: () => void) | 停止Swiper动画。 | + +## SwiperDisplayMode枚举说明 + +| 名称 | 描述 | +| ------ | ---------------------------------------- | +| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。 | +| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。 | + +## EdgeEffect枚举说明 + +| 名称 | 描述 | +| ------ | ---------------------------------------- | +| Spring | 弹性物理动效，滑动到边缘后可以根据初始速度或通过触摸事件继续滑动一段距离，松手后回弹。 | +| Fade | 阴影效果，滑动到边缘后会有圆弧状的阴影。 | +| None | 滑动到边缘后无效果。 | ## 事件 | 名称 | 功能描述 | | ---------------------------------------- | ------------------ | -| onChange( index: number) => void | 当前显示的组件索引变化时触发该事件。 | +| onChange(event: (index: number) => void) | 当前显示的子组件索引变化时触发该事件,返回值为当前显示的子组件的索引值。 | ## 示例 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md index 27be563ca2377757b948f64c753aac53d4c2fb02..7ebf78f71a0bd6e5d5014a2c537996e7b3899cf8 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabcontent.md @@ -28,7 +28,7 @@ TabContent() | 名称 | 参数类型 | 默认值 | 描述 | | ------ | ---------------------------------------- | ---- | ---------------------------------------- | -| tabBar | string \| {
icon?: string,
text?: string
}
\| [CustomBuilder](../../ui/ts-types.md)8+ | - | 设置TabBar上显示内容。
CustomBuilder: 构造器，内部可以传入组件（API8版本以上适用）。
>  **说明：**
> 如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 | +| tabBar | string \| Resource \| {
icon?: string \| Resource,
text?: string \| Resource
}
\| [CustomBuilder](../../ui/ts-types.md)8+ | - | 设置TabBar上显示内容。
CustomBuilder: 构造器，内部可以传入组件（API8版本以上适用）。
>  **说明：**
> 如果icon采用svg格式图源，则要求svg图源删除其自有宽高属性值。如采用带有自有宽高属性的svg图源，icon大小则是svg本身内置的宽高属性值大小。 | > **说明：** > - TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md index 6f09309688187492abfcec94156b3a3d9b9601ff..40cf0ea5d65f20b1bcfdb3a5c75aa4dd9beca029 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-container-tabs.md @@ -42,11 +42,11 @@ Tabs(value: {barPosition?: BarPosition, index?: number, controller?: [TabsContro | 名称 | 参数类型 | 默认值 | 描述 | | ----------------- | ------- | --------------------------- | ------------------------------- | -| vertical | boolean | 是否为纵向Tab，默认为false。 | 是否为纵向Tab，默认为false。 | -| scrollable | boolean | 是否可以通过左右滑动进行页面切换，默认为true。 | 是否可以通过左右滑动进行页面切换，默认为true。 | -| barMode | BarMode | TabBar布局模式。 | TabBar布局模式。 | -| barWidth | number | TabBar的宽度值，不设置时使用系统主题中的默认值。 | TabBar的宽度值，不设置时使用系统主题中的默认值。 | -| barHeight | number | TabBar的高度值，不设置时使用系统主题中的默认值。 | TabBar的高度值，不设置时使用系统主题中的默认值**。** | +| vertical | boolean | false | 设置为false是为横向Tabs，设置为true时为纵向Tabs。 | +| scrollable | boolean | true | 设置为true时可以通过滑动页面进行页面切换，为false时不可滑动切换页面。 | +| barMode | BarMode | BarMode.Fixed | TabBar布局模式，具体描述见BarMode枚举说明。 | +| barWidth | number \| string8+ | - | TabBar的宽度值。 | +| barHeight | number \| string8+ | - | TabBar的高度值。 | | animationDuration | number | 200 | TabContent滑动动画时长。 | ## BarMode枚举说明 diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md index 98663cb9bf0387b0cf266122cf76093e2c81eb50..9e45c53c9808509bf1e233640f4071cfb3a5723e 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-datepicker-dialog.md @@ -15,7 +15,7 @@ show(options?: DatePickerDialogOptions) 定义日期滑动选择器弹窗并弹出。 -- options参数 +- DatePickerDialogOptions参数说明 | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | | start | Date | 否 | Date('1970-1-1') | 指定选择器的起始日期。 | diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md b/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md index 21085f27e61f40bed7568fae682e820dad77cb9f..94cb1603b4f6efd9eec769a04b6aa27c80efbf2f 100644 --- a/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md +++ b/zh-cn/application-dev/reference/arkui-ts/ts-methods-textpicker-dialog.md @@ -19,7 +19,8 @@ show(options: TextPickerDialogOptions) | 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | -------- | -------- | -------- | -------- | -------- | | range | string[] | 是 | - | 选择器的数据选择范围。 | - | selected | number | 否 | 第一个元素 | 选中项在数组中的index值。 | + | selected | number | 否 | 0 | 选中项在数组中的index值。 | + | value | string | 否 | 第一个元素值 | 选中项的值，优先级低于selected。 | | defaultPickerItemHeight | number | 否 | - | 默认Picker内容项元素高度。 | | onAccept | (value: TextPickerResult) => void | 否 | - | 点击弹窗中确定按钮时触发。 | | onCancel | () => void | 否 | - | 点击弹窗中取消按钮时触发。 |