提交 78c7b070 编写于 作者: G gmy

update docs

Signed-off-by: Ngmy <guanmingyue@h-partners.com>
上级 980948ee
......@@ -25,9 +25,9 @@ LoadingProgress()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----- | ----- | ---- | ----------- |
| color | [ResourceColor](ts-types.md#resourcecolor8) | - | 设置加载进度条前景色。 |
| 名称 | 参数类型 | 描述 |
| ----- | ------------------------------------------- | ---------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor8) | 设置加载进度条前景色。 |
## 示例
......
......@@ -5,22 +5,17 @@
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 接口
LongPressGesture(options?: { fingers?: number, repeat?: boolean, duration?: number })
**参数:**
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | ------- | ---- | ----- | -------------------------------- |
| fingers | number | 否 | 1 | 触发长按的最少手指数,最小为1指,&nbsp;最大取值为10指。 |
| repeat | boolean | 否 | false | 是否连续触发事件回调。 |
| duration | number | 否 | 500 | 最小触发长按的时间,单位为毫秒(ms)。 |
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | ---- | ------------------------------------------------------------ |
| fingers | number | 否 | 触发长按的最少手指数,最小取值为1指,&nbsp;最大取值为10指。<br/>默认值:1 |
| repeat | boolean | 否 | 是否连续触发事件回调。<br/>默认值:false |
| duration | number | 否 | 触发长按的最小时间,单位为毫秒(ms)。<br/>默认值:500 |
## 事件
......
......@@ -6,10 +6,6 @@
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
......@@ -22,10 +18,10 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---------- | ------------------- | ---- | ---- | ---------- |
| arrayValue | Array&lt;string&gt; | 是 | - | 字母索引字符串数组。 |
| selected | number | 是 | - | 初始选中项索引值。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ------------------- | ---- | ---------- |
| arrayValue | Array&lt;string&gt; | 是 | 字母索引字符串数组。 |
| selected | number | 是 | 初始选中项索引值。 |
## 属性
......@@ -43,7 +39,7 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
| itemSize | string \| number | 设置字母索引条字母区域大小,字母区域为正方形,即正方形边长。 |
| alignStyle | IndexerAlign | 设置字母索引条弹框的对齐样式,支持弹窗显示在索引条右侧和左侧。<br/>默认值:IndexerAlign.Right |
| selected | number | 设置选中项索引值。 |
| popupPosition | {<br/>x?:[Length](ts-types.md#length)<br/>y?:[Length](ts-types.md#length)<br/>} | 设置弹出窗口相对于索引器条上边框中点的位置。 |
| popupPosition | [Position](../../ui/ts-types.md#position8) | 设置弹出窗口相对于索引器条上边框中点的位置。 |
## IndexerAlign枚举说明
......
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
包含[GridItem](ts-container-griditem.md)子组件。
......@@ -23,30 +18,30 @@ Grid(scroller?: Scroller)
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| --------- | ---------------------------------------- | ---- | --------------------------- | ----------------------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| --------- | ---------------------------------------- | ---- | ----------------------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------------------------------- | ------- | ----- | ---------------------------------------- |
| columnsTemplate | string | '1fr' | 用于设置当前网格布局列的数量,不设置时默认1列&nbsp;示例,&nbsp;'1fr&nbsp;1fr&nbsp;2fr'&nbsp;分三列,将父组件允许的宽分为4等份,第一列占1份,第二列占一份,第三列占2份。 |
| rowsTemplate | string | '1fr' | 用于设置当前网格布局行的数量,不设置时默认1行&nbsp;示例,&nbsp;'1fr&nbsp;1fr&nbsp;2fr'分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。 |
| columnsGap | Length | 0 | 用于设置列与列的间距。 |
| rowsGap | Length | 0 | 用于设置行与行的间距。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | BarState.Off | 设置滚动条状态。 |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Color](ts-appendix-enums.md#color) | - | 设置滚动条的颜色。 |
| scrollBarWidth | string&nbsp;\|&nbsp;number | - | 设置滚动条的宽度。 |
| cachedCount | number | 1 | 设置预加载的GridItem的数量。 |
| editMode <sup>8+</sup> | boolean | flase | 是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部[GridItem](ts-container-griditem.md) |
| layoutDirection<sup>8+</sup> | GridDirection | GridDirection.Row | 设置布局的主轴方向。 |
| maxCount<sup>8+</sup> | number | 1 | 当layoutDirection是Row/RowReverse时,表示可显示的最大行数<br/>当layoutDirection是Column/ColumnReverse时,表示可显示的最大列数。 |
| minCount<sup>8+</sup> | number | 1 | 当layoutDirection是Row/RowReverse时,表示可显示的最小行数。<br/>当layoutDirection是Column/ColumnReverse时,表示可显示的最小列数。 |
| cellLength<sup>8+</sup> | number | 0 | 当layoutDirection是Row/RowReverse时,表示一行的高度。<br/>当layoutDirection是Column/ColumnReverse时,表示一列的宽度。 |
| multiSelectable<sup>8+</sup> | boolean | false | 是否开启鼠标框选。<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。 |
| supportAnimation<sup>8+</sup> | boolean | false | 是否支持动画。 |
| 名称 | 参数类型 | 描述 |
| ---------------------------------------- | ------- | ---------------------------------------- |
| columnsTemplate | string | 设置当前网格布局列的数量,不设置时默认1列。<br/>例如,&nbsp;'1fr&nbsp;1fr&nbsp;2fr'&nbsp;是将父组件分3列,将父组件允许的宽分为4等份,第一列占1份,第二列占1份,第三列占2份。<br/>默认值:'1fr' |
| rowsTemplate | string | 设置当前网格布局行的数量,不设置时默认1行。<br/>例如,&nbsp;'1fr&nbsp;1fr&nbsp;2fr'是将父组件分三行,将父组件允许的高分为4等份,第一行占1份,第二行占一份,第三行占2份。<br/>默认值:'1fr' |
| columnsGap | Length | 设置列与列的间距。<br/>默认值:0 |
| rowsGap | Length | 设置行与行的间距。<br/>默认值:0 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值:BarState.Off |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Color](ts-appendix-enums.md#color) | 设置滚动条的颜色。 |
| scrollBarWidth | string&nbsp;\|&nbsp;number | 设置滚动条的宽度。 |
| cachedCount | number | 设置预加载的GridItem的数量。具体使用可参考[减少应用白块说明](../../ui/ts-performance-improvement-recommendation.md#减少应用滑动白块)<br/>默认值:1 |
| editMode <sup>8+</sup> | boolean | 是否进入编辑模式,进入编辑模式可以拖拽Grid组件内部[GridItem](ts-container-griditem.md)<br/>默认值:false |
| layoutDirection<sup>8+</sup> | GridDirection | 设置布局的主轴方向。<br/>默认值:GridDirection.Row |
| maxCount<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时,表示可显示的最大行数<br/>当layoutDirection是Column/ColumnReverse时,表示可显示的最大列数。<br/>默认值:1 |
| minCount<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时,表示可显示的最小行数。<br/>当layoutDirection是Column/ColumnReverse时,表示可显示的最小列数。<br/>默认值:1 |
| cellLength<sup>8+</sup> | number | 当layoutDirection是Row/RowReverse时,表示一行的高度。<br/>当layoutDirection是Column/ColumnReverse时,表示一列的宽度。<br/>默认值:0 |
| multiSelectable<sup>8+</sup> | boolean | 是否开启鼠标框选。<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。<br/>默认值:false |
| supportAnimation<sup>8+</sup> | boolean | 是否支持动画。<br/>默认值:false |
## GridDirection枚举说明<sup>8+</sup>
......@@ -59,14 +54,14 @@ Grid(scroller?: Scroller)
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ----------------------- |
| 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为是否成功释放。 |
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onScrollIndex(event: (first: number) => void) | 当前网格显示的起始位置item发生变化时触发。<br/>- first: 当前显示的网格起始位置的索引值。 |
| onItemDragStart(event: (event: ItemDragInfo, itemIndex: number) => (() => any) \| void) | 开始拖拽网格元素时触发<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)<br/>- itemIndex: 被拖拽网格元素索引值。 |
| onItemDragEnter(event: (event: ItemDragInfo) => void) | 拖拽进入网格元素范围内时触发。<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)。 |
| onItemDragMove(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number) => void) | 拖拽在网格元素范围内移动时触发<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)<br/>- itemIndex: 拖拽起始位置。<br/>- insertIndex: 拖拽插入位置。 |
| onItemDragLeave(event: (event: ItemDragInfo, itemIndex: number) => void) | 拖拽离开网格元素时触发<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)<br/>- itemIndex: 拖拽离开的网格元素索引值。 |
| onItemDrop(event: (event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => void) | 绑定该事件的网格元素可作为拖拽释放目标,当在网格元素内停止拖拽时触发<br/>- event: 见[ItemDragInfo对象说明](#itemdraginfo对象说明)<br/>- itemIndex: 拖拽起始位置。<br/>- insertIndex: 拖拽插入位置。<br/>- isSuccess: 是否成功释放。 |
## ItemDragInfo对象说明
......
# GridContainer
> **说明:**
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
纵向排布栅格布局容器,仅在栅格布局场景中使用。
## 权限列表
> **说明:**
>
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 子组件
......@@ -19,16 +14,16 @@
## 接口
GridContainer(options?: { columns?: number | auto, sizeType?: SizeType, gutter?: string|number, margin?: string|number})
GridContainer(value?: { columns?: number | auto, sizeType?: SizeType, gutter?: string|number, margin?: string|number})
**参数:**
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
| -------- | ------------------------ | ---- | ------------- | -------------------- |
| columns | number&nbsp;\|&nbsp;auto | 否 | auto | 设置当前布局总列数。 |
| sizeType | SizeType | 否 | SizeType.Auto | 选用设备宽度类型。 |
| gutter | Length | 否 | - | 栅格布局列间距。 |
| margin | Length | 否 | - | 栅格布局两侧间距。 |
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ------------------------ | ---- | -------------------------------------------- |
| columns | number&nbsp;\|&nbsp;auto | 否 | 设置当前布局总列数。<br/>默认值:auto |
| sizeType | SizeType | 否 | 选用设备宽度类型。<br/>默认值:SizeType.Auto |
| gutter | Length | 否 | 栅格布局列间距。 |
| margin | Length | 否 | 栅格布局两侧间距。 |
## SizeType枚举说明
......
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
可以包含子组件。
......@@ -24,21 +19,21 @@ GridItem()
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ------- | ----- | ---------------------------------------- |
| rowStart | number | - | 用于指定当前元素起始行号。 |
| rowEnd | number | - | 用于指定当前元素终点行号。 |
| columnStart | number | - | 用于指定当前元素起始列号。 |
| columnEnd | number | - | 用于指定当前元素终点列号。 |
| forceRebuild | boolean | false | 用于设置在触发组件build时是否重新创建此节点。 |
| selectable<sup>8+</sup> | boolean | true | 当前GridItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;外层Grid容器的鼠标框选开启时,GridItem的框选才生效。 |
| 名称 | 参数类型 | 描述 |
| ----------------------- | -------- | ------------------------------------------------------------ |
| rowStart | number | 指定当前元素起始行号。 |
| rowEnd | number | 指定当前元素终点行号。 |
| columnStart | number | 指定当前元素起始列号。 |
| columnEnd | number | 指定当前元素终点列号。 |
| forceRebuild | boolean | 设置在触发组件build时是否重新创建此节点。<br/>默认值:false |
| selectable<sup>8+</sup> | boolean | 当前GridItem元素是否可以被鼠标框选。<br/>默认值:true<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;外层Grid容器的鼠标框选开启时,GridItem的框选才生效。 |
## 事件
| 名称 | 功能描述 |
| ---------------------------------------- | ---------------------------------------- |
| onSelect(callback:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected:进入鼠标框选范围即被选中返回true,&nbsp;移出鼠标框选范围即未被选中返回false。 |
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onSelect(event:&nbsp;(isSelected:&nbsp;boolean)&nbsp;=&gt;&nbsp;void)<sup>8+</sup> | GridItem元素被鼠标框选的状态改变时触发回调。<br/>isSelected:进入鼠标框选范围即被选中,返回true;移出鼠标框选范围即未被选中,返回false。。 |
## 示例
......
......@@ -9,11 +9,6 @@
> - 该组件回弹的前提是要有滚动。内容小于一屏时,没有回弹效果。
## 权限列表
## 子组件
包含[ListItem](ts-container-listitem.md)子组件。
......@@ -25,24 +20,24 @@ List(value?:{space?: number | string, initialIndex?: number, scroller?: Scroller
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------------ | ------ | ---- | ---- | ---------------------------------------- |
| space | number&nbsp;\|&nbsp;string | 否 | 0 | 列表项间距。 |
| initialIndex | number | 否 | 0 | 设置当前List初次加载时视口起始位置显示的item,即显示第一个item,如设置的序号超过了最后一个item的序号,则设置不生效。 |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | - | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------------ | ------ | ---- | ---------------------------------------- |
| space | number&nbsp;\|&nbsp;string | 否 | 列表项间距。<br/>默认值:0 |
| initialIndex | number | 否 | 设置当前List初次加载时视口起始位置显示的item的索引值。如果设置的值超过了当前List最后一个item的索引值,则设置不生效。<br/>默认值:0 |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 否 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------------------------- | ---------------------------------------- | ----------------- | ---------------------------------------- |
| listDirection | [Axis](ts-appendix-enums.md#axis) | Vertical | 设置List组件排列方向参照Axis枚举说明。 |
| divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?: [ResourceColor](ts-types.md#resourcecolor8),<br/>startMargin?:&nbsp;[Length](ts-types.md#length),<br/>endMargin?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;null | - | 用于设置ListItem分割线样式,默认无分割线。<br/>strokeWidth:&nbsp;分割线的线宽。<br/>color:&nbsp;分割线的颜色。<br/>startMargin:&nbsp;分割线距离列表侧边起始端的距离。<br/>endMargin:&nbsp;分割线距离列表侧边结束端的距离。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | BarState.Off | 设置滚动条状态。 |
| cachedCount | number | 1 | 设置预加载的ListItem的数量。 |
| editMode | boolean | false | 声明当前List组件是否处于可编辑模式。 |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | EdgeEffect.Spring | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。 |
| chainAnimation | boolean | false | 用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。<br/>-&nbsp;false:不启用链式联动。<br/>-&nbsp;true:启用链式联动。 |
| multiSelectable<sup>8+</sup> | boolean | false | 是否开启鼠标框选。<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。 |
| 名称 | 参数类型 | 描述 |
| ---------------------------- | ---------------------------------------- | ---------------------------------------- |
| listDirection | [Axis](ts-appendix-enums.md#axis) | 设置List组件排列方向参照Axis枚举说明。<br/>默认值:Vertical |
| divider | {<br/>strokeWidth:&nbsp;[Length](ts-types.md#length),<br/>color?: [ResourceColor](ts-types.md#resourcecolor8),<br/>startMargin?:&nbsp;[Length](ts-types.md#length),<br/>endMargin?:&nbsp;[Length](ts-types.md#length)<br/>}&nbsp;\|&nbsp;null | 用于设置ListItem分割线样式,默认无分割线。<br/>strokeWidth:&nbsp;分割线的线宽。<br/>color:&nbsp;分割线的颜色。<br/>startMargin:&nbsp;分割线与列表侧边起始端的距离。<br/>endMargin:&nbsp;分割线与列表侧边结束端的距离。 |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滚动条状态。<br/>默认值:BarState.Off |
| cachedCount | number | 设置预加载的ListItem的数量。具体使用可参考[减少应用白块说明](../../ui/ts-performance-improvement-recommendation.md#减少应用滑动白块)<br/>默认值:1 |
| editMode | boolean | 声明当前List组件是否处于可编辑模式。<br/>默认值:false |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 滑动效果,目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值:EdgeEffect.Spring |
| chainAnimation | boolean | 用于设置当前list是否启用链式联动动效,开启后列表滑动以及顶部和底部拖拽时会有链式联动的效果。链式联动效果:list内的list-item间隔一定距离,在基本的滑动交互行为下,主动对象驱动从动对象进行联动,驱动效果遵循弹簧物理动效。<br/>-&nbsp;false:不启用链式联动。<br/>-&nbsp;true:启用链式联动。<br/>默认值:false |
| multiSelectable<sup>8+</sup> | boolean | 是否开启鼠标框选。<br/>>默认值:false<br/>-&nbsp;false:关闭框选。<br/>-&nbsp;true:开启框选。 |
## 事件
......
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
可以包含单个子组件。
......@@ -19,16 +14,16 @@
## 接口
ListItem()
ListItem(value?: string)
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ----------------------- | ------- | ----------- | ---------------------------------------- |
| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果,参见Sticky枚举描述。 |
| editable | boolean&nbsp;\|&nbsp;EditMode | false | 当前ListItem元素是否可编辑,进入编辑模式后可删除或移动。 |
| selectable<sup>8+</sup> | boolean | true | 当前ListItem元素是否可以被鼠标框选。<br/>>&nbsp;&nbsp;**说明:**<br/>>&nbsp;外层List容器的鼠标框选开启时,ListItem的框选才生效。 |
| sticky | Sticky | Sticky.None | 设置ListItem吸顶效果,参见Sticky枚举描述。<br/>默认值:Sticky.None |
| editable | boolean&nbsp;\|&nbsp;EditMode | false | 当前ListItem元素是否可编辑,进入编辑模式后可删除或移动。<br/>默认值:false |
| selectable<sup>8+</sup> | boolean | true | 当前ListItem元素是否可以被鼠标框选。<br/>默认值:true<br/>**说明:**<br/>外层List容器的鼠标框选开启时,ListItem的框选才生效。 |
## Sticky枚举说明
......
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
可以包含子组件。
......@@ -25,10 +20,10 @@ Navigator(value?: {target: string, type?: NavigationType})
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ------ | -------------- | ---- | ------------------- | ------------ |
| target | string | 是 | - | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | NavigationType.Push | 指定路由方式。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------------- | ---- | ---------------------------------------------- |
| target | string | 是 | 指定跳转目标页面的路径。 |
| type | NavigationType | 否 | 指定路由方式。<br/>默认值:NavigationType.Push |
## NavigationType枚举说明
......@@ -40,10 +35,10 @@ Navigator(value?: {target: string, type?: NavigationType})
## 属性
| 名称 | 参数 | 默认值 | 描述 |
| ------ | ------- | --------- | ------------------------------------------------------------ |
| active | boolean | - | 当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作。 |
| params | object | undefined | 跳转时要同时传递到目标页面的数据,可在目标页面使用router.getParams()获得。 |
| 名称 | 参数 | 描述 |
| ------ | ------- | ------------------------------------------------------------ |
| active | boolean | 当前路由组件是否处于激活状态,处于激活状态时,会生效相应的路由操作。 |
| params | object | 跳转时要同时传递到目标页面的数据,可在目标页面使用router.getParams()获得。 |
## 示例
......
......@@ -7,11 +7,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
可以包含子组件。
......@@ -19,24 +14,24 @@
## 接口
Panel(showboolean)
Panel(show: boolean)
**参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 |
| ---- | ------- | ---- | ---- | ------------- |
| show | boolean | 是 | - | 控制Panel显示或隐藏。 |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | -------- | ---- | --------------------- |
| show | boolean | 是 | 控制Panel显示或隐藏。 |
## 属性
| 名称 | 参数类型 | 默认值 | 描述 |
| ---------- | -------------- | ------------------ | ------------------------------------------------------ |
| type | PanelType | PanelType.Foldable | 设置可滑动面板的类型。 |
| mode | PanelMode | - | 设置可滑动面板的初始状态。 |
| dragBar | boolean | true | 设置是否存在dragbar,true表示存在,false表示不存在。 |
| fullHeight | number\|string | - | 指定PanelMode.Full状态下的高度。 |
| halfHeight | number\|string | - | 指定PanelMode.Half状态下的高度,默认为屏幕尺寸的一半。 |
| miniHeight | number\|string | - | 指定PanelMode.Mini状态下的高度。 |
| 名称 | 参数类型 | 描述 |
| ---------- | -------------- | ------------------------------------------------------------ |
| type | PanelType | 设置可滑动面板的类型。<br/>默认值:PanelType.Foldable |
| mode | PanelMode | 设置可滑动面板的初始状态。 |
| dragBar | boolean | 设置是否存在dragbar,true表示存在,false表示不存在。<br/>默认值:true |
| fullHeight | number\|string | 指定PanelMode.Full状态下的高度。 |
| halfHeight | number\|string | 指定PanelMode.Half状态下的高度,默认为屏幕尺寸的一半。 |
| miniHeight | number\|string | 指定PanelMode.Mini状态下的高度。 |
## PanelType枚举说明
......
......@@ -6,13 +6,6 @@
> 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表
## 子组件
可以包含子组件。
......@@ -24,46 +17,38 @@ Swiper(value?:{controller?: SwiperController})
**参数:**
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ------------------------------------- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | 给组件绑定一个控制器,用来控制组件翻页。<br/>默认值:null |
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ---------- | ------------------------------------- | ---- | -------------------- |
| controller | [SwiperController](#swipercontroller) | 否 | 给组件绑定一个控制器,用来控制组件翻页。 |
## 属性
不支持[Menu控制](ts-universal-attributes-menu.md)
| 名称 | 参数类型 | 默认值 | 描述 |
| --------------------------- | ---------------------------------------- | ---------- | ---------------------------------------- |
| index | number | 0 | 设置当前在容器中显示的子组件的索引值。 |
| autoPlay | boolean | false | 子组件是否自动播放,自动播放状态下,导航点不可操作。 |
| interval | number | 3000 | 使用自动播放时播放的时间间隔,单位为毫秒。 |
| indicator | boolean | true | 是否启用导航点指示器。 |
| loop | boolean | true | 是否开启循环。<br> 设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。 |
| duration | number | 400 | 子组件切换的动画时长,单位为毫秒。 |
| vertical | boolean | false | 是否为纵向滑动。 |
| itemSpace | number \| string | 0 | 设置子组件与子组件之间间隙。 |
| displayMode | SwiperDisplayMode | SwiperDisplayMode.Stretch | 设置子组件显示模式。 |
| cachedCount<sup>8+</sup> | number | 1 | 设置预加载子组件个数。 |
| disableSwipe<sup>8+</sup> | boolean | false | 禁用组件滑动切换功能。 |
| displayCount<sup>8+</sup> | number&nbsp;\|&nbsp;string | 1 | 设置一页中显示子组件的个数,设置为“auto”时等同于SwiperDisplayMode.AutoLinear的显示效果。 |
| effectMode<sup>8+</sup> | EdgeEffect | EdgeEffect.Spring | 设置滑动到边缘时的显示效果。 |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Curve.Ease | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve),也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。 |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;[Length](ts-types.md#length),<br/>top?:&nbsp;[Length](ts-types.md#length),<br/>right?:&nbsp;[Length](ts-types.md#length),<br/>bottom?:&nbsp;[Length](ts-types.md#length),<br/>size?:&nbsp;[Length](ts-types.md#length),<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8),<br/>selectedColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | - | 设置indicator样式:<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;mask:&nbsp;设置是否显示导航点蒙层样式。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
| 名称 | 参数类型 | 描述 |
| --------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | 设置当前在容器中显示的子组件的索引值。<br/>默认值:0 |
| autoPlay | boolean | 子组件是否自动播放,自动播放状态下,导航点不可操作。<br/>默认值:false |
| interval | number | 使用自动播放时播放的时间间隔,单位为毫秒。<br/>默认值:3000 |
| indicator | boolean | 是否启用导航点指示器。<br/>默认值:true |
| loop | boolean | 是否开启循环。<br>设置为true时表示开启循环,在LazyForEach懒循环加载模式下,加载的组件数量建议大于5个。<br/>默认值:true |
| duration | number | 子组件切换的动画时长,单位为毫秒。<br/>默认值:400 |
| vertical | boolean | 是否为纵向滑动。<br/>默认值:false |
| itemSpace | number \| string | 设置子组件与子组件之间间隙。<br/>默认值:0 |
| displayMode | SwiperDisplayMode | 设置子组件显示模式。<br/>默认值:SwiperDisplayMode.Stretch |
| cachedCount<sup>8+</sup> | number | 设置预加载子组件个数。<br/>默认值:1 |
| disableSwipe<sup>8+</sup> | boolean | 禁用组件滑动切换功能。<br/>默认值:false |
| displayCount<sup>8+</sup> | number&nbsp;\|&nbsp;string | 设置一页中显示子组件的个数,设置为“auto”时等同于SwiperDisplayMode.AutoLinear的显示效果。<br/>默认值:1 |
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动到边缘时的显示效果。<br/>默认值:EdgeEffect.Spring |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | 设置Swiper的动画曲线,默认为淡入淡出曲线,常用曲线参考[Curve枚举说明](ts-appendix-enums.md#curve),也可以通过插值计算模块提供的接口创建自定义的Curves([插值曲线对象](ts-interpolation-calculation.md))。<br/>默认值:Curve.Ease |
| indicatorStyle<sup>8+</sup> | {<br/>left?:&nbsp;[Length](ts-types.md#length),<br/>top?:&nbsp;[Length](ts-types.md#length),<br/>right?:&nbsp;[Length](ts-types.md#length),<br/>bottom?:&nbsp;[Length](ts-types.md#length),<br/>size?:&nbsp;[Length](ts-types.md#length),<br/>mask?:&nbsp;boolean,<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8),<br/>selectedColor?:&nbsp;[ResourceColor](ts-types.md#resourcecolor8)<br/>} | 设置indicator样式:<br/>-&nbsp;left:&nbsp;设置导航点距离Swiper组件左边的距离。<br/>-&nbsp;top:&nbsp;设置导航点距离Swiper组件顶部的距离。<br/>-&nbsp;right:&nbsp;设置导航点距离Swiper组件右边的距离。<br/>-&nbsp;bottom:&nbsp;设置导航点距离Swiper组件底部的距离。<br/>-&nbsp;size:&nbsp;设置导航点的直径。<br/>-&nbsp;mask:&nbsp;设置是否显示导航点蒙层样式。<br/>-&nbsp;color:&nbsp;设置导航点的颜色。<br/>-&nbsp;selectedColor:&nbsp;设置选中的导航点的颜色。 |
## SwiperDisplayMode枚举说明
| 名称 | 描述 |
| ----------- | ------------------------------------------ |
| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。|
| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。|
## EdgeEffect枚举说明
| 名称 | 描述 |
| ------ | ------------------------------------------------------------------------- |
| Spring | 弹性物理动效,滑动到边缘后可以通过触摸事件继续滑动一段距离,松手后回弹。 |
| Fade | 滑动到边缘后,可以通过触摸事件继续滑动一段阴影,松手后阴影回弹。 |
| None | 滑动到边缘后无效果。 |
| 名称 | 描述 |
| ----------- | ------------------------------------------ |
| Stretch | Swiper滑动一页的宽度为Swiper组件自身的宽度。|
| AutoLinear | Swiper滑动一页的宽度为子组件宽度中的最大值。|
## SwiperController
......@@ -97,7 +82,7 @@ finishAnimation(callback?: () => void): void
### onChange
onChange(&nbsp;index:&nbsp;number)&nbsp;=&gt;&nbsp;void
onChange(event: (index: number) => void)
当前显示的组件索引变化时触发该事件。
......
# 页面间转场
> **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
页面转场通过在全局pageTransition方法内配置页面入场组件和页面退场组件来自定义页面转场动效。
| 名称 | 参数 | 参数描述 |
| -------- | -------- | -------- |
| PageTransitionEnter | Object | 页面入场组件,用于自定义当前页面的入场效果,详见动效参数说明。 |
| PageTransitionExit | Object | 页面退场组件,用于自定义当前页面的退场效果,详见动效参数说明。 |
在全局pageTransition方法内配置页面入场和页面退场时的自定义转场动效。
> **说明:**
>
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
- 动效参数说明
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| type | RouteType | - | 否 | 不配置时表明pop为push时效果的逆播。 |
| duration | number | 1000 | 否 | 动画时长,单位为毫秒。 |
| curve | Curve&nbsp;\|&nbsp;Curves | Linear | 否 | 动画曲线,有效值参见[Curve](ts-animatorproperty.md)&nbsp;说明。 |
| delay | number | 0 | 否 | 动画延迟时长,单位为毫秒,默认不延时播放。 |
| 名称 | 参数 | 参数描述 |
| ------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| PageTransitionEnter | { <br/>type?: RouteType,<br/>duration?: number,<br/> curve?: Curve \| string,<br/> delay?:number <br/>} | 设置当前页面的自定义入场动效。<br/>-&nbsp;type:不配置时表明pop为push时效果的逆播。<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,有效值参见[Curve](ts-animatorproperty.md)&nbsp;<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
| PageTransitionExit | {<br/>type?: RouteType,<br/>duration?: number,<br/>curve?: Curve&nbsp;\|&nbsp;string,<br/>delay?: number<br/>} | 设置当前页面的自定义退场动效。<br/>-&nbsp;type:不配置时表明pop为push时效果的逆播<br/>-&nbsp;duration:动画的时长,单位为毫秒。<br/>-&nbsp;curve:动画曲线,有效值参见[Curve](ts-animatorproperty.md)&nbsp;<br/>&nbsp;默认值:Curve.Linear<br/>-&nbsp;delay:动画延迟时长,单位为毫秒,默认不延迟播放。 |
## RouteType枚举说明
- RouteType枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Pop | 重定向指定页面。PageA跳转到PageB时,PageA为Exit+Push,PageB为Enter+Push。 |
| Push | 跳转到下一页面。PageB返回至PageA时,PageA为Enter+Pop,PageB为Exit+Pop。 |
| 名称 | 描述 |
| -------- | -------- |
| Pop | 重定向指定页面。PageA跳转到PageB时,PageA为Exit+Push,PageB为Enter+Push。 |
| Push | 跳转到下一页面。PageB返回至PageA时,PageA为Enter+Pop,PageB为Exit+Pop。 |
| None | 页面未重定向。 |
## 属性
PageTransitionEnter和PageTransitionExit组件支持的属性:
| 参数名称 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| slide | SlideEffect | 否 | 设置页面转场时的滑入滑出效果。<br/>默认值:SlideEffect.Right |
| translate | {<br/>x?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>y?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>z?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置页面转场时的平移效果,为入场时起点和退场时终点的值,和slide同时设置时默认生效slide。<br/>-&nbsp;x:横向的平移距离。<br/>-&nbsp;y:纵向的平移距离。<br/>-&nbsp;z:竖向的平移距离。 |
| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string,<br/>centerY?&nbsp;:&nbsp;number&nbsp;\|&nbsp;string<br/>} | 否 | 设置页面转场时的缩放效果,为入场时起点和退场时终点的值。<br/>-&nbsp;x:横向放大倍数(或缩小比例)。<br/>-&nbsp;y:纵向放大倍数(或缩小比例)。<br/>-&nbsp;z:竖向放大倍数(或缩小比例)。<br/>-&nbsp;centerX、centerY缩放中心点。<br/>-&nbsp;中心点为0时,默认的是组件的左上角。 |
| opacity | number | 否 | 设置入场的起点透明度值或者退场的终点透明度值。<br/>默认值:1 |
| 参数名称 | 参数类型 | 默认值 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- |
| slide | SlideEffect | SlideEffect.Right | 否 | 设置转场的滑入效果,有效值参见SlideEffect枚举说明。 |
| translate | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置页面转场时的平移效果,为入场时起点和退场时终点的值,和slide同时设置时默认生效slide。 |
| scale | {<br/>x?&nbsp;:&nbsp;number,<br/>y?&nbsp;:&nbsp;number,<br/>z?&nbsp;:&nbsp;number,<br/>centerX?&nbsp;:&nbsp;number,<br/>centerY?&nbsp;:&nbsp;number<br/>} | - | 否 | 设置页面转场时的缩放效果,为入场时起点和退场时终点的值。 |
| opacity | number | 1 | 否 | 设置入场的起点透明度值或者退场的终点透明度值。 |
## SlideEffect枚举说明
- SlideEffect枚举说明
| 名称 | 描述 |
| -------- | -------- |
| Left | 设置到入场时表示从左边滑入,出场时表示滑出到左边。 |
| Right | 设置到入场时表示从右边滑入,出场时表示滑出到右边。 |
| Top | 设置到入场时表示从上边滑入,出场时表示滑出到上边。 |
| Bottom | 设置到入场时表示从下边滑入,出场时表示滑出到下边。 |
| 名称 | 描述 |
| -------- | -------- |
| Left | 设置到入场时表示从左边滑入,出场时表示滑出到左边。 |
| Right | 设置到入场时表示从右边滑入,出场时表示滑出到右边。 |
| Top | 设置到入场时表示从上边滑入,出场时表示滑出到上边。 |
| Bottom | 设置到入场时表示从下边滑入,出场时表示滑出到下边。 |
## 事件
PageTransitionEnter和PageTransitionExit组件支持的事件:
| 事件 | 功能描述 |
| -------- | -------- |
| onEnter(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
| onExit(type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。 |
| onEnter(event: (type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 回调入参为当前入场动画的归一化进度[0&nbsp;-&nbsp;1]。<br/>-&nbsp;type:跳转方法。<br/>-&nbsp;progress:当前进度。 |
| onExit(event: (type:&nbsp;RouteType,&nbsp;progress:&nbsp;number)&nbsp;=&gt;&nbsp;void) | 回调入参为当前退场动画的归一化进度[0&nbsp;-&nbsp;1]。<br/>-&nbsp;type:跳转方法。<br/>-&nbsp;progress:当前进度。 |
## 示例
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册