| 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. |
# 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
> - A **<tabs>** can wrap at most one [**<tab-bar>**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**<tab-content>**](../reference/arkui-js/js-components-container-tab-content.md).
> A **<tabs>** can wrap at most one [**<tab-bar>**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**<tab-content>**](../reference/arkui-js/js-components-container-tab-content.md).
## Example Scenario
...
...
@@ -242,12 +242,16 @@ Use the **<tabs>**, **<tab-bar>**, and **<tab-content>** compo
@@ -6,16 +6,16 @@ The **<dialog>** component is custom pop-up container for showing critical
## Creating a <dialog> Component
Create a **<dialog>** component in the .hml file under **pages/index** and add **<button>** components to trigger the **<dialog>**. The **<dialog>** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
Create a **<dialog>** component in the .hml file under **pages/index** and add **<button>** components to trigger the **<dialog>**. The **<dialog>** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
The <form> component allows the content in [<input>](../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).
@@ -24,8 +26,8 @@ The <form> component allows the content in [<input>](../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 <form> component allows the content in [<input>](../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 **<form>** 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 **<form>** 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.
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**.
> - **<list-item-group>** is a child component of the **<list>** component and is used to group items in a list. It can have a **<list-item>** nested inside, but not **<list>**.
>
> - **<list-item>** is a child component of the **<list>** 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
When multiple steps are required to complete a task, you can use the **<stepper>** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
> 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 **<stepp
Create a **<stepper>** 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 **<stepper-i
</div>
```
```
/* index.css */
.container {
width:100%;
height:100%;
width:100%;
height:100%;
flex-direction: column;
background-color:#F1F3F5;
background-color:#F1F3F5;
}
text{
width: 100%;
...
...
@@ -154,7 +152,7 @@ export default {
## Setting Styles
By default, the **<stepper>** 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 **<stepper>** 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 **<stepper>** 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 <stepper> component to navigate through the steps. Create a [<t
@@ -37,7 +33,8 @@ Create a **<text>** 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.
```
...
...
@@ -50,7 +47,7 @@ Create a **<text>** component in the .hml file under **pages/index**.
This is a passage
</text>
</div>
```
```
```
...
...
@@ -63,13 +60,14 @@ Create a **<text>** component in the .hml file under **pages/index**.
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).
```
...
...
@@ -82,7 +80,7 @@ Create a **<text>** component in the .hml file under **pages/index**.
This is a passage
</text>
</div>
```
```
```
...
...
@@ -97,13 +95,14 @@ Create a **<text>** component in the .hml file under **pages/index**.
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).
```
...
...
@@ -157,12 +157,14 @@ Create a **<text>** 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 **<text>** 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 **<text>** component in the .hml file under **pages/index**.
> - When the **<span>** child component is used to form a text paragraph, incorrect **<span>** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph.
>
> - When the **<span>** child component is being used, do not include any text you want to show in the **<text>** component, as such text will not be displayed if you do so.