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

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

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