Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 e9875bf0 编写于 作者: E ester.zhou
浏览文件
操作

update docs and figures 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 95b5bcb5
隐藏空白更改
内联 并排
Showing with 238 addition and 154 deletion
en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
浏览文件 @ e9875bf0
......@@ -13,18 +13,18 @@ None
## Attributes
| Name | Type | Default Value | Description |
| Name | Type | Default Value | Description |
| -------- | -------- | -------- | -------- |
| blur | number | - | Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
| blur | number | - | Adds the content blurring for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the content is. If the value is **0**, the content is not blurred. |
| backdropBlur | number | - | Adds the background blur effect for the current component. The input parameter is the blur radius. The larger the radius is, the more blurred the background is. If the value is **0**, the background is not blurred. |
| shadow | {<br/>radius: number,<br/>color?: Color,<br/>offsetX?: number,<br/>offsetY?: number<br/>} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
| grayscale | number | 0.0 | The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
| saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
| contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
| colorBlend <sup>8+</sup> | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
| shadow | {<br/>radius: number,<br/>color?: Color,<br/>offsetX?: number,<br/>offsetY?: number<br/>} | - | Adds the shadow effect to the current component. The input parameters are the fuzzy radius (mandatory), shadow color (optional; gray by default), X-axis offset (optional and 0 by default), and Y-axis offset (optional; 0 by default). The offset unit is px. |
| grayscale | number | 0.0 | The value indicates the grayscale conversion ratio. If the input value is **1.0**, the image is converted into a grayscale image. If the input value is **0.0**, the image does not change. If the input value is between **0.0** and **1.0**, the effect changes in linear mode. The unit is percentage. The unit is percentage. |
| brightness | number | 1.0 | Adds a brightness to the current component. The input parameter is a brightness ratio. The value **1** indicates no effects. The value **0** indicates the complete darkness. If the value is less than **1**, the brightness decreases. If the value is greater than **1**, the brightness increases. A larger value indicates a higher brightness. |
| saturate | number | 1.0 | Adds the saturation effect to the current component. The saturation is the ratio of the chromatic component to the achromatic component (gray) in a color. When the input value is **1**, the source image is displayed. When the input value is greater than **1**, a higher percentage of the chromatic component indicates a higher saturation. When the input value is less than **1**, a higher percentage of the achromatic component indicates a lower saturation. The unit is percentage. |
| contrast | number | 1.0 | Adds the contrast effect to the current component. The input parameter is a contrast value. If the value is **1**, the source image is displayed. If the value is greater than **1**, a larger value indicates a higher contrast and a clearer image. If the value is less than **1**, a smaller value indicates a lower contrast is. If the value is **0**, the image becomes all gray. The unit is percentage. |
| invert | number | 0 | Inverts the input image. The input parameter is an image inversion ratio. The value **1** indicates complete inversion. The value **0** indicates that the image does not change. The unit is percentage. |
| colorBlend <sup>8+</sup> | Color | - | Adds the color blend effect to the current component. The input parameter is the blended color. |
| sepia | number | 0 | Converts the image color to sepia. The input parameter is an image inversion ratio. The value **1** indicates the image is completely sepia. The value **0** indicates that the image does not change. The unit is percentage. |
| hueRotate | Angle | 0deg | Adds the hue rotation effect to the current component. The input parameter is a rotation angle. If the input value is **0deg**, the image does not change (because the default rotation angle is **0deg**). The input parameter does not have the maximum value. If the value exceeds **360deg**, the image is rotated one ore more circles. |
......@@ -74,4 +74,4 @@ Column({space: 10}) {
}
```
![en-us_image_0000001212218448](figures/en-us_image_0000001212218448.png)
en/application-dev/ui/ts-system-resource-access.md
浏览文件 @ e9875bf0
......@@ -8,13 +8,13 @@ To reference a system resource, use the "$r('sys.type.resource_id')" format. Whe
```
Text('Hello')
.fontColor($r('sys.color.id_color_emphasize'))
.fontSize($r('sys.float.id_text_size_headline1'))
.fontFamily($r('sys.string.id_text_font_family_medium'))
.backgroundColor($r('sys.color.id_color_palette_aux1'))
Image($r('sys.media.ic_app'))
.border({color: $r('sys.color.id_color_palette_aux1'), radius: $r('sys.float.id_corner_radius_button'), width: 2})
.margin({top: $r('sys.float.id_elements_margin_horizontal_m'), bottom: $r('sys.float.id_elements_margin_horizontal_l')})
.fontColor($r('sys.color.ohos_id_color_emphasize'))
.fontSize($r('sys.float.ohos_id_text_size_headline1'))
.fontFamily($r('sys.string.ohos_id_text_font_family_medium'))
.backgroundColor($r('sys.color.ohos_id_color_palette_aux1'))
Image($r('sys.media.ohos_app_icon'))
.border({color: $r('sys.color.ohos_id_color_palette_aux1'), radius: $r('sys.float.ohos_id_corner_radius_button'), width: 2})
.margin({top: $r('sys.float.ohos_id_elements_margin_horizontal_m'), bottom: $r('sys.float.ohos_id_elements_margin_horizontal_l')})
.height(200)
.width(300)
```
en/application-dev/ui/ui-js-animate-background-position-style.md
浏览文件 @ e9875bf0
# Defining Animations with the background-position Attribute
By changing the background-position attribute (where the first value is the position on the x-axis and the second value is the position on the y-axis), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed.
By changing the **background-position** attribute (where the first value is the position on the x-axis and the second value is the position on the y-axis), you move a background image. If the background image goes beyond the respective component boundaries, the excess parts will not be displayed.
```
<!-- xxx.hml -->
......@@ -14,6 +14,7 @@ By changing the background-position attribute (where the first value is the posi
```
/* xxx.css */
.container {
height: 100%;
background-color:#F1F3F5;
display: flex;
flex-direction: column;
......@@ -76,5 +77,15 @@ By changing the background-position attribute (where the first value is the posi
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> The background-position attribute can only be used to move background images, but not the background color (background-color).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> The **background-position** attribute can only be used to move background images, but not the background color (**background-color**).
>
> ![en-us_image_background_img.gif](figures/en-us_image_background_img.gif)
## Samples
The following sample is provided to help you better understand how to develop an animation with the background-position attribute:
- [`JsImage`: Basic Animation (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsImage)
\ No newline at end of file
en/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ e9875bf0
......@@ -12,8 +12,7 @@ Create a **&lt;tabs&gt;** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
<div class="container" >
<tabs>
<tab-bar>
<tabs> <tab-bar>
<text>item1</text>
<text>item2</text>
</tab-bar>
......@@ -199,8 +198,9 @@ export default {
![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - A **&lt;tabs&gt;** can wrap at most one [**&lt;tab-bar&gt;**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**&lt;tab-content&gt;**](../reference/arkui-js/js-components-container-tab-content.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> A **&lt;tabs&gt;** can wrap at most one [**&lt;tab-bar&gt;**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**&lt;tab-content&gt;**](../reference/arkui-js/js-components-container-tab-content.md).
## Example Scenario
......@@ -242,12 +242,16 @@ Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** compo
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
background-color:#F1F3F5;
}
.tab_bar {
width: 100%;
height: 150px;
}
.tab_item {
height: 30%;
flex-direction: column;
align-items: center;
}
......@@ -315,4 +319,11 @@ export default {
}
```
![en-us_image_0000001267607885](figures/en-us_image_0000001267607885.gif)
![en-us_image_tab.gif](figures/en-us_image_tab.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;tabs&gt;** component:
[`Tabs`: Tabs (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Tabs)
\ No newline at end of file
en/application-dev/ui/ui-js-components-button.md
浏览文件 @ e9875bf0
......@@ -78,7 +78,7 @@ Set the **type** attribute of the **&lt;input&gt;** component to **button**, **d
![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - For capsule buttons, border-related styles are not supported.
>
> - For circle buttons, text-related styles are not supported.
......@@ -164,7 +164,7 @@ export default {
setProgress(e) {
if(this.isPaused){
prompt.showToast({
message: "Download started"
message: "Started Downloading"
})
this.star();
this.isPaused = false;
......@@ -181,8 +181,9 @@ export default {
![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The **setProgress** method supports only buttons of the download type.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> The **setProgress** method supports only buttons of the download type.
## Example Scenario
......
en/application-dev/ui/ui-js-components-chart.md
浏览文件 @ e9875bf0
......@@ -123,6 +123,9 @@ Define the chart type using the **type** attribute, for example, setting a chart
justify-content: center;
background-color: #F1F3F5;
}
.tab-bar{
background-color: #F1F3F5;
}
.chart-data {
width: 700px;
height: 600px;
......@@ -214,7 +217,8 @@ export default {
![en-us_image_0000001275803181](figures/en-us_image_0000001275803181.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> The **&lt;chart&gt;** component does not display the value of each point.
......@@ -301,7 +305,7 @@ export default {
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - The **options** attribute supports the settings of bar charts and line charts but does not support those of gauge charts.
>
> - The **datasets** attribute supports the datasets for bar charts and line charts but does not support those of gauge charts.
......@@ -618,3 +622,8 @@ export default {
```
![en-us_image_0000001232162328](figures/en-us_image_0000001232162328.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;chart&gt;** component:
[`Chart`: chart (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/chart)
\ No newline at end of file
en/application-dev/ui/ui-js-components-dialog.md
浏览文件 @ e9875bf0
......@@ -6,16 +6,16 @@ The **&lt;dialog&gt;** component is custom pop-up container for showing critical
## Creating a &lt;dialog&gt; Component
Create a **&lt;dialog&gt;** component in the .hml file under **pages/index** and add **&lt;button&gt;** components to trigger the **&lt;dialog&gt;**. The **&lt;dialog&gt;** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
Create a **&lt;dialog&gt;** component in the .hml file under **pages/index** and add **&lt;button&gt;** components to trigger the **&lt;dialog&gt;**. The **&lt;dialog&gt;** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
```
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId">
<div class="content" dragable="true">
<dialog class="dialogClass" id="dialogId" dragable="true">
<div class="content">
<text>this is a dialog</text>
</div>
</dialog>
</dialog>
<button value="click me" onclick="openDialog"></button>
</div>
```
......@@ -24,8 +24,8 @@ The **&lt;dialog&gt;** component is custom pop-up container for showing critical
```
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -77,7 +77,7 @@ Add a **cancel** event that is triggered when a user touches a non-dialog area t
```
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId">
<dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
<div class="dialogDiv">
<text>dialog</text>
<button value="confirm" onclick="confirmClick"></button>
......@@ -92,8 +92,8 @@ Add a **cancel** event that is triggered when a user touches a non-dialog area t
```
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -128,13 +128,21 @@ button{
/* xxx.js */
import prompt from '@system.prompt';
export default {
canceldialog(e){
prompt.showToast({
message: 'dialogCancel'
})
},
openDialog(){
this.$element('dialogId').show()
prompt.showToast({
message: 'dialogShow'
})
},
confirmClick(e) {
this.$element('dialogId').close()
prompt.showToast({
message: 'Confirmed.'
message: 'dialogClose'
})
},
}
......@@ -144,7 +152,7 @@ export default {
![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - This component supports only one child component.
>
> - Attributes and styles of a **&lt;dialog&gt;** component cannot be dynamically updated.
......@@ -321,3 +329,8 @@ export default {
![en-us_image_0000001223127756](figures/en-us_image_0000001223127756.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;dialog&gt;** component:
[`JsDialog`: JS Dialog Box (API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsDialog)
\ No newline at end of file
en/application-dev/ui/ui-js-components-form.md
浏览文件 @ e9875bf0
......@@ -4,19 +4,21 @@
The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> This component is supported since API version 6.
## Creating a &lt;form&gt; Component
Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<form> <input type="text" style="width:80%"></input>
</form>
<form style="width: 100%; height: 20%">
<input type="text" style="width:80%"></input>
</form>
</div>
```
......@@ -24,8 +26,8 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -38,7 +40,7 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
## Zooming In or Out on a Form
To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **&lt;form&gt;** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **&lt;form&gt;** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
```
<!-- xxx.hml -->
......@@ -57,20 +59,11 @@ Add the **background-color** and **border** attributes.
```
<!-- xxx.hml -->
<div class="container">
<form id="formId" class="formClass" click-effect="spring-large">
<input type="text"></input>
</form>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -78,7 +71,9 @@ Add the **background-color** and **border** attributes.
}
.formClass{
width: 80%;
height: 20%;
height: 100px;
padding: 10px;
border: 1px solid #cccccc;
}
```
......@@ -88,28 +83,47 @@ Add the **background-color** and **border** attributes.
## Adding Response Events
To submit or reset a form, add the **submit** and **reset** events.
To submit or reset a form, add the **submit** and **reset** events.
```
<!-- xxx.hml -->
<div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form">
<div style="justify-content: center; width: 100%;">
<div style="width: 100%;justify-content: center;">
<label>Option 1</label>
<input type='radio' name='radioGroup' value='radio1'></input>
<label>Option 2</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<div style="margin-top: 30px;justify-content: center; align-items: center;">
<input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
<input type="reset" value="Reset" style="width:100px;"></input>
<div style="width: 100%;justify-content: center; margin-top: 20px">
<input type="submit" value="Submit" style="width:120px; margin-right:20px;" >
</input>
<input type="reset" value="Reset" style="width:120px;"></input>
</div>
</form>
</div>
```
```
/* index.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-items: center;
align-items: center;
background-color: #F1F3F5;
}
.form{
width: 100%;
height: 30%;
margin-top: 40%;
flex-direction: column;
justify-items: center;
align-items: center;
}
```
```
/* xxx.js */
......
en/application-dev/ui/ui-js-components-images.md
浏览文件 @ e9875bf0
......@@ -20,7 +20,7 @@ The **&lt;image&gt;** component is used to render and display images. For detail
/* xxx.css */
.container {
width: 100%;
height: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -54,14 +54,14 @@ Set the **width**, **height**, and **object-fit** attributes to define the width
flex-direction: column;
align-items: center;
justify-content: center;
background-color:#F1F3F5;
background-color:#F1F3F5;
}
image{
width: 80%;
width: 80%;
height: 500px;
border: 5px solid saddlebrown;
border-radius: 20px;
object-fit: contain;
object-fit: contain;
match-text-direction:true;
}
......@@ -130,12 +130,12 @@ export default {
}
```
![en-us_image_0000001267887865](figures/en-us_image_0000001267887865.gif)
![en-us_image_images.gif ](figures/en-us_image_images.gif )
## Example Scenario
In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **1**.
In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **1**.
```
<!-- index.hml -->
......@@ -180,7 +180,10 @@ export default {
justify-content: space-between;
}
.testimage {
width: 100%; height: 400px; object-fit: scale-down; border-radius: 20px;}
width: 100%; height: 400px;
object-fit: scale-down;
border-radius: 20px;
}
```
......
en/application-dev/ui/ui-js-components-list.md
浏览文件 @ e9875bf0
......@@ -12,7 +12,8 @@ Create a **&lt;list&gt;** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
<div class="container">
<list><list-item class="listItem"></list-item>
<list>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
......@@ -20,12 +21,11 @@ Create a **&lt;list&gt;** component in the .hml file under **pages/index**.
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
width:100%;
height:100%;
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
......@@ -39,7 +39,7 @@ Create a **&lt;list&gt;** component in the .hml file under **pages/index**.
![en-us_image_0000001223287680](figures/en-us_image_0000001223287680.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - **&lt;list-item-group&gt;** is a child component of the **&lt;list&gt;** component and is used to group items in a list. It can have a **&lt;list-item&gt;** nested inside, but not **&lt;list&gt;**.
>
> - **&lt;list-item&gt;** is a child component of the **&lt;list&gt;** component and is used to display items in a list.
......@@ -64,12 +64,9 @@ To display a scrollbar on the right side of the screen, set **scrollbar** to **o
</div>
```
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
}
......@@ -118,7 +115,7 @@ Set a custom **indexer** component to add an index bar at the right boundary of
![en-us_image_0000001223127716](figures/en-us_image_0000001223127716.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.
>
> - You must include **"\#"** when using a customized indexer.
......@@ -204,8 +201,9 @@ export default {
![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component.
## Example Scenario
......@@ -225,7 +223,7 @@ Search for contacts by using an alphabetical indexer.
<div class="container">
<div class="in-container">
<text class="name">{{$item.name}}</text>
<text class="phone">18888888888</text>
<text class="number">18888888888</text>
</div>
</div>
</list-item>
......@@ -243,12 +241,15 @@ Search for contacts by using an alphabetical indexer.
```
/* index.css */
.doc-page {
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
}
.list {
width: 100%;
height: 100%;
height: 90%;
flex-grow: 1;
}
.item {
height: 120px;
......@@ -259,7 +260,7 @@ Search for contacts by using an alphabetical indexer.
color: #000000;
font-size: 39px;
}
.phone {
.number {
color: black;
font-size: 25px;
}
......@@ -318,3 +319,8 @@ export default {
![en-us_image_0000001267767861](figures/en-us_image_0000001267767861.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;list&gt;** component:
[`JsList`: JSList Offerings (API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsList)
\ No newline at end of file
en/application-dev/ui/ui-js-components-stepper.md
浏览文件 @ e9875bf0
......@@ -4,7 +4,8 @@
When multiple steps are required to complete a task, you can use the **&lt;stepper&gt;** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
>
> This component is supported since API version 5.
......@@ -12,26 +13,25 @@ When multiple steps are required to complete a task, you can use the **&lt;stepp
Create a **&lt;stepper&gt;** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
<div class="container">
<stepper><stepper-item>
<stepper>
<stepper-item>
<text>Step 1</text>
</stepper-item>
<stepper-item>
<text>Step 2</text>
</stepper-item>
</stepper>
</stepper>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -69,14 +69,13 @@ Set **index** to the index value of the step that you want to display by default
</div>
```
```
/* index.css */
.container {
width: 100%;
height: 100%;
width:100%;
height:100%;
flex-direction: column;
background-color:#F1F3F5;
background-color: #F1F3F5;
}
text{
width: 100%;
......@@ -110,14 +109,13 @@ Set the **label** attribute to customize the button text for the **&lt;stepper-i
</div>
```
```
/* index.css */
.container {
width: 100%;
height: 100%;
.container {
width:100%;
height:100%;
flex-direction: column;
background-color:#F1F3F5;
background-color: #F1F3F5;
}
text{
width: 100%;
......@@ -131,9 +129,9 @@ text{
/* index.js */
export default {
data: {
label_1:{
nextLabel: 'NEXT',
status: 'normal'
label_1:{
nextLabel: 'NEXT',
status: 'normal'
},
label_2:{
prevLabel: 'BACK',
......@@ -154,7 +152,7 @@ export default {
## Setting Styles
By default, the **&lt;stepper&gt;** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
By default, the **&lt;stepper&gt;** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
```
<!-- index.hml -->
......@@ -169,12 +167,11 @@ export default {
</div>
```
```
/* index.css */
.container {
width: 100%;
height: 100%;
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -185,7 +182,7 @@ export default {
height: 300px;
}
.stepperClass{
border:1px solid silver;
border:1px solid silver ;
background-color: white;
}
text{
......@@ -232,8 +229,8 @@ The **&lt;stepper&gt;** component supports the **finish**, **change**, **next**,
```
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -350,12 +347,11 @@ Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;t
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -416,3 +412,8 @@ export default {
```
![en-us_image_0000001267887817](figures/en-us_image_0000001267887817.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;stepper&gt;** component:
[`StepNavigator`: StepNavigator (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/StepNavigator)
\ No newline at end of file
en/application-dev/ui/ui-js-components-swiper.md
浏览文件 @ e9875bf0
......@@ -154,11 +154,12 @@ Set the width and height of the **&lt;swiper&gt;** component, the indicator's si
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
width: 500px;
......@@ -368,3 +369,8 @@ export default {
```
![en-us_image_0000001231843132](figures/en-us_image_0000001231843132.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;swiper&gt;** component:
- [`Swiper`: Swiper (JavaScript, API 7)](https://gitee.com/openharmony/app_samples/tree/master/UI/Swiper)
en/application-dev/ui/ui-js-components-text.md
浏览文件 @ e9875bf0
......@@ -8,17 +8,13 @@ The **&lt;text&gt;** component is used to display a piece of textual information
Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container" style="text-align: center;justify-content: center; align-items: center;">
<text>
Hello World
</text>
<text>Hello World</text>
</div>
```
```
/* xxx.css */
.container {
......@@ -37,8 +33,9 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
## Setting the Text Style and Attributes
- Adding a text style
Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text.
Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text.
```
<!-- xxx.hml -->
......@@ -50,8 +47,8 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
This is a passage
</text>
</div>
```
```
```
/* xxx.css */
......@@ -63,14 +60,15 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
justify-content: center;
background-color: #F1F3F5;
}
```
```
![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png)
- Adding a text modifier
Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
```
<!-- xxx.hml -->
......@@ -82,8 +80,8 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
This is a passage
</text>
</div>
```
```
```
/* xxx.css */
......@@ -97,14 +95,15 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
text{
font-size: 50px;
}
```
```
![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png)
- Hiding text content
Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis.
Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis.
```
<!-- xxx.hml -->
......@@ -113,8 +112,8 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
This is a passage
</text>
</div>
```
```
```
/* xxx.css */
......@@ -131,19 +130,20 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
max-lines: 1;
text-overflow:ellipsis;
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - **text-overflow** must be used together with **max-lines**.
>
> - **max-lines** indicates the maximum number of lines in the text.
> - **max-lines** indicates the maximum number of lines in the text.
![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
- Setting the text line breaking mode
Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
```
<!-- xxx.hml -->
......@@ -157,12 +157,14 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
</text>
</div>
</div>
```
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
......@@ -175,6 +177,7 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
justify-content: center;
}
.text1{
width: 100%;
height: 200px;
border:1px solid #1a1919;
margin-bottom: 50px;
......@@ -183,18 +186,19 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
font-size: 40px;
}
.text2{
width: 100%;
height: 200px;
border:1px solid #0931e8;
text-align: center;
word-break: break-all;
word-break: break-all;
font-size: 40px;
}
```
```
![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png)
- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md) child component.
- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md) child component
```
<!-- xxx.hml -->
......@@ -218,7 +222,7 @@ Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**
> - When the **&lt;span&gt;** child component is used to form a text paragraph, incorrect **&lt;span&gt;** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph.
>
> - When the **&lt;span&gt;** child component is being used, do not include any text you want to show in the **&lt;text&gt;** component, as such text will not be displayed if you do so.
......@@ -283,3 +287,8 @@ export default {
```
![en-us_image_0000001267887849](figures/en-us_image_0000001267887849.gif)
## Samples
The following sample is provided to help you better understand how to develop the **&lt;text&gt;** component:
- [`JsTextComponents`: JavaScript Basic Components (API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsBasicComponents)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或