Skip to content

D
Docs

OpenHarmony / Docs
12 个月 前同步成功

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 40da9748 编写于 作者: S sienna1128
浏览文件
操作

update docs 

Signed-off-by: Nsienna1128 <lixiaoyan45@huawei.com>
上级 59a37f4e
隐藏空白更改
内联 并排
Showing with 86 addition and 55 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-marquee.md
浏览文件 @ 40da9748
......@@ -22,7 +22,7 @@ Marquee(value: { start: boolean, step?: number, loop?: number, fromStart?: boole
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| start | boolean | 是 | 控制跑马灯是否进入播放状态。 |
| step | number | 否 | 滚动动画文本滚动步长。<br/>默认值：6，单位vp |
| step | number | 否 | 滚动动画文本滚动步长。<br/>默认值：6vp |
| loop | number | 否 | 设置重复滚动的次数，小于等于零时无限循环。<br/>默认值：-1 |
| fromStart | boolean | 否 | 设置文本从头开始滚动或反向滚动。<br/>默认值：true |
| src | string | 是 | 需要滚动的文本。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-navigation.md
浏览文件 @ 40da9748
......@@ -26,12 +26,12 @@ Navigation()
| -------------- | ---------------------------------------- | ---------------------------------------- |
| title | string&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面标题。 |
| subTitle | string | 页面副标题。 |
| menus | Array<NavigationMenuItem&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。 |
| titleMode | NavigationTitleMode | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free |
| toolBar | object&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | 设置隐藏/显示工具栏：<br/>默认值：false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值：false |
| hideBackButton | boolean | 隐藏返回键。<br/>默认值：false |
| menus | Array<[NavigationMenuItem](#navigationmenuitem类型说明)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 页面右上角菜单。 |
| titleMode | [NavigationTitleMode](#navigationtitlemode枚举说明) | 页面标题栏显示模式。<br/>默认值：NavigationTitleMode.Free |
| toolBar | [object](#object类型说明)&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8)<sup>8+</sup> | 设置工具栏内容。<br/>items:&nbsp;工具栏所有项。 |
| hideToolBar | boolean | 隐藏工具栏：<br/>默认值：false<br/>true:&nbsp;隐藏工具栏。<br/>false:&nbsp;显示工具栏。 |
| hideTitleBar | boolean | 隐藏标题栏。<br/>默认值：false<br/>true:&nbsp;隐藏标题栏。<br/>false:&nbsp;显示标题栏。 |
| hideBackButton | boolean | 隐藏返回键。<br/>默认值：false<br/>true:&nbsp;隐藏返回键。<br/>false:&nbsp;显示返回键。 |
## NavigationMenuItem类型说明
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-progress.md
浏览文件 @ 40da9748
......@@ -24,8 +24,8 @@ Progress(options: {value: number, total?: number, type?: ProgressType})
| -------- | -------- | -------- | -------- |
| value | number | 是 | 指定当前进度值。 |
| total | number | 否 | 指定进度总长。<br/>默认值：100 |
| type<sup>8+</sup> | ProgressType | 否 | 指定进度条样式。<br/>默认值：ProgressType.Linear |
| style<sup>deprecated</sup> | ProgressStyle | 否 | 指定进度条类型。<br/>该参数从API Version8开始废弃，建议使用type替代。<br/>默认值：ProgressStyle.Linear |
| type<sup>8+</sup> | [ProgressType](#progresstype枚举说明) | 否 | 指定进度条类型。<br/>默认值：ProgressType.Linear |
| style<sup>deprecated</sup> | [ProgressStyle](#progressstyle枚举说明) | 否 | 指定进度条样式。<br/>该参数从API Version8开始废弃，建议使用type替代。<br/>默认值：ProgressStyle.Linear |
## ProgressType枚举说明
......@@ -69,6 +69,7 @@ struct ProgressExample {
Progress({ value: 10, type: ProgressType.Linear }).width(200)
Progress({ value: 20, total: 150, type: ProgressType.Linear }).color(Color.Grey).value(50).width(200)
Text('Eclipse Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, type: ProgressType.Eclipse }).width(100)
......@@ -83,6 +84,16 @@ struct ProgressExample {
.style({ strokeWidth: 15, scaleCount: 15, scaleWidth: 5 })
}
// scaleCount和scaleWidth效果对比
Row({ space: 40 }) {
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
.color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 20, scaleCount: 20, scaleWidth: 5 })
Progress({ value: 20, total: 150, type: ProgressType.ScaleRing })
.color(Color.Grey).value(50).width(100)
.style({ strokeWidth: 20, scaleCount: 30, scaleWidth: 3 })
}
Text('Ring Progress').fontSize(9).fontColor(0xCCCCCC).width('90%')
Row({ space: 40 }) {
Progress({ value: 10, type: ProgressType.Ring }).width(100)
......@@ -105,4 +116,4 @@ struct ProgressExample {
}
```
![zh-cn_image_0000001198839004](figures/zh-cn_image_0000001198839004.gif)
![progress](figures/progress.png)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-qrcode.md
浏览文件 @ 40da9748
......@@ -44,17 +44,21 @@ QRCode(value: string)
@Component
struct QRCodeExample {
private value: string = 'hello world'
build() {
Column({ space: 5 }) {
Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC)
Text('normal').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
QRCode(this.value).width(200).height(200)
Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC)
// 设置二维码颜色
Text('color').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
QRCode(this.value).color(0xF7CE00).width(200).height(200)
// 设置二维码背景色
Text('backgroundColor').fontSize(9).width('90%').fontColor(0xCCCCCC).fontSize(30)
QRCode(this.value).width(200).height(200).backgroundColor(Color.Orange)
}.width('100%').margin({ top: 5 })
}
}
```
![zh-cn_image_0000001219662669](figures/zh-cn_image_0000001219662669.png)
![qrcode](figures/qrcode.png)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-scrollbar.md
浏览文件 @ 40da9748
......@@ -21,7 +21,7 @@ ScrollBar(value: { scroller: Scroller, direction?: ScrollBarDirection, state?: B
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| scroller | [Scroller](ts-container-scroll.md#scroller) | 是 | 可滚动组件的控制器。用于与可滚动组件进行绑定。 |
| direction | ScrollBarDirection | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。<br/>默认值：ScrollBarDirection.Vertical |
| direction | [ScrollBarDirection](#scrollbardirection枚举说明) | 否 | 滚动条的方向，控制可滚动组件对应方向的滚动。<br/>默认值：ScrollBarDirection.Vertical |
| state | [BarState](ts-appendix-enums.md#barstate) | 否 | 滚动条状态。<br/>默认值：BarState.Auto |
> **说明：**
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-select.md
浏览文件 @ 40da9748
......@@ -12,9 +12,9 @@
## 接口
Select(options: Array\<SelectOption\>)
Select(options: Array\<[SelectOption](#selectoption对象说明)\>)
**SelectOption对象说明：**
## SelectOption对象说明
| 参数名 | 参数类型 | 必填 | 参数描述 |
| ------ | ----------------------------------- | ---- | -------------- |
......@@ -26,7 +26,7 @@ Select(options: Array\<SelectOption\>)
| 名称 | 参数类型 | 描述 |
| ----------------------- | ------------------------------------- | --------------------------------------------- |
| selected | number | 设置下拉菜单初始选项的索引，第一项的索引为0。 |
| value | string | 设置下拉按钮本身的文本显示。 |
| value | string | 设置下拉按钮本身的文本内容。 |
| font | [Font](ts-types.md#font) | 设置下拉按钮本身的文本样式。 |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉按钮本身的文本颜色。 |
| selectedOptionBgColor | [ResourceColor](ts-types.md#resourcecolor) | 设置下拉菜单选中项的背景色。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-span.md
浏览文件 @ 40da9748
......@@ -30,7 +30,7 @@ Span(value: string | Resource)
| 名称 | 参数类型 | 描述 |
| -------- | -------- | -------- |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br/>默认值：{<br/>type:&nbsp;TextDecorationType.None<br/>color：Color.Black<br/>} |
| letterSpacing | number \| string | 设置文本字符间距。 |
| letterSpacing | number \| string | 设置文本字符间距。默认0,字符间距正常，取值小于0，字符聚集重叠，取值大于0且随着数值变大，字符间距越来越大，稀疏分布。 |
| textCase | [TextCase](ts-appendix-enums.md#textcase) | 设置文本大小写。<br/>默认值：TextCase.Normal |
......@@ -58,29 +58,59 @@ struct SpanExample {
.decoration({ type: TextDecorationType.None, color: Color.Red })
}
// 文本横线添加
Text('Text Decoration').fontSize(9).fontColor(0xCCCCCC)
Text() {
Span('I am Underline-span').decoration({ type: TextDecorationType.Underline, color: Color.Red }).fontSize(12)
}
Text() {
Span('I am LineThrough-span').decoration({ type: TextDecorationType.LineThrough, color: Color.Red }).fontSize(12)
Span('I am LineThrough-span')
.decoration({ type: TextDecorationType.LineThrough, color: Color.Red })
.fontSize(12)
}
Text() {
Span('I am Overline-span').decoration({ type: TextDecorationType.Overline, color: Color.Red }).fontSize(12)
}
// 文本字符间距
Text('LetterSpacing').fontSize(9).fontColor(0xCCCCCC)
Text() {
Span('span letter spacing')
.letterSpacing(0)
.fontSize(12)
}
Text() {
Span('span letter spacing')
.letterSpacing(-2)
.fontSize(12)
}
Text() {
Span('span letter spacing')
.letterSpacing(3)
.fontSize(12)
}
// 文本大小写展示设置
Text('Text Case').fontSize(9).fontColor(0xCCCCCC)
Text() {
Span('I am Lower-span').textCase(TextCase.LowerCase).fontSize(12)
.decoration({ type: TextDecorationType.None, color: Color.Red })
Span('I am Lower-span').fontSize(12)
.textCase(TextCase.LowerCase)
.decoration({ type: TextDecorationType.None })
}
Text() {
Span('I am Upper-span').textCase(TextCase.UpperCase).fontSize(12)
.decoration({ type: TextDecorationType.None, color: Color.Red })
Span('I am Upper-span').fontSize(12)
.textCase(TextCase.UpperCase)
.decoration({ type: TextDecorationType.None })
}
}.width('100%').height(250).padding({ left: 35, right: 35, top: 35 })
}
}
```
![zh-cn_image_0000001219982709](figures/zh-cn_image_0000001219982709.gif)
![span](figures/span.png)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-text.md
浏览文件 @ 40da9748
......@@ -29,10 +29,10 @@ Text(content?: string | Resource)
| 名称 | 参数类型 | 描述 |
| ----------------------- | ----------------------------------- | ------------------------------------------- |
| textAlign | [TextAlign](ts-appendix-enums.md#textalign) | 设置多行文本的文本对齐方式。<br/>默认值：TextAlign.Start |
| textOverflow | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。<br/>默认值：{overflow:&nbsp;TextOverflow.Clip}<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。<br />需配合`maxLines`使用，单独设置不生效。 |
| textOverflow | {overflow:&nbsp;[TextOverflow](ts-appendix-enums.md#textoverflow)} | 设置文本超长时的显示方式。<br/>默认值：TextOverflow.Clip<br/>**说明：**<br/>文本截断是按字截断。例如，英文以单词为最小单位进行截断，若需要以字母为单位进行截断，可在字母间添加零宽空格：\u200B。<br />需配合`maxLines`使用，单独设置不生效。 |
| maxLines | number | 设置文本的最大行数。<br />默认值：Infinity<br/>**说明：**<br />默认情况下，文本是自动折行的，如果指定此参数，则文本最多不会超过指定的行。如果有多余的文本，可以通过 `textOverflow`来指定截断方式。 |
| lineHeight | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本的文本行高，设置值不大于0时，不限制文本行高，自适应字体大小，Length为number类型时单位为fp。 |
| decoration | {<br/>type:&nbsp;TextDecorationType,<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br />默认值：{<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} |
| decoration | {<br/>type:&nbsp;[TextDecorationType](ts-appendix-enums.md#textdecorationtype),<br/>color?:&nbsp;[ResourceColor](ts-types.md#resourcecolor)<br/>} | 设置文本装饰线样式及其颜色。<br />默认值：{<br/>type:&nbsp;TextDecorationType.None,<br/>color：Color.Black<br/>} |
| baselineOffset | number&nbsp;\|&nbsp;string | 设置文本基线的偏移量。 |
| letterSpacing | number&nbsp;\|&nbsp;string | 设置文本字符间距。 |
| minFontSize | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 设置文本最小显示字号。 |
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textclock.md
浏览文件 @ 40da9748
......@@ -21,6 +21,12 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController
| timeZoneOffset | number | 否 | 设置时区偏移量。<br>取值范围为[-14, 12]，表示东十二区到西十二区，其中负值表示东时区，正值表示西时区，比如东八区为-8。<br>对横跨国际日界线的国家或地区，用-13（UTC+13）和-14（UTC+14）来保证整个国家或者区域处在相同的时间，当设置的值不在取值范围内时，将使用当前系统的时区偏移量。<br/>默认值：当前系统的时区偏移量 |
| controller | [TextClockController](#textclockcontroller) | 否 | 绑定一个控制器，用来控制文本时钟的状态。|
## TextClockController
TextClock容器组件的控制器，可以将此对象绑定到TextClock组件，再通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。
## 属性
除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
......@@ -35,29 +41,7 @@ TextClock(options?: { timeZoneOffset?: number, controller?: TextClockController
| 名称 | 功能描述 |
| -------------------------------------------- | ------------------------------------------------------------ |
| onDateChange(event: (value: number) => void) | 提供时间变化回调，该事件最小回调间隔为秒。<br /> - value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 |
## TextClockController
TextClock容器组件的控制器，可以将此对象绑定到TextClock组件，再通过它控制文本时钟的启动与停止。一个TextClock组件仅支持绑定一个控制器。
### 导入对象
```ts
controller: TextClockController = new TextClockController()
```
### start
start()
启动文本时钟。
### stop
stop()
停止文本时钟。
| onDateChange(event: (value: number) => void) | 提供时间变化回调，该事件最小回调间隔为秒。<br /> value: Unix Time Stamp，即自1970年1月1日（UTC）起经过的毫秒数。 |
## 示例
......@@ -67,8 +51,8 @@ stop()
@Component
struct Second {
@State accumulateTime: number = 0
// 导入对象
controller: TextClockController = new TextClockController()
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('Current milliseconds is ' + this.accumulateTime)
......@@ -84,10 +68,12 @@ struct Second {
Button("start TextClock")
.margin({ bottom: 10 })
.onClick(() => {
// 启动文本时钟
this.controller.start()
})
Button("stop TextClock")
.onClick(() => {
// 停止文本时钟
this.controller.stop()
})
}
......@@ -96,5 +82,5 @@ struct Second {
}
}
```
![](figures/text_clock.png)
![text_clock](figures/text_clock.png)
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-textpicker.md
浏览文件 @ 40da9748
......@@ -22,9 +22,9 @@ TextPicker(options?: {range: string[]|Resource, selected?: number, value?: strin
| 参数名 | 参数类型 | 必填 | 参数描述 |
| -------- | -------- | -------- | -------- |
| range | string[]&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 选择器的数据选择范围。 |
| selected | number | 否 | 选中项在数组中的index值。<br/>默认值：0 |
| value | string | 否 | 选中项的值，优先级低于selected。<br/>默认值：第一个元素值 |
| range | string[]&nbsp;\|&nbsp;[Resource](ts-types.md#resource类型) | 是 | 选择器的数据选择列表。 |
| selected | number | 否 | 设置默认选中项在数组中的index值。<br/>默认值：0 |
| value | string | 否 | 设置默认选中项的值，优先级低于selected。<br/>默认值：第一个元素值 |
## 属性
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或