提交 cb6303d4 编写于 作者: Y yamila

update list

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 5e8c6fe3
......@@ -256,7 +256,7 @@ struct MyComponent {
this.data.pushData('/path/image' + this.data.totalCount() + '.png')
})
}, item => item)
}
}.height('100%').width('100%')
}
}
```
......
......@@ -573,7 +573,7 @@ router.getParams();
| 名称 | 说明 |
| -------- | ------------------------------------------------------------ |
| Standard | 标准模式。 <br/>目标页面会被添加到页面路由栈顶,无论栈中是否存在相同url的页面。<br/>**说明:**不使用路由跳转模式时,按标准模式跳转。 |
| Standard | 标准模式。 <br/>目标页面会被添加到页面路由栈顶,无论栈中是否存在相同url的页面。<br/>**说明:** 不使用路由跳转模式时,按标准模式跳转。 |
| Single | 单实例模式。<br/>如果目标页面的url在页面栈中已经存在同url页面,离栈顶最近的页面会被移动到栈顶,移动后的页面为新建页。<br/>如目标页面的url在页面栈中不存在同url页面,按标准模式跳转。 |
## 完整示例
......
......@@ -58,8 +58,8 @@
| Normal | 普通按钮(默认不带圆角)。 |
> **说明:**
> - 按钮圆角通过[通用属性borderRadius](ts-universal-attributes-border.md)设置(不支持通过border接口设置圆角),且只支持设置一个相同的圆角。
> - 当按钮类型为Capsule时,borderRadius设置不生效,按钮圆角始终为高度的一半。
> - 按钮圆角通过[通用属性borderRadius](ts-universal-attributes-border.md)设置(不支持通过border接口设置圆角),且只支持设置参数为[Length](ts-types.md#length)的圆角。
> - 当按钮类型为Capsule时,borderRadius设置不生效,按钮圆角始终为宽、高中较小值的一半。
> - 当按钮类型为Circle时,borderRadius即为按钮半径,若未设置borderRadius按钮半径则为宽、高中较小值的一半。
> - 按钮文本通过[通用文本样式](ts-universal-attributes-text-style.md)进行设置。
......
......@@ -32,9 +32,9 @@ DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 类型 | 描述 | |
| ----------- | ------- | -------------------------------------------- | ---- |
| closeEffect | boolean | 关闭数据占比图表旋转动效。<br/>默认值:false | |
| 名称 | 类型 | 描述 |
| ----------- | ------- | -------------------------------------------- |
| closeEffect | boolean | 关闭数据占比图表旋转动效。<br/>默认值:false |
......
......@@ -26,15 +26,10 @@ Divider()
| ----------- | ---------- | ------------------ |
| vertical | boolean | 使用水平分割线还是垂直分割线。false:水平分割线;true:垂直分割线。<br/>默认值:false<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| color | [ResourceColor](ts-types.md#resourcecolor) | 分割线颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 分割线宽度。<br/>默认值:1<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| strokeWidth | number&nbsp;\|&nbsp;string | 分割线宽度。<br/>默认值:1<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br>分割线的宽度不支持百分比设置。 |
| lineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 分割线的端点样式。<br/>默认值:LineCapStyle.Butt<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
## 事件
不支持通用事件。
## 示例
```ts
......
......@@ -83,7 +83,7 @@ Image(src: string | PixelMap | Resource)
| 名称 | 功能描述 |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,<br>&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片成功加载时触发该回调,返回成功加载的图片尺寸。<br>- width:图片的宽,单位为像素。<br/>- height:图片的高,单位为像素。<br/>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/>- loadingStatus:图片加载成功的状态。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onComplete(callback:&nbsp;(event?:&nbsp;{&nbsp;width:&nbsp;number,&nbsp;height:&nbsp;number,&nbsp;componentWidth:&nbsp;number,<br>&nbsp;componentHeight:&nbsp;number,&nbsp;loadingStatus:&nbsp;number&nbsp;})&nbsp;=&gt;&nbsp;void) | 图片成功加载时触发该回调,返回成功加载的图片尺寸。<br>- width:图片的宽,单位为像素。<br/>- height:图片的高,单位为像素。<br/>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/>- loadingStatus:图片加载成功的状态。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>loadingStatus返回的状态值为0时,代表图片加载失败;返回的状态值为1时,代表图片加载成功。 |
| onError(callback:&nbsp;(event?:&nbsp;{&nbsp;componentWidth:&nbsp;number,&nbsp;componentHeight:&nbsp;number&nbsp;, message<sup>9+</sup>: string })&nbsp;=&gt;&nbsp;void) | 图片加载出现异常时触发该回调。<br>- componentWidth:组件的宽,单位为像素。<br/>- componentHeight:组件的高,单位为像素。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onFinish(event:&nbsp;()&nbsp;=&gt;&nbsp;void) | 当加载的源文件为带动效的svg图片时,当svg动效播放完成时会触发这个回调,如果动效为无限循环动效,则不会触发这个回调。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
......
......@@ -32,7 +32,7 @@ Rating(options?: { rating: number, indicator?: boolean })
| -------- | -------- | -------- |
| stars | number | 设置评星总数。<br/>默认值:5 <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。|
| stepSize | number | 操作评级的步长。<br/>默认值:0.5 <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。|
| starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | backgroundUri:未选中的星级的图片链接,可由用户自定义或使用系统默认图片,仅支持本地图片。<br/>foregroundUri:选中的星级的图片路径,可由用户自定义或使用系统默认图片,仅支持本地图片。<br/>secondaryUir:部分选中的星级的图片路径,可由用户自定义或使用系统默认图片,仅支持本地图片。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| starStyle | {<br/>backgroundUri:&nbsp;string,<br/>foregroundUri:&nbsp;string,<br/>secondaryUri?:&nbsp;string<br/>} | backgroundUri:未选中的星级的图片链接,可由用户自定义或使用系统默认图片<br/>foregroundUri:选中的星级的图片路径,可由用户自定义或使用系统默认图片。<br/>secondaryUir:部分选中的星级的图片路径,可由用户自定义或使用系统默认图片。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>startStyle属性所支持的图片类型能力参考[Image](ts-basic-components-image.md)组件。<br/>支持加载本地图片和网络图片,暂不支持PixelMap类型和Resource资源。<br/>默认图片加载方式为异步,暂不支持同步加载。 |
## 事件
......
......@@ -50,7 +50,7 @@ RichText(content:string)
| \<u>\</u> | 定义与常规文本风格不同的文本,像拼写错误的单词或者汉语中的专有名词,应尽量避免使用\<u>为文本加下划线,用户会把它混淆为一个超链接。 | \<p>\<u>这是带有下划线的段落\</u>\</p> |
| \<style>\</style> | 定义HTML文档的样式信息。 | \<style>h1{color:red;}p{color:blue;}\</style> |
| style | 属性规定元素的行内样式,写在标签内部,在使用的时候需用引号来进行区分,并以; 间隔样式,style='width: 500px;height: 500px;border: 1px soild;margin: 0 auto;'。 | \<h1 style='color:blue;text-align:center'>这是一个标题\</h1>\<p style='color:green'>这是一个段落。\</p> |
| \<script>\</script> | 用于定义客户端本,比如JavaScript。 | \<script>document.write("Hello World!")\</script> |
| \<script>\</script> | 用于定义客户端本,比如JavaScript。 | \<script>document.write("Hello World!")\</script> |
## 示例
......
......@@ -50,7 +50,7 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
| trackColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的背景颜色。 <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。|
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | 设置滑轨的已滑动部分颜色。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| showSteps | boolean | 设置当前是否显示步长刻度值。<br/>默认值:false <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。|
| showTips | boolean | 设置滑动时是否显示百分比气泡提示。<br/>默认值:false <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。|
| showTips | boolean | 设置滑动时是否显示百分比气泡提示。<br/>默认值:false <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>当direction的属性值为Axis.Horizontal时,tip显示在滑块正上方。值为Axis.Vertical时,tip显示在滑块正左边。<br/>tip的绘制区域为Slider自身节点的overlay。<br/>Slider不设置边距,或者边距比较小时,tip会被截断。 |
| trackThickness | [Length](ts-types.md#length) | 设置滑轨的粗细。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
......@@ -60,7 +60,7 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
| 名称 | 功能描述 |
| -------- | -------- |
| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider滑动时触发事件回调。<br/>value:当前滑动进度值。若返回值有小数,可使用Math.toFixed()方法将数据处理为预期的精度。<br/>mode:拖动状态。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。|
| onChange(callback:&nbsp;(value:&nbsp;number,&nbsp;mode:&nbsp;SliderChangeMode)&nbsp;=&gt;&nbsp;void) | Slider拖到或点击时触发事件回调。<br/>value:当前滑动进度值。若返回值有小数,可使用Math.toFixed()方法将数据处理为预期的精度。<br/>mode:事件触发的相关状态值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>Begin和End状态当手势点击时都会触发,Moving和Click状态当value值发生变换时触发。<br/>当连贯动作为拖动动作时,不触发Click状态。<br/>value值的变化范围为对应步长steps数组。 |
## SliderChangeMode枚举说明
......@@ -68,9 +68,9 @@ Slider(options?: {value?: number, min?: number, max?: number, step?: number, sty
| 名称 | 值 | 描述 |
| -------- | -------- | -------- |
| Begin | 0 | 开始拖动滑块。 |
| Begin | 0 | 手势/鼠标接触或者按下滑块。 |
| Moving | 1 | 正在拖动滑块过程中。 |
| End | 2 | 结束拖动滑块。 |
| End | 2 | 手势/鼠标离开滑块。 |
| Click | 3 | 点击滑动条使滑块位置移动。 |
......
......@@ -38,6 +38,10 @@ TextArea(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Tex
| inputFilter<sup>8+</sup> | {<br/>value:&nbsp;[ResourceStr](ts-types.md#resourcestr),<br/>error?:&nbsp;(value:&nbsp;string) => void<br/>} | 通过正则表达式设置输入过滤器。匹配表达式的输入允许显示,不匹配的输入将被过滤。仅支持单个字符匹配,不支持字符串匹配。<br/>-&nbsp;value:设置正则表达式。<br/>-&nbsp;error:正则匹配失败时,返回被过滤的内容。 |
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | 设置输入的文本是否可复制。<br>设置CopyOptions.None时,当前TextArea中的文字无法被复制或剪切,仅支持粘贴。 |
> **说明:**
>
> [通用属性padding](ts-universal-attributes-size.md)的默认值为:<br>{<br>&nbsp;top: 8 vp,<br>&nbsp;right: 16 vp,<br>&nbsp;bottom: 16 vp,<br>&nbsp;left: 8 vp<br> }
## 事件
......
......@@ -43,6 +43,10 @@ TextInput(value?:{placeholder?: ResourceStr, text?: ResourceStr, controller?: Te
| style<sup>9+</sup> | [TextInputStyle](#textinputstyle9枚举说明) | 设置输入框为默认风格或内联输入风格。<br/>默认值:TextInputStyle.Default |
| textAlign<sup>9+</sup> | [TextAlign](ts-appendix-enums.md#textalign) | 设置输入文本在输入框中的对齐方式。<br/>默认值:TextAlign.Start |
> **说明:**
>
> [通用属性padding](ts-universal-attributes-size.md)的默认值为:<br>{<br>&nbsp;top: 8 vp,<br>&nbsp;right: 16 vp,<br>&nbsp;bottom: 16 vp,<br>&nbsp;left: 8 vp<br> }
## EnterKeyType枚举说明
| 名称 | 描述 |
......
......@@ -35,9 +35,9 @@ Toggle(options: { type: ToggleType, isOn?: boolean })
| 名称 | 描述 |
| -------- | ---------------- |
| Checkbox | 提供单选框样式。<br>**说明:**<br/>[通用属性padding](ts-universal-attributes-size.md)的默认值为:<br>{<br>&nbsp;top: 14 vp,<br>&nbsp;right: 6 vp,<br>&nbsp;bottom: 14 vp,<br>&nbsp;left: 6 vp<br> } |
| Checkbox | 提供单选框样式。<br>**说明:**<br/>[通用属性margin](ts-universal-attributes-size.md)的默认值为:<br>{<br>&nbsp;top: 12 vp,<br>&nbsp;right: 12 vp,<br>&nbsp;bottom: 12 vp,<br>&nbsp;left: 12 vp<br> } |
| Button | 提供状态按钮样式,如果子组件有文本设置,则相应的文本内容会显示在按钮内部。 |
| Switch | 提供开关样式。<br>**说明:**<br/>[通用属性padding](ts-universal-attributes-size.md)默认值为:<br>{<br/>&nbsp;top: 12 vp,<br/>&nbsp;right: 12 vp,<br/>&nbsp;bottom: 12 vp,<br/>&nbsp;left: 12 vp<br/> } |
| Switch | 提供开关样式。<br>**说明:**<br/>[通用属性margin](ts-universal-attributes-size.md)默认值为:<br>{<br/>&nbsp;top: 14 vp,<br/>&nbsp;right:6 vp,<br/>&nbsp;bottom: 6 vp,<br/>&nbsp;left: 14 vp<br/> } |
## 属性
......
......@@ -6,6 +6,7 @@
>
> - 该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
> - Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用[Column](ts-container-column.md)、[Row](ts-container-row.md)代替。
> - Flex组件主轴默认不设置时撑满父容器,[Column](ts-container-column.md)、[Row](ts-container-row.md)组件主轴不设置时默认是跟随子节点大小。
## 子组件
......
......@@ -76,7 +76,7 @@ List(value?:{space?: number&nbsp;|&nbsp;string, initialIndex?: number, scroller?
| onScrollIndex(event: (start: number, end: number) => void) | 列表滑动时触发。<br/>计算索引值时,ListItemGroup作为一个整体占一个索引值,不计算ListItemGroup内部ListItem的索引值。<br/>- start: 滑动起始位置索引值。<br/>- end: 滑动结束位置索引值。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onReachStart(event: () => void) | 列表到达起始位置时触发。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onReachEnd(event: () => void) | 列表到底末尾位置时触发。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | 列表开始滑动时触发,事件参数传入即将发生的滑动量,事件处理函数中可根据应用场景计算实际需要的滑动量并作为事件处理函数的返回值返回,列表将按照返回值的实际滑动量进行滑动。<br/>\- offset:即将发生的滑动量。<br/>\- state:当前滑动状态。<br/>- offsetRemain:实际滑动量。<br/>该接口支持在ArkTS卡片中使用。 |
| onScrollFrameBegin<sup>9+</sup>(event: (offset: number, state: ScrollState) => { offsetRemain }) | 列表开始滑动时触发,事件参数传入即将发生的滑动量,事件处理函数中可根据应用场景计算实际需要的滑动量并作为事件处理函数的返回值返回,列表将按照返回值的实际滑动量进行滑动。<br/>\- offset:即将发生的滑动量。<br/>\- state:当前滑动状态。<br/>- offsetRemain:实际滑动量。<br/>该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>当listDirection的值为Axis.Vertical时,返回垂直方向滑动量,当listDirection的值为Axis.Horizontal时,返回水平方向滑动量。 |
| onScrollStart<sup>9+</sup>(event: () => void) | 列表滑动开始时触发。手指拖动列表或列表的滚动条触发的滑动开始时,会触发该事件。使用[Scroller](ts-container-scroll.md#scroller)滑动控制器触发的带动画的滑动,动画开始时会触发该事件。<br/>该接口支持在ArkTS卡片中使用。 |
| onScrollStop(event: () => void) | 列表滑动停止时触发。手拖动列表或列表的滚动条触发的滑动,手离开屏幕并且滑动停止时会触发该事件;使用[Scroller](ts-container-scroll.md#scroller)滑动控制器触发的带动画的滑动,动画停止会触发该事件。<br/>从API version 9开始,该接口支持在ArkTS卡片中使用。 |
| onItemMove(event: (from: number, to: number) => boolean) | 列表元素发生移动时触发。<br/>- from: 移动前索引值。<br/>- to: 移动后索引值。 |
......
......@@ -173,7 +173,7 @@ struct VideoCreateComponent {
previewUri: this.previewUri,
currentProgressRate: this.curRate,
controller: this.controller
}).width(800).height(600)
}).width('100%').height(600)
.autoPlay(this.isAutoPlay)
.controls(this.showControls)
.onStart(() => {
......@@ -186,7 +186,7 @@ struct VideoCreateComponent {
console.info('onFinish')
})
.onError(() => {
console.info('onFinish')
console.info('onError')
})
.onPrepared((e) => {
console.info('onPrepared is ' + e.duration)
......
......@@ -25,7 +25,7 @@ struct MotionPathExample {
build() {
Column() {
Button('click me')
Button('click me').margin(50)
// 执行动画:从起点移动到(300,200),再到(300,500),再到终点
.motionPath({ path: 'Mstart.x start.y L300 200 L300 500 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
.onClick(() => {
......
......@@ -41,6 +41,7 @@ struct PositionExample1 {
Text('Bottom end')
.align(Alignment.BottomEnd)
.textAlign(TextAlign.End)
.height(50)
.width('90%')
.fontSize(16)
......
......@@ -132,7 +132,7 @@
.onAppear(() => {
animateTo({
duration: 2000,
duration: 1000,
curve: this.curve1,
delay: 100,
onFinish: () => {
......@@ -199,7 +199,7 @@
.opacity(this.opacityValue)
.onAppear(() => {
animateTo({
duration: 2000,
duration: 1000,
curve: this.curve1,
delay: 100,
onFinish: () => {
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册