提交 09da17e1 编写于 作者: Y yamila

update picker

Signed-off-by: Nyamila <tianyu55@huawei.com>
上级 bdfbfe38
...@@ -30,12 +30,12 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date}) ...@@ -30,12 +30,12 @@ DatePicker(options?: {start?: Date, end?: Date, selected?: Date})
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性: 除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------------------------------- | ---------------------------------------- | ---------------------------------------- | | -------------------------------- | --------------------------------------------- | ------------------------------------------------------------ |
| lunar | boolean | 日期是否显示农历。<br/>-&nbsp;true:展示农历。<br/>-&nbsp;false:不展示农历。<br/>默认值:false | | lunar | boolean | 日期是否显示农历。<br/>-&nbsp;true:展示农历。<br/>-&nbsp;false:不展示农历。<br/>默认值:false |
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 | | textStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置选中项的文本颜色、字号、字体粗细。 | | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](#pickertextstyle10类型说明) | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} |
## PickerTextStyle<sup>10+</sup>类型说明 ## PickerTextStyle<sup>10+</sup>类型说明
......
...@@ -28,10 +28,10 @@ Rating(options?: { rating: number, indicator?: boolean }) ...@@ -28,10 +28,10 @@ Rating(options?: { rating: number, indicator?: boolean })
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| --------- | ---------------------------------------- | ---------------------------------------- | | --------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| stars | number | 设置评分总数。<br/>默认值:5 <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>设置为小于0的值时,按默认值显示。 | | stars | number | 设置评分总数。<br/>默认值:5 <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>设置为小于等于0的值时,按默认值显示。 |
| stepSize | number | 操作评级的步长。<br/>默认值:0.5 <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>设置为小于0的值时,按默认值显示。<br/>取值范围为[0.1, stars]。 | | stepSize | number | 操作评级的步长。<br/>默认值:0.5 <br/>从API version 9开始,该接口支持在ArkTS卡片中使用。<br/>**说明:** <br/>设置为小于0的值时,按默认值显示。<br/>取值范围为[0.1, stars]。 |
| 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/>默认图片加载方式为异步,暂不支持同步加载。<br/>设置值为undefined或者空字符串时,rating会选择加载系统默认星型图源。 | | 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/>默认图片加载方式为异步,暂不支持同步加载。<br/>设置值为undefined或者空字符串时,rating会选择加载系统默认星型图源。 |
> **说明:** > **说明:**
......
...@@ -47,9 +47,9 @@ TextPicker(options?: {range: string[] | string[][] | Resource | TextPickerRangeC ...@@ -47,9 +47,9 @@ TextPicker(options?: {range: string[] | string[][] | Resource | TextPickerRangeC
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| defaultPickerItemHeight | number \| string | 设置Picker各选择项的高度。 | | defaultPickerItemHeight | number \| string | 设置Picker各选择项的高度。 |
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 | | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置选中项的文本颜色、字号、字体粗细。 | | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} |
| selectedIndex<sup>10+</sup> | number&nbsp;\|&nbsp;number[] | 设置默认选中项在数组中的索引值,优先级高于options中的选中值。 <br/>**说明**:单列数据选择器使用number类型。多列、多列联动数据选择器使用number[]类型。 | | selectedIndex<sup>10+</sup> | number&nbsp;\|&nbsp;number[] | 设置默认选中项在数组中的索引值,优先级高于options中的选中值。 <br/>**说明**:单列数据选择器使用number类型。多列、多列联动数据选择器使用number[]类型。 |
## 事件 ## 事件
......
...@@ -28,12 +28,12 @@ TimePicker(options?: {selected?: Date}) ...@@ -28,12 +28,12 @@ TimePicker(options?: {selected?: Date})
除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性: 除支持[通用属性](ts-universal-attributes-size.md)外,还支持以下属性:
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------------------------------- | ---------------------------------------- | ----------------------------------- | | -------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| useMilitaryTime | boolean | 展示时间是否为24小时制,不支持动态修改。<br/>默认值:false | | useMilitaryTime | boolean | 展示时间是否为24小时制。<br/>默认值:false |
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 | | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置选中项的文本颜色、字号、字体粗细。 | | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} |
## 事件 ## 事件
......
...@@ -15,20 +15,20 @@ show(options?: DatePickerDialogOptions) ...@@ -15,20 +15,20 @@ show(options?: DatePickerDialogOptions)
**DatePickerDialogOptions参数:** **DatePickerDialogOptions参数:**
| 参数名 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| start | Date | 否 | Date('1970-1-1') | 设置选择器的起始日期。 | | start | Date | 否 | 设置选择器的起始日期。<br>默认值:Date('1970-1-1') |
| end | Date | 否 | Date('2100-12-31') | 设置选择器的结束日期。 | | end | Date | 否 | 设置选择器的结束日期。<br/>默认值:Date('2100-12-31') |
| selected | Date | 否 | 当前系统日期 | 设置当前选中的日期。 | | selected | Date | 否 | 设置当前选中的日期。<br/>默认值:当前系统日期 |
| lunar | boolean | 否 | false | 日期是否显示为农历。 | | lunar | boolean | 否 | 日期是否显示为农历。<br/>默认值:false |
| showTime<sup>10+</sup> | boolean | 否 | false | 是否展示时间项。 | | showTime<sup>10+</sup> | boolean | 否 | 是否展示时间项。<br/>默认值:false |
| useMilitaryTime<sup>10+</sup> | boolean | 否 | false | 展示时间是否为24小时制。 | | useMilitaryTime<sup>10+</sup> | boolean | 否 | 展示时间是否为24小时制。<br/>默认值:false |
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | - | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | - | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 | | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | - | 设置选中项的文本颜色、字号、字体粗细。 | | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} |
| onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 点击弹窗中的“确定”按钮时触发该回调。 | | onAccept | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 |
| onCancel | () => void | 否 | - | 点击弹窗中的“取消”按钮时触发该回调。 | | onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
| onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | - | 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。 | | onChange | (value: [DatePickerResult](ts-basic-components-datepicker.md#DatePickerResult对象说明)) => void | 否 | 滑动弹窗中的滑动选择器使当前选中项改变时触发该回调。 |
## 示例 ## 示例
...@@ -87,4 +87,4 @@ struct DatePickerDialogExample { ...@@ -87,4 +87,4 @@ struct DatePickerDialogExample {
} }
``` ```
![DataPickerDialog](figures\DataPickerDialog.gif) ![DataPickerDialog](figures/DataPickerDialog.gif)
\ No newline at end of file
...@@ -21,9 +21,9 @@ show(options?: TextPickerDialogOptions) ...@@ -21,9 +21,9 @@ show(options?: TextPickerDialogOptions)
| selected | number | 否 | 设置选中项的索引值。<br>默认值:0 | | selected | number | 否 | 设置选中项的索引值。<br>默认值:0 |
| value | string | 否 | 设置选中项的文本内容。当设置了selected参数时,该参数不生效。如果设置的value值不在range范围内,则默认取range第一个元素。| | value | string | 否 | 设置选中项的文本内容。当设置了selected参数时,该参数不生效。如果设置的value值不在range范围内,则默认取range第一个元素。|
| defaultPickerItemHeight | number \| string | 否 | 设置选择器中选项的高度。 | | defaultPickerItemHeight | number \| string | 否 | 设置选择器中选项的高度。 |
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 | | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置选中项的文本颜色、字号、字体粗细。 | | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} |
| onAccept | (value: [TextPickerResult](#textpickerresult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 | | onAccept | (value: [TextPickerResult](#textpickerresult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 |
| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 | | onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
| onChange | (value: [TextPickerResult](#textpickerresult对象说明)) => void | 否 | 滑动弹窗中的选择器使当前选中项改变时触发该回调。 | | onChange | (value: [TextPickerResult](#textpickerresult对象说明)) => void | 否 | 滑动弹窗中的选择器使当前选中项改变时触发该回调。 |
...@@ -73,4 +73,4 @@ struct TextPickerDialogExample { ...@@ -73,4 +73,4 @@ struct TextPickerDialogExample {
} }
``` ```
![TextPickerDialog](figures\TextPickerDialog.gif) ![TextPickerDialog](figures/TextPickerDialog.gif)
\ No newline at end of file
...@@ -19,9 +19,9 @@ show(options?: TimePickerDialogOptions) ...@@ -19,9 +19,9 @@ show(options?: TimePickerDialogOptions)
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| selected | Date | 否 | 设置当前选中的时间。<br/>默认值:当前系统时间 | | selected | Date | 否 | 设置当前选中的时间。<br/>默认值:当前系统时间 |
| useMilitaryTime | boolean | 否 | 展示时间是否为24小时制,默认为12小时制。<br/>默认值:false | | useMilitaryTime | boolean | 否 | 展示时间是否为24小时制,默认为12小时制。<br/>默认值:false |
| disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。 | | disappearTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中最上和最下两个选项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '14fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。 | | textStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置所有选项中除了最上、最下及选中项以外的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff182431',<br/>font: {<br/>size: '16fp', <br/>weight: FontWeight.Regular<br/>}<br/>} |
| selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置选中项的文本颜色、字号、字体粗细。 | | selectedTextStyle<sup>10+</sup> | [PickerTextStyle](ts-basic-components-datepicker.md#pickertextstyle10类型说明) | 否 | 设置选中项的文本颜色、字号、字体粗细。<br/>默认值:<br/>{<br/>corlor: '#ff007dff',<br/>font: {<br/>size: '20vp', <br/>weight: FontWeight.Medium<br/>}<br/>} |
| onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 | | onAccept | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 点击弹窗中的“确定”按钮时触发该回调。 |
| onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 | | onCancel | () => void | 否 | 点击弹窗中的“取消”按钮时触发该回调。 |
| onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动弹窗中的选择器使当前选中时间改变时触发该回调。 | | onChange | (value: [TimePickerResult](ts-basic-components-timepicker.md#TimePickerResult对象说明)) => void | 否 | 滑动弹窗中的选择器使当前选中时间改变时触发该回调。 |
...@@ -78,4 +78,4 @@ struct TimePickerDialogExample { ...@@ -78,4 +78,4 @@ struct TimePickerDialogExample {
} }
``` ```
![TimetPickerDialog](figures\TimePickerDialog.gif) ![TimetPickerDialog](figures/TimePickerDialog.gif)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册