Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
“7de10ee7e2c9febbe81b22ad83e3e4584ba4a988”上不存在“paddle/git@gitcode.net:BaiXuePrincess/Paddle.git”
未验证 提交 129253a1 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!10240 整改docs文档 

Merge pull request !10240 from wangshuainan1/OpenHarmony-3.1-Release
上级 d09b6139 5bb302cf
隐藏空白更改
内联 并排
Showing with 96 addition and 62 deletion
zh-cn/application-dev/reference/arkui-ts/ts-basic-components-richtext.md
浏览文件 @ 129253a1
...@@ -53,27 +53,27 @@ RichText(content: string) ...@@ -53,27 +53,27 @@ RichText(content: string)
@Entry @Entry
@Component @Component
struct RichTextExample { struct RichTextExample {
@State data: string = "<h1 style='text-align: center;'>h1标题</h1>" + @State data: string = '<h1 style="text-align: center;">h1标题</h1>' +
"<h1 style='text-align: center;'><i>h1斜体</i></h1>" + '<h1 style="text-align: center;"><i>h1斜体</i></h1>' +
"<h1 style='text-align: center;'><u>h1下划线</u></h1>" + '<h1 style="text-align: center;"><u>h1下划线</u></h1>' +
"<h2 style='text-align: center;'>h2标题</h2>" + '<h2 style="text-align: center;">h2标题</h2>' +
"<h3 style='text-align: center;'>h3标题</h3>" + '<h3 style="text-align: center;">h3标题</h3>' +
"<p style='text-align: center;'>p常规</p><hr/>" + '<p style="text-align: center;">p常规</p><hr/>' +
"<div style='width: 500px;height: 500px;border: 1px solid;margin: 0auto;'>" + '<div style="width: 500px;height: 500px;border: 1px solid;margin: 0auto;">' +
"<p style='font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)'>字体大小35px,行高45px</p>" + '<p style="font-size: 35px;text-align: center;font-weight: bold; color: rgb(24,78,228)">字体大小35px,行高45px</p>' +
"<p style='background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;'>" + '<p style="background-color: #e5e5e5;line-height: 45px;font-size: 35px;text-indent: 2em;">' +
"<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>" '<p>这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字</p>';
build() { build() {
Flex({direction: FlexDirection.Column,alignItems: ItemAlign.Center, Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,
justifyContent: FlexAlign.Center }){ justifyContent: FlexAlign.Center }) {
RichText(this.data) RichText(this.data)
.onStart(()=>{ .onStart(() => {
console.info("RichText onStart") console.info('RichText onStart');
}) })
.onComplete(()=>{ .onComplete(() => {
console.info("RichText onComplete") console.info('RichText onComplete');
}) })
} }
} }
} }
......
zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-swipegesture.md
浏览文件 @ 129253a1
...@@ -13,7 +13,7 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num ...@@ -13,7 +13,7 @@ SwipeGesture(value?: { fingers?: number; direction?: SwipeDirection; speed?: num
| 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 | | 参数名称 | 参数类型 | 必填 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- | -------- |
| fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 | | fingers | number | 否 | 1 | 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。 |
| direction | SwipeDirection | 否 | SwipeDirection.All | 触发滑动手势的滑动方向。 | | direction | [SwipeDirection](#swipedirection枚举说明) | 否 | SwipeDirection.All | 触发滑动手势的滑动方向。 |
| speed | number | 否 | 100 | 识别滑动的最小速度（默认为100vp/秒）。 | | speed | number | 否 | 100 | 识别滑动的最小速度（默认为100vp/秒）。 |
## SwipeDirection枚举说明 ## SwipeDirection枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-container-scroll.md
浏览文件 @ 129253a1
...@@ -20,13 +20,13 @@ Scroll(scroller?: Scroller) ...@@ -20,13 +20,13 @@ Scroll(scroller?: Scroller)
## 属性 ## 属性
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| -------------- | ---------------------------------------- | ---------------------------------------- | | -------------- | --------------------------------------------- | ------------------------------------------------------------ |
| scrollable | ScrollDirection | 设置滑动方法。<br/>默认值：ScrollDirection.Vertical | | scrollable | ScrollDirection | 设置滑动方法。<br/>默认值：ScrollDirection.Vertical |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滑动条状态。<br/>默认值：BarState.Off | | scrollBar | [BarState](ts-appendix-enums.md#barstate) | 设置滑动条状态。<br/>默认值：BarState.Off |
| scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 设置滑动条的颜色。 | | scrollBarColor | string&nbsp;\|&nbsp;number&nbsp;\|&nbsp;Color | 设置滑动条的颜色。 |
| scrollBarWidth | string&nbsp;\|&nbsp;number | 设置滑动条的宽度。 | | scrollBarWidth | string&nbsp;\|&nbsp;number | 设置滑动条的宽度。 |
| edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值：EdgeEffect.Spring | | edgeEffect | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | 设置滑动效果，目前支持的滑动效果参见EdgeEffect的枚举说明。<br/>默认值：EdgeEffect.None |
## ScrollDirection枚举说明 ## ScrollDirection枚举说明
......
zh-cn/application-dev/reference/arkui-ts/ts-methods-timepicker-dialog.md
浏览文件 @ 129253a1
...@@ -5,10 +5,6 @@ ...@@ -5,10 +5,6 @@
默认以00：00至23：59的时间区间创建滑动选择器，展示在弹窗上。 默认以00：00至23：59的时间区间创建滑动选择器，展示在弹窗上。
## 权限列表
无
## TimePickerDialog.show ## TimePickerDialog.show
show(options?: TimePickerDialogOptions) show(options?: TimePickerDialogOptions)
...@@ -32,7 +28,7 @@ show(options?: TimePickerDialogOptions) ...@@ -32,7 +28,7 @@ show(options?: TimePickerDialogOptions)
@Entry @Entry
@Component @Component
struct TimePickerDialogExample01 { struct TimePickerDialogExample01 {
@State isUseMilitaryTime: boolean = true @State isUseMilitaryTime: boolean = true;
build() { build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
...@@ -41,13 +37,13 @@ struct TimePickerDialogExample01 { ...@@ -41,13 +37,13 @@ struct TimePickerDialogExample01 {
TimePickerDialog.show({ TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime, useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()") console.info("TimePickerDialog:onCancel()");
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
} }
}) })
}) })
...@@ -55,13 +51,16 @@ struct TimePickerDialogExample01 { ...@@ -55,13 +51,16 @@ struct TimePickerDialogExample01 {
} }
} }
``` ```
![zh-cn_image_0000001118642010](figures/zh-cn_image_0000001118642010.gif)
### 时间滑动选择器（12小时制）示例 ### 时间滑动选择器（12小时制）示例
```ts ```ts
// xxx.ets // xxx.ets
@Entry @Entry
@Component @Component
struct TimePickerDialogExample02 { struct TimePickerDialogExample02 {
@State isUseMilitaryTime: boolean = false @State isUseMilitaryTime: boolean = false;
build() { build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center,
...@@ -70,13 +69,13 @@ struct TimePickerDialogExample02 { ...@@ -70,13 +69,13 @@ struct TimePickerDialogExample02 {
TimePickerDialog.show({ TimePickerDialog.show({
useMilitaryTime: this.isUseMilitaryTime, useMilitaryTime: this.isUseMilitaryTime,
onAccept: (value: TimePickerResult) => { onAccept: (value: TimePickerResult) => {
console.info("TimePickerDialog:onAccept()" + JSON.stringify(value)) console.info("TimePickerDialog:onAccept()" + JSON.stringify(value));
}, },
onCancel: () => { onCancel: () => {
console.info("TimePickerDialog:onCancel()") console.info("TimePickerDialog:onCancel()");
}, },
onChange: (value: TimePickerResult) => { onChange: (value: TimePickerResult) => {
console.info("TimePickerDialog:onChange()" + JSON.stringify(value)) console.info("TimePickerDialog:onChange()" + JSON.stringify(value));
} }
}) })
}) })
...@@ -84,3 +83,5 @@ struct TimePickerDialogExample02 { ...@@ -84,3 +83,5 @@ struct TimePickerDialogExample02 {
} }
} }
``` ```
![zh-cn_image_0000001118642020](figures/zh-cn_image_0000001118642020.gif)
\ No newline at end of file
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-component-id.md
浏览文件 @ 129253a1
...@@ -14,9 +14,9 @@ id为组件的唯一标识，在整个应用内唯一。本模块提供组件标 ...@@ -14,9 +14,9 @@ id为组件的唯一标识，在整个应用内唯一。本模块提供组件标
## 属性 ## 属性
| 名称 | 参数说明 | 默认值 | 描述 | | 名称 | 参数说明 | 默认值 | 描述 |
| ---- | ------ | ---- | ------------------ | | ---- | -------- | ------ | ------------------------------------ |
| id | string | '' | 组件的唯一标识，唯一性由使用者保证。 | | id | string | '' | 组件的唯一标识，唯一性由使用者保证。 |
## 接口 ## 接口
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-flex-layout.md
浏览文件 @ 129253a1
...@@ -27,14 +27,21 @@ struct FlexExample { ...@@ -27,14 +27,21 @@ struct FlexExample {
Column({ space: 5 }) { Column({ space: 5 }) {
Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
// 基于主轴基准尺寸 // 基于主轴基准尺寸
// flexBasis()值可以是'auto'(默认值)元素本来的大小 ,如果是数字则类似于.width()/.height() ,基于主轴 // flexBasis()值可以是'auto',表示基准尺寸是元素本来的大小 ,也可以是长度设置，相当于.width()/.height()
Flex() { Flex() {
Text('flexBasis(100)') Text('flexBasis(100)')
.flexBasis('100').height(100).lineHeight(70) .flexBasis('100')
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .height(100)
.lineHeight(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('flexBasis("auto")') Text('flexBasis("auto")')
.flexBasis('auto').width('60%').height(100).lineHeight(70) .flexBasis('auto')
.backgroundColor(0xD2B48C).textAlign(TextAlign.Center) .width('60%')
.height(100)
.lineHeight(70)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('flexGrow').fontSize(9).fontColor(0xCCCCCC).width('90%')
...@@ -42,11 +49,17 @@ struct FlexExample { ...@@ -42,11 +49,17 @@ struct FlexExample {
// flexGrow()剩余空间分配给该元素的比例 // flexGrow()剩余空间分配给该元素的比例
Flex() { Flex() {
Text('flexGrow(2)') Text('flexGrow(2)')
.flexGrow(2).height(100).lineHeight(70) .flexGrow(2)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .height(100)
.lineHeight(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('flexGrow(1)') Text('flexGrow(1)')
.flexGrow(1).height(100).lineHeight(70) .flexGrow(1)
.backgroundColor(0xD2B48C).textAlign(TextAlign.Center) .height(100)
.lineHeight(70)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('flexShrink').fontSize(9).fontColor(0xCCCCCC).width('90%')
...@@ -54,13 +67,25 @@ struct FlexExample { ...@@ -54,13 +67,25 @@ struct FlexExample {
// text1比例是0,其他都是默认值1,放不下时直接等比例缩放后两个,第一个不缩放 // text1比例是0,其他都是默认值1,放不下时直接等比例缩放后两个,第一个不缩放
Flex({ direction: FlexDirection.Row }) { Flex({ direction: FlexDirection.Row }) {
Text('flexShrink(0)') Text('flexShrink(0)')
.flexShrink(0).width('50%').height(100).lineHeight(70) .flexShrink(0)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .width('50%')
.height(100)
.lineHeight(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
Text('no flexShrink') Text('no flexShrink')
.width('40%').height(100).lineHeight(70).backgroundColor(0xD2B48C).textAlign(TextAlign.Center) .width('40%')
.height(100)
.lineHeight(70)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
Text('flexShrink(2)') Text('flexShrink(2)')
.flexShrink(2).width('40%').height(100) .lineHeight(70) .flexShrink(2)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .width('40%')
.height(100)
.lineHeight(70)
.backgroundColor(0xF5DEB3)
.textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('alignSelf').fontSize(9).fontColor(0xCCCCCC).width('90%')
...@@ -69,8 +94,12 @@ struct FlexExample { ...@@ -69,8 +94,12 @@ struct FlexExample {
Text('no alignSelf,height:80').width('33%').height(80) Text('no alignSelf,height:80').width('33%').height(80)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
Text('alignSelf stretch') Text('alignSelf stretch')
.alignSelf(ItemAlign.Stretch).width('33%').height(80).lineHeight(70) .alignSelf(ItemAlign.Stretch)
.backgroundColor(0xD2B48C).textAlign(TextAlign.Center) .width('33%')
.height(80)
.lineHeight(70)
.backgroundColor(0xD2B48C)
.textAlign(TextAlign.Center)
Text('no alignSelf,height:100').width('34%').height(100) Text('no alignSelf,height:100').width('34%').height(100)
.backgroundColor(0xF5DEB3).textAlign(TextAlign.Center) .backgroundColor(0xF5DEB3).textAlign(TextAlign.Center)
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE) }.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
......
zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-opacity.md
浏览文件 @ 129253a1
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
| 名称 | 参数类型 | 描述 | | 名称 | 参数类型 | 描述 |
| ------- | ---------------------------------------------------- | ------------------------------------------------------------ | | ------- | ---------------------------------------------------- | ------------------------------------------------------------ |
| opacity | number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。<br/>默认值：1 | | opacity | number&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 元素的不透明度，取值范围为0到1，1表示为不透明，0表示为完全透明。<br/>**说明：**<br/>子组件可以继承父组件的此属性。<br/>默认值：1 |
## 示例 ## 示例
......
zh-cn/application-dev/ui/ui-js-building-ui-layout-text.md
浏览文件 @ 129253a1
...@@ -19,8 +19,10 @@ ...@@ -19,8 +19,10 @@
flex-direction: column; flex-direction: column;
margin-top: 20px; margin-top: 20px;
margin-left: 30px; margin-left: 30px;
font-weight: 700;
} }
.title-text { .title-text {
width: 95%;
color: #1a1a1a; color: #1a1a1a;
font-size: 50px; font-size: 50px;
margin-top: 40px; margin-top: 40px;
...@@ -38,9 +40,11 @@ ...@@ -38,9 +40,11 @@
// xxx.js // xxx.js
export default { export default {
data: { data: {
headTitle: 'Capture the Beauty in This Moment', headTitle: 'Capture the Beauty in Moment',
paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.', paragraphFirst: 'Capture the beauty of light during the transition and fusion of ice and water. At the instant of movement and stillness, softness and rigidity, force and beauty, condensing moving moments.',
paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.', paragraphSecond: 'Reflecting the purity of nature, the innovative design upgrades your visual entertainment and ergonomic comfort. Effortlessly capture what you see and let it speak for what you feel.',
}, },
} }
``` ```
![zh-cn_image_0000001118642600](figures/zh-cn_image_0000001118642600.PNG)
\ No newline at end of file
zh-cn/application-dev/ui/ui-js-components-grid.md
浏览文件 @ 129253a1
...@@ -108,9 +108,9 @@ export default { ...@@ -108,9 +108,9 @@ export default {
![zh-cn_image_0000001227135613](figures/zh-cn_image_0000001227135613.gif) ![zh-cn_image_0000001227135613](figures/zh-cn_image_0000001227135613.gif)
## 添加grild-col ## 添加grid-col
创建grid-container组件并添加grid-row，在grid-row组件内添加grild-col组件形成布局。 创建grid-container组件并添加grid-row，在grid-row组件内添加grid-col组件形成布局。
``` ```
......
zh-cn/application-dev/ui/ui-js-components-offscreencanvas.md
浏览文件 @ 129253a1
# OffscreenCanvasRenderingContext2D对象 # OffscreenCanvasRenderingContext2D对象
使用OffscreenCanvas在离屏Canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。具体请参考[OffscreenCanvasRenderingContext2D对象](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md)。 使用OffscreenCanvas在离屏Canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。 离屏，即GPU在当前缓冲区以外新开辟的一个缓冲区。 具体请参考[OffscreenCanvasRenderingContext2D对象](../reference/arkui-js/js-offscreencanvasrenderingcontext2d.md)。
以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。 以下示例创建了一个OffscreenCanvas画布，再在画布上创建一个getContext2d对象，并设置filter属性改变图片样式。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或