未验证 提交 b021788a 编写于 作者: F FadeAgain 提交者: Gitee

【OpenHarmony开源贡献者计划2022】md文档格式修改 组件说明位置、换行、缩进等···

Signed-off-by: NFadeAgain <402878692@qq.com>
上级 5bfd4cf9
# 组件内转场 # 组件内转场
组件转场主要通过transition属性进行配置转场参数,在组件插入和删除时进行过渡动效,主要用于容器组件子组件插入删除时提升用户体验(需要配合animateTo才能生效,动效时长、曲线、延时跟随animateTo中的配置)。
> **说明:** > **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
组件转场主要通过transition属性进行配置转场参数,在组件插入和删除时进行过渡动效,主要用于容器组件子组件插入删除时提升用户体验(需要配合animateTo才能生效,动效时长、曲线、延时跟随animateTo中的配置)。
## 属性 ## 属性
| 名称 | 参数类型 | 默认值 | 参数描述 | | 名称 | 参数类型 | 默认值 | 参数描述 |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| transition | Object | - | 所有参数均为可选参数,详细描述见transition入参说明。 | | transition | Object | - | 所有参数均为可选参数,详细描述见transition入参说明。 |
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
struct TransitionExample { struct TransitionExample {
@State btn1: boolean = false @State btn1: boolean = false
@State show: string = "show" @State show: string = "show"
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,}) {
Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50}) Button(this.show).width(80).height(30).backgroundColor(0x317aff).margin({bottom:50})
......
# 共享元素转场 # 共享元素转场
共享元素转场支持页面间的转场,如当前页面的图片转场至下一页面中。
> **说明:** > **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
共享元素转场支持页面间的转场,如当前页面的图片转场至下一页面中。
## 属性 ## 属性
| 名称 | 参数 | 默认值 | 参数描述 | | 名称 | 参数 | 默认值 | 参数描述 |
| ---------------- | ---------------------------------------- | ---- | ---------------------------------------- | | ---------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | - | 两个页面的组件配置为同一个id,则转场过程中会进行共享元素转场,配置为空字符串时不会有共享元素转场效果。 | | sharedTransition | id:&nbsp;string,<br/>options?:&nbsp;Object | - | 两个页面的组件配置为同一个id,则转场过程中会进行共享元素转场,配置为空字符串时不会有共享元素转场效果。 |
...@@ -57,6 +57,7 @@ struct SharedTransitionExample { ...@@ -57,6 +57,7 @@ struct SharedTransitionExample {
@Entry @Entry
@Component @Component
struct BExample { struct BExample {
build() { build() {
Stack() { Stack() {
Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1') Image($r('app.media.ic_health_heart')).width(150).height(150).sharedTransition('sharedImage1')
......
# 背景设置 # 背景设置
设置组件的背景色。
> **说明:** > **说明:**
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
设置组件的背景色。
## 权限列表 ## 权限列表
...@@ -38,6 +37,7 @@ ...@@ -38,6 +37,7 @@
@Entry @Entry
@Component @Component
struct BackgroundExample { struct BackgroundExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 5 }) {
Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC) Text('background color').fontSize(9).width('90%').fontColor(0xCCCCCC)
......
# 图片边框设置 # 图片边框设置
设置组件图片边框样式。 设置组件图片边框样式。
> **说明:** > **说明:**
> >
> 从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
## 权限列表 ## 权限列表
...@@ -36,6 +40,7 @@ ...@@ -36,6 +40,7 @@
| Round | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时压缩被切割图片。 | | Round | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时压缩被切割图片。 |
| Space | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时以空白填充。 | | Space | 被切割图片以整数次平铺在图片边框上,无法以整数次平铺时以空白填充。 |
## 示例 ## 示例
```ts ```ts
...@@ -43,6 +48,7 @@ ...@@ -43,6 +48,7 @@
@Entry @Entry
@Component @Component
struct Index { struct Index {
build() { build() {
Row() { Row() {
Column() { Column() {
...@@ -71,6 +77,7 @@ struct Index { ...@@ -71,6 +77,7 @@ struct Index {
@Entry @Entry
@Component @Component
struct Index { struct Index {
build() { build() {
Row() { Row() {
Column() { Column() {
......
# 边框设置 # 边框设置
设置组件边框样式。
> **说明:** > **说明:**
> >
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。 > 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
...@@ -7,9 +9,6 @@ ...@@ -7,9 +9,6 @@
> 从API Version 9开始,父节点的border显示在子节点内容之上。 > 从API Version 9开始,父节点的border显示在子节点内容之上。
设置组件边框样式。
## 权限列表 ## 权限列表
...@@ -96,6 +95,7 @@ ...@@ -96,6 +95,7 @@
@Entry @Entry
@Component @Component
struct BorderExample { struct BorderExample {
build() { build() {
Column() { Column() {
Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) { Flex({ justifyContent: FlexAlign.SpaceAround, alignItems: ItemAlign.Center }) {
......
...@@ -49,5 +49,4 @@ struct TouchAbleExample { ...@@ -49,5 +49,4 @@ struct TouchAbleExample {
} }
``` ```
![zh-cn_image_0000001189624550](figures/zh-cn_image_0000001189624550.gif) ![zh-cn_image_0000001189624550](figures/zh-cn_image_0000001189624550.gif)
...@@ -26,6 +26,7 @@ ...@@ -26,6 +26,7 @@
@Entry @Entry
@Component @Component
struct EnabledExample { struct EnabledExample {
build() { build() {
Flex({ justifyContent: FlexAlign.SpaceAround }) { Flex({ justifyContent: FlexAlign.SpaceAround }) {
// 点击没有反应 // 点击没有反应
......
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
@Entry @Entry
@Component @Component
struct FlexExample { struct FlexExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 5 }) {
Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%') Text('flexBasis').fontSize(9).fontColor(0xCCCCCC).width('90%')
......
...@@ -13,11 +13,13 @@ ...@@ -13,11 +13,13 @@
## 属性 ## 属性
| **名称** | **参数类型** | **默认值** | **描述** | | **名称** | **参数类型** | **默认值** | **描述** |
| -------------------- | -------- | ------- | ---------------------------------------- | | -------------------- | -------- | ------- | ---------------------------------------- |
| focusable | boolean | false | 设置当前组件是否可以获焦。 | | focusable | boolean | false | 设置当前组件是否可以获焦。 |
| tabIndex<sup>9+<sup> | number | 0 | 自定义组件tab键走焦能力,走焦顺序为:tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。<br />- tabIndex >= 0:表示元素是可聚焦的,并且可以通过tab键走焦来访问到该元素,按照tabIndex的数值递增而先后获焦。如果多个元素拥有相同的tabIndex,按照元素在当前组件树中的先后顺序获焦<br />- tabIndex < 0(通常是tabIndex = -1):表示元素是可聚焦的,但是不能通过tab键走焦来访问到该元素 | | tabIndex<sup>9+<sup> | number | 0 | 自定义组件tab键走焦能力,走焦顺序为:tabIndex大于0的组件依次递增走焦, tabIndex等于0的组件按组件树先后顺序走焦。<br />- tabIndex >= 0:表示元素是可聚焦的,并且可以通过tab键走焦来访问到该元素,按照tabIndex的数值递增而先后获焦。如果多个元素拥有相同的tabIndex,按照元素在当前组件树中的先后顺序获焦<br />- tabIndex < 0(通常是tabIndex = -1):表示元素是可聚焦的,但是不能通过tab键走焦来访问到该元素 |
> **说明:** > **说明:**
> 支持焦点控制的组件:Button、Text、Image、List、Grid。 > 支持焦点控制的组件:Button、Text、Image、List、Grid。
...@@ -70,4 +72,4 @@ struct FocusableExample { ...@@ -70,4 +72,4 @@ struct FocusableExample {
} }
``` ```
![focus](figures/focus.png) ![focus](figures/focus.png)
\ No newline at end of file
...@@ -45,6 +45,7 @@ ...@@ -45,6 +45,7 @@
@Entry @Entry
@Component @Component
struct ColorGradientExample { struct ColorGradientExample {
build() { build() {
Column({ space: 5 }) { Column({ space: 5 }) {
Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC) Text('linearGradient').fontSize(12).width('90%').fontColor(0xCCCCCC)
......
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
@Entry @Entry
@Component @Component
struct GridContainerExample1 { struct GridContainerExample1 {
build(){ build(){
GridContainer() { GridContainer() {
Row({}) { Row({}) {
...@@ -77,4 +78,4 @@ struct GridContainerExample1 { ...@@ -77,4 +78,4 @@ struct GridContainerExample1 {
**图3** 设备宽度为LG **图3** 设备宽度为LG
![zh-cn_image_0000001219982727](figures/zh-cn_image_0000001219982727.png) ![zh-cn_image_0000001219982727](figures/zh-cn_image_0000001219982727.png)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册