Skip to content

D
Docs

(_灬幸福相伴 / Docs
与 Fork 源项目一致

Fork自 OpenHarmony / Docs

通知 1
Star 1
Fork 0
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 66f56b0b 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (11310) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 34d06282
隐藏空白更改
内联 并排
Showing with 114 addition and 118 deletion
en/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ 66f56b0b
# CSS
Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages. For details, see [Universal Styles](../reference/arkui-js/js-components-common-styles.md).
## Size Unit
- Logical px set by \<length>:
- The default logical screen width is 720 px (for details, see the "window" section in [config.json](js-framework-js-tag.md)). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
- If you set autoDesignWidth to true (for details, see the "window" section in [config.json](js-framework-js-tag.md)), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
- Logical px set by **\<length>**:
- The default logical screen width is 720 px (for details, see the **"window"** section in **[config.json](js-framework-js-tag.md)**). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
- If you set **autoDesignWidth** to **true** (for details, see the **"window"** section in **[config.json](js-framework-js-tag.md)**), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
- Percentage set by &lt;percentage&gt;: The component size is represented by its percentage of the parent component size. For example, if the width &lt;percentage&gt; of a component is set to 50%, the width of the component is half of its parent component's width.
- Percentage set by **\<percentage>**: The component size is represented by its percentage of the parent component size. For example, if the width **\<percentage>** of a component is set to **50%**, the width of the component is half of its parent component's width.
## Style Import
CSS files can be imported using the @import statement. This facilitates module management and code reuse.
CSS files can be imported using the **@import** statement. This facilitates module management and code reuse.
## Style Declaration
The .css file with the same name as the .hml file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
1. Internal style: The style and class attributes can be used to specify the component style. Example:
1. Internal style: The **style** and **class** attributes can be used to specify the component style. Example:
```html
<!-- index.hml -->
<div class="container">
......@@ -30,7 +29,6 @@ The .css file with the same name as the .hml file in each page directory describ
</div>
```
```css
/* index.css */
.container {
......@@ -38,8 +36,7 @@ The .css file with the same name as the .hml file in each page directory describ
}
```
2. External style files: You need to import the files. For example, create a style.css file in the common directory and import the file at the beginning of index.css.
2. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**.
```css
/* style.css */
.title {
......@@ -47,7 +44,6 @@ The .css file with the same name as the .hml file in each page directory describ
}
```
```css
/* index.css */
@import '../../common/style.css';
......@@ -61,19 +57,18 @@ The .css file with the same name as the .hml file in each page directory describ
A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
| Selector | Example | Description |
| -------- | -------- | -------- |
| .class | .container | Selects all components whose class is container. |
| \#id | \#titleId | Selects all components whose id is titleId. |
| tag | text | Selects all &lt;text&gt; components. |
| , | .title, .content | Selects all components whose class is title or content. |
| \#id .class tag | \#containerId .content text | Selects all grandchild **\<text>** components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between **\#id** and **.class**, for example, **\#containerId>.content**. |
The following is an example:
| Selector | Example | Description |
| ------------------------- | ------------------------------------- | ---------------------------------------- |
| .class | .container | Selects all components whose **class** is **container**. |
| \#id | \#titleId | Selects all components whose **id** is **titleId**. |
| tag | text | Selects all **\<text>** components. |
| , | .title, .content | Selects all components whose **class** is **title** or **content**. |
| \#id .class tag | \#containerId .content text | Selects all grandchild **\<text>** components whose grandparent components are identified as **containerId** and whose parent components are of the **content** class. To select child components, use **>** to replace the space between **\#id** and **.class**, for example, **\#containerId>.content**.|
Example:
```html
<!-- Page layoutxxx.hml -->
<!-- Pagelayoutexample.hml -->
<div id="containerId" class="container">
<text id="titleId" class="title">Title</text>
<div class="content">
......@@ -82,18 +77,17 @@ The following is an example:
</div>
```
```css
/* Page style xxx.css */
/* Pagestyleexample.css */
/* Set the style for all <div> components. */
div {
flex-direction: column;
}
/* Set the style for the component whose class is title.*/
/* Set the style for the components whose class is title. */
.title {
font-size: 30px;
}
/* Set the style for the component whose id is contentId. */
/* Set the style for the components whose id is contentId. */
#contentId {
font-size: 20px;
}
......@@ -101,12 +95,12 @@ div {
.title, .content {
padding: 5px;
}
/* Set the style for all texts of components whose class is container.*/
/* Set the style for all texts of components whose class is container. */
.container text {
color: \#007dff;
color: #007dff;
}
/* Set the style for direct descendant texts of components whose class is container.*/
.container &gt; text {
/* Set the style for direct descendant texts of components whose class is container. */
.container > text {
color: #fa2a2d;
}
```
......@@ -115,31 +109,29 @@ The above style works as follows:
![en-us_image_0000001267607889](figures/en-us_image_0000001267607889.png)
In the preceding example, .container text sets title and content to blue, and .container > text sets title to red. The two styles have the same priority, but .container > text declares the style later and overwrites the former style. (For details about the priority, see [Selector Specificity](#selector-specificity).)
In the preceding example, **.container text** sets title and content to blue, and **.container > text** sets title to red. The two styles have the same priority, but **.container > text** declares the style later and overwrites the former style. For details about the priority, see [Selector Specificity](#selector-specificity).
## Selector Specificity
The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, id, class, tag, grandchild components, and child components. (Inline styles are those declared in the style attribute.)
The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, **id**, **class**, **tag**, grandchild components, and child components. (Inline styles are those declared in the **style** attribute.)
When multiple selectors point to the same element, their priorities are as follows (in descending order): inline style > id > class > tag.
When multiple selectors point to the same element, their priorities are as follows (in descending order): inline style > **id** > **class** > **tag**.
## Pseudo-classes
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :disabled can be used to select the element whose disabled attribute is true.
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements. For example, **:disabled** can be used to select the element whose **disabled** attribute is **true**.
| Pseudo-class | Available Components | Description |
| -------- | -------- | -------- |
| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). |
| :active | Components that support the click event | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes). |
| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). |
| :checked | input[type="checkbox", type="radio"], and switch | Selects the element whose checked attribute is true (unavailable for animation attributes). |
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, **:focus:checked** selects the element whose **focus** and **checked** attributes are both set to **true**. The following table lists the supported single pseudo-class in descending order of priority.
The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
| Pseudo-class | Available Components | Description |
| --------- | ---------------------------------------- | ---------------------------------------- |
| :disabled | Components that support the **disabled** attribute | Selects the element whose **disabled** attribute is changed to **true** (unavailable for animation attributes). |
| :active | Components that support the click event | Selects the element activated by a user. For example, a pressed button or a selected **tab-bar** (unavailable for animation attributes).|
| :waiting | button | Selects the element whose **waiting** attribute is **true** (unavailable for animation attributes). |
| :checked | input[type="checkbox", type="radio"], switch | Selects the element whose **checked** attribute is **true** (unavailable for animation attributes). |
The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
```html
<!-- index.hml -->
......@@ -151,32 +143,29 @@ The following is an example for you to use the **:active** pseudo-class to contr
```css
/* index.css */
.button:active {
background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
}
```
> **NOTE**
>
> Pseudo-classes are not supported for the **\<popup>** component and its child components, including **\<popup>**, **\<dialog>**, **\<menu>**, **\<option>**, and **\<picker>**.
> Pseudo-classes are not supported for the **\<popup>** component and its child components, including, **\<popup>**, **\<dialog>**, **\<menu>**, **\<option>**, and **\<picker>**.
## Precompiled Styles
Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original .css file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original **.css** file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
- The following index.less file is changed from index.css.
- The following **index.less** file is changed from **index.css**.
```less
/* index.less */
/* Define a variable. */
@colorBackground: #000000;
.container {
background-color: @colorBackground; /* Use the variable defined in the .less file. */
background-color: @colorBackground; /* Use the variable defined in the .less file. */
}
```
- Reference a precompiled style file. For example, if the **style.scss** file is located in the common directory, change the original index.css file to **index.scss** and import **style.scss**.
- Reference a precompiled style file. For example, if the **style.scss** file is located in the **common** directory, change the original **index.css** file to **index.scss** and import **style.scss**.
```scss
/* style.scss */
/* Define a variable. */
......@@ -185,20 +174,18 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
Reference the precompiled style file in **index.scss**:
```scss
/* index.scss */
/* Import style.scss. */
@import '../../common/style.scss';
.container {
background-color: $colorBackground; /* Use the variable defined in style.scss. */
background-color: $colorBackground; /* Use the variable defined in style.scss. */
}
```
> **NOTE**
>
> Place precompiled style files in the common directory.
> Place precompiled style files in the **common** directory.
## CSS Style Inheritance<sup>6+</sup>
......
en/application-dev/ui/ui-js-animate-attribute-style.md
浏览文件 @ 66f56b0b
# Defining Attribute Style Animations
Keyframes is used to scale a component by dynamically setting the width and height of its parent component. Set the scale attribute for child components to scale the child and parent components at the same time. Then, set the opacity attribute to display or hide the child and parent components.
**Keyframes** is used to scale a component by dynamically setting the width and height of its parent component. Set the scale attribute for child components to scale the child and parent components at the same time. Then, set the opacity attribute to display or hide the child and parent components.
```html
......@@ -25,8 +25,10 @@ Keyframes is used to scale a component by dynamically setting the width and heig
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
}
.fade{
.fade {
width: 30%;
height: 200px;
left: 35%;
......@@ -34,13 +36,13 @@ Keyframes is used to scale a component by dynamically setting the width and heig
position: absolute;
animation: 2s change infinite friction;
}
.bigger{
.bigger {
width: 20%;
height: 100px;
background-color: blue;
animation: 2s change1 infinite linear-out-slow-in;
}
text{
text {
width: 100%;
height: 100%;
text-align: center;
......@@ -60,7 +62,7 @@ text{
}
}
/* Scaling of the parent component */
@keyframes change1{
@keyframes change1 {
0% {
width: 20%;
height: 100px;
......@@ -69,11 +71,11 @@ text{
width: 80%;
height: 200px;
}
}
}
/* Text scaling of the child component */
@keyframes change2{
0%{
transform: scale(0);
@keyframes change2 {
0% {
transform: scale(0);
}
100% {
transform: scale(1.5);
......@@ -82,10 +84,10 @@ text{
```
![en-us_image_0000001267647889](figures/en-us_image_0000001267647889.gif)
![en-us_image_0000001217168141](figures/en-us_image_0000001217168141.gif)
> **NOTE**
> 1. The values of animation attributes are not sequenced. However, the values of duration and delay are parsed based on the sequence in which they are displayed.
> - The values of animation attributes are not sequenced. However, the values of duration and delay are parsed based on the sequence in which they are displayed.
>
> 2. The animation-duration attribute must be set. Otherwise, the duration is 0, which means there is no animation effect. When animation-fill-mode is set to forwards, the component directly displays the style of the last frame.
> - The animation-duration attribute must be set. Otherwise, the duration is 0, which means there is no animation effect. When animation-fill-mode is set to forwards, the component directly displays the style of the last frame.
en/application-dev/ui/ui-js-animate-component.md
浏览文件 @ 66f56b0b
......@@ -338,7 +338,7 @@ export default {
}
```
![en-us_image_0000001223127752](figures/en-us_image_0000001223127752.gif)
![en-us_image_0000001220635011](figures/en-us_image_0000001220635011.gif)
Change the animation status by changing the **playState** attribute.
......
en/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ 66f56b0b
......@@ -39,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height: 428px;
background-color: #860303;
transform: rotate(45deg);
margin-top: 230px;
margin-left: 266px;
margin-top: 284px;
margin-left: 148px;
}
.content{
margin-top: 500px;
......@@ -53,7 +53,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
width: 100px;
height: 150px;
background-color: #1033d9;
transform: translate(150px,-150px);
transform: translate(150px,-137px);
}
.window{
z-index: 1;
......@@ -86,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height: 100px;
border-radius: 15px;
background-color: #9a7404;
transform: translate(200px,-830px) skewX(-5deg);
transform: translate(200px,-710px) skewX(-5deg);
}
```
......@@ -203,24 +203,26 @@ Set the rotation center around an element in different transform-origin position
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.rect{
.rect {
width: 100px;
height: 100px;
animation: rotate 3s infinite;
margin-left: 100px;
}
.rect1{
.rect1 {
background-color: #f76160;
}
.rect2{
.rect2 {
background-color: #60f76f;
/* Change the origin position.*/
transform-origin: 10% 10px;
}
.rect3{
.rect3 {
background-color: #6081f7;
/* Change the origin position.*/
/* Chhange the origin position.*/
transform-origin: right bottom;
}
@keyframes rotate {
......@@ -232,7 +234,7 @@ Set the rotation center around an element in different transform-origin position
}
}
/* 3D sample style */
.rotate3d{
.rotate3d {
margin-top: 150px;
flex-direction: column;
background-color:#F1F3F5;
......@@ -243,36 +245,36 @@ Set the rotation center around an element in different transform-origin position
border-radius: 300px;
border: 1px solid #ec0808;
}
.content{
.content {
padding-top: 150px;
display: flex;
align-items: center;
justify-content: center;
}
/* Use react4 and react5 to shape eyes. */
.rect4{
.rect4 {
width: 100px;
height: 100px;
animation: rotate3d1 17ms infinite;
animation: rotate3d1 1000ms infinite;
background: linear-gradient(#e6c4ec, #be15d9)
}
.rect5{
.rect5 {
width: 100px;
height: 100px;
animation: rotate3d1 17ms infinite;
animation: rotate3d1 1000ms infinite;
margin-left: 100px;
background: linear-gradient(#e6c4ec, #be15d9)
}
.mouse{
.mouse {
margin-top: 150px;
width: 200px;
height: 100px;
border-radius: 50px;
border: 1px solid #e70303;
animation: rotate3d2 17ms infinite;
animation: rotate3d2 1000ms infinite;
}
/* Eye animation */
@keyframes rotate3d1{
@keyframes rotate3d1 {
0% {
transform:rotate3d(0,0,0,0deg)
}
......@@ -284,7 +286,7 @@ Set the rotation center around an element in different transform-origin position
}
}
/* Mouth animation */
@keyframes rotate3d2{
@keyframes rotate3d2 {
0% {
transform:rotate3d(0,0,0,0deg)
}
......@@ -437,6 +439,8 @@ The matrix attribute defines a transformation matrix with six input parameters:
background-color:#F1F3F5;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.rect{
width: 100px;
......@@ -463,7 +467,7 @@ The matrix attribute defines a transformation matrix with six input parameters:
![en-us_image_0000001267767853](figures/en-us_image_0000001267767853.gif)
## Integrating transform Attributes
## Integrating Transform Attributes
You can set multiple transform attributes at the same time to apply different transformations to a component. The following example applies the scale, translate, and rotate attributes simultaneously.
......@@ -481,6 +485,8 @@ You can set multiple transform attributes at the same time to apply different tr
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction:column;
background-color:#F1F3F5;
padding:50px;
......
en/application-dev/ui/ui-js-building-ui-animation.md
浏览文件 @ 66f56b0b
......@@ -8,11 +8,11 @@ Animations are classified into [Static Animation](#static-animation) and [Contin
The transform attributes are the core of the static animation. A static animation can transform in the following three ways and only once in each way at a time:
- translate: Moves a specified component horizontally or vertically.
- translate: moves a specified component horizontally or vertically.
- scale: Scales a specified component horizontally or vertically to the required scale.
- scale: scales a specified component horizontally or vertically to the required scale.
- rotate: Rotates a specified component by a specified angle along the horizontal axis, vertical axis, or center point.
- rotate: rotates a specified component by a specified angle along the horizontal axis, vertical axis, or center point.
For more information, see [Component Methods](../reference/arkui-js/js-components-common-methods.md). The following is an example:
......@@ -28,12 +28,14 @@ For more information, see [Component Methods](../reference/arkui-js/js-component
```css
/* xxx.css */
.container {
width: 100%;
flex-direction: column;
align-items: center;
}
.translate {
height: 150px;
width: 300px;
margin: 50px;
font-size: 50px;
background-color: #008000;
transform: translate(200px);
......@@ -41,14 +43,16 @@ For more information, see [Component Methods](../reference/arkui-js/js-component
.rotate {
height: 150px;
width: 300px;
margin: 50px;
font-size: 50px;
background-color: #008000;
transform-origin: 200px 100px;
transform: rotateX(45deg);
transform: rotate(45deg);
}
.scale {
height: 150px;
width: 300px;
margin: 50px;
font-size: 50px;
background-color: #008000;
transform: scaleX(1.5);
......@@ -57,7 +61,7 @@ For more information, see [Component Methods](../reference/arkui-js/js-component
**Figure 1** Static animation
![en-us_image_0000001223127724](figures/en-us_image_0000001223127724.png)
![en-us_image_0000001071134933](figures/en-us_image_0000001071134933.png)
## Continuous Animation
......@@ -66,43 +70,39 @@ The static animation has only the start and end states. To set the transition st
The core of a continuous animation is animation attributes, which define the start and end states of the animation and the curve of time and speed. Animation attributes can implement the following effects:
- animation-name: Background color, opacity, width, height, and transformation type applied to the element after the animation is executed
- **animation-name**: background color, opacity, width, height, and transformation type applied to the element after the animation is executed
- animation-delay and animation-duration: Element delay and duration after the animation is executed
- **animation-delay** and **animation-duration**: element delay and duration after the animation is executed
- animation-timing-function: Speed curve of an animation, which makes the animation more fluent
- **animation-timing-function**: speed curve of an animation, which makes the animation more fluent
- animation-iteration-count: Number of animation playback times
- **animation-iteration-count**: number of animation playback times
- animation-fill-mode: Whether to restore the initial state after the animation is executed
- **animation-fill-mode**: whether to restore the initial state after the animation is executed
To use the animation attributes, you need to define a @keyframes rule in the .css file, set the animation transition effect in @keyframes, and invoke the effect through a style class in the .hml file. The following is an example for animation-name:
To use the animation attributes, you need to define a @keyframes rule in the .css file, set the animation transition effect in **@keyframes**, and invoke the effect through a style class in the .hml file. The following is an example for **animation-name**:
```html
<!-- xxx.hml -->
<div class="item-container">
<text class="header">animation-name</text>
<div class="item {{colorParam}}">
<text class="txt">color</text>
</div>
<div class="item {{opacityParam}}">
<text class="txt">opacity</text>
</div>
<input class="button" type="button" name="" value="show" onclick="showAnimation"/>
<div class="item {{colorParam}}">
<text class="txt">color</text>
</div>
<div class="item {{opacityParam}}">
<text class="txt">opacity</text>
</div>
<input class="button" type="button" name="" value="show" onclick="showAnimation"/>
</div>
```
```css
/* xxx.css */
.item-container {
margin-right: 60px;
margin-left: 60px;
margin: 60px;
flex-direction: column;
}
.header {
margin-bottom: 20px;
}
.item {
width: 80%;
background-color: #f76160;
}
.txt {
......@@ -112,6 +112,7 @@ To use the animation attributes, you need to define a @keyframes rule in the .cs
}
.button {
width: 200px;
margin: 10px;
font-size: 30px;
background-color: #09ba07;
}
......@@ -141,7 +142,7 @@ To use the animation attributes, you need to define a @keyframes rule in the .cs
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -153,10 +154,10 @@ export default {
this.opacityParam = '';
this.colorParam = 'color';
this.opacityParam = 'opacity';
},
}
}
```
**Figure 2** Continuous animation effect
![en-us_image_0000001223287696](figures/en-us_image_0000001223287696.gif)
![en-us_image_0000001063148757](figures/en-us_image_0000001063148757.gif)
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或