+
```
```css
/* xxx.css */
-.container {
+.tutorial-page {
+ width: 750px;
+ height: 100%;
flex-direction: column;
- justify-content: center;
align-items: center;
- background-color: #ffffff;
+ justify-content: center;
}
-.customMarquee {
- width: 100%;
- height: 80px;
- padding: 10px;
- margin: 20px;
- border: 4px solid #ff8888;
- border-radius: 20px;
- font-size: 40px;
- color: #ff8888;
- font-weight: bolder;
- font-family: serif;
- background-color: #ffdddd;
+.marqueetext {
+ font-size: 37px;
}
-.content {
- flex-direction: row;
+.mymarquee {
+ margin-top: 20px;
+ width:100%;
+ height: 100px;
+ margin-left: 50px;
+ margin-right: 50px;
+ border: 1px solid #dc0f27;
+ border-radius: 15px;
+ align-items: center;
}
-.controlButton {
- flex-grow: 1;
- background-color: #F2F2F2;
- text-color: #0D81F2;
+button{
+ width: 200px;
+ height: 80px;
+ margin-top: 100px;
}
```
```js
// xxx.js
export default {
- data: {
- scrollAmount: 30,
- loop: 3,
- marqueeDir: 'left',
- marqueeCustomData: 'Custom marquee',
- },
- onMarqueeBounce: function() {
- console.log("onMarqueeBounce");
+ private: {
+ loopval: 1,
+ scroll: 8,
+ color1: 'red'
},
- onMarqueeStart: function() {
- console.log("onMarqueeStart");
+ onInit(){
},
- onMarqueeFinish: function() {
- console.log("onMarqueeFinish");
+ setfinish(e) {
+ this.loopval= this.loopval + 1,
+ this.r = Math.floor(Math.random()*255),
+ this.g = Math.floor(Math.random()*255),
+ this.b = Math.floor(Math.random()*255),
+ this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)',
+ this.$element('testmarquee').start(),
+ this.loopval= this.loopval - 1
},
- onStartClick (evt) {
- this.$element('customMarquee').start();
+ makestart(e) {
+ this.$element('testmarquee').start()
},
- onStopClick (evt) {
- this.$element('customMarquee').stop();
+ makestop(e) {
+ this.$element('testmarquee').stop()
}
}
```
-
+
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md b/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md
index 426e227f9009c06b9e6c82f3344719c9d988e948..3f1ac6a278adeaea3059c930e3e5098fa8392374 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-picker-view.md
@@ -20,7 +20,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| type | string | text | No | Type of the scrollable selector, which cannot be changed dynamically. Available values are as follows:
+
+
+
+
+
- **text**: text selector.
- **time**: time selector.
- **date**: date selector.
- **datetime**: date and time selector.
- **multi-text**: multi-column text selector.| -Text selector (**type** is **text**) +### Text Selector | Name | Type | Default Value | Mandatory | Description | | --------------- | ------ | ---- | ---- | ---------------------------------------- | @@ -29,15 +29,15 @@ Text selector (**type** is **text**) | indicatorprefix | string | - | No | Prefix field added when a value is specified for the text selector. | | indicatorsuffix | string | - | No | Suffix field added when a value is specified for the text selector. | -Time selector (**type** is **time**) +### Time Selector | Name | Type | Default Value | Mandatory | Description | | ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- | | containsecond | boolean | false | No | Whether seconds are contained. | | selected | string | Current time | No | Default value of the time selector, in the format of HH:mm.
If seconds are contained, the format is HH:mm:ss.| -| hours | number | 241-4 | No | Time format used by the time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
Since API version 5, the default value is the most commonly-used hour format in the current locale.| +| hours | number | 241-4
-5+ | No | Time format used by the time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
Since API version 5, the default value is the most commonly-used hour format in the current locale.| -Date selector (**type** is **date**) +### Date Selector | Name | Type | Default Value | Mandatory | Description | | ------------------ | ------------ | ---------- | ---- | ---------------------------------------- | @@ -47,16 +47,16 @@ Date selector (**type** is **date**) | lunar5+ | boolean | false | No | Whether the pop-up window displays the lunar calendar. | | lunarswitch | boolean | false | No | Whether to display the lunar calendar switch in the date selector. When this switch is displayed, the user can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar.| -Date and time selector (**type** is **datetime**) +### Date and Time Selector | Name | Type | Default Value | Mandatory | Description | | ------------------ | ------- | ----------------------------------- | ---- | ---------------------------------------- | | selected | string | Current date and time | No | Default value of the date and time selector. The value can be in the format of MM-DD-HH-mm or YYYY-MM-DD-HH-mm. If the year is not set, the current year is used by default. The value you set is the date selected by default in the pop-up window.| -| hours | number | 241-4 | No | Time format used by the date and time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
Since API version 5, the default value is the most commonly-used hour format in the current locale.| +| hours | number | 241-4
-5+ | No | Time format used by the date and time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
Since API version 5, the default value is the most commonly-used hour format in the current locale.| | lunar5+ | boolean | false | No | Whether the pop-up window displays the lunar calendar. | | lunarswitch | boolean | false | No | Whether to display the lunar calendar switch in the date and time selector. When this switch is displayed, the user can switch between the lunar calendar and Gregorian calendar. Turn on the switch to display the lunar calendar, and turn off the switch to hide the lunar calendar.| -Multi-column text selector (**type** is **multi-text**) +### Multi-Column Text Selector | Name | Type | Default Value | Mandatory | Description | | -------- | ------- | --------- | ---- | ---------------------------------------- | @@ -77,42 +77,42 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md | selected-font-size | <length> | 20px | No | Font size of the selected item. The value is of the length type, in pixels. | | disappear-color5+ | <color> | \#ffffff | No | Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | | disappear-font-size5+ | <length> | 14px | No | Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | -| font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.| +| font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. | ## Events The following events are supported. -Text selector (**type** is **text**) +### Text Selector | Name | Parameter | Description | | ------ | ---------------------------------------- | --------------- | -| change | { newValue: newValue, newSelected: newSelected } | Triggered when a value is specified for the text selector.| +| change | { newValue: newValue, newSelected: newSelected } | Triggered when a value is specified for the text selector.| -Time selector (**type** is **time**) +### Time Selector | Name | Parameter | Description | | ------ | ---------------------------------------- | ------------------------------- | -| change | { hour: hour, minute: minute, [second:second]} | Triggered when a value is specified for the time selector.
If seconds are contained, the value contains hour, minute, and second.| +| change | { hour: hour, minute: minute, [second:second]} | Triggered when a value is specified for the time selector.
If seconds are contained, the value contains hour, minute, and second.| -Date selector (**type** is **date**) +### Date Selector | Name | Parameter | Description | | ------ | ---------------------------------------- | --------------- | -| change | { year:year, month:month, day:day } | Triggered when a value is specified for the date selector.| +| change | { year:year, month:month, day:day } | Triggered when a value is specified for the date selector.| -Date and time selector (**type** is **datetime**) +### Date and Time Selector | Name | Parameter | Description | | ------ | ---------------------------------------- | ----------------- | -| change | { year:year, month:month, day:day, hour:hour, minute:minute } | Triggered when a value is specified for the date and time selector.| +| change | { year:year, month:month, day:day, hour:hour, minute:minute } | Triggered when a value is specified for the date and time selector.| -Multi-text selector (**type** is **multi-text**) +### Multi-Column Text Selector | Name | Parameter | Description | | ------------ | ---------------------------------------- | ---------------------------------------- | -| columnchange | { column:column, newValue:newValue, newSelected:newSelected } | Triggered when the value of a column in the multi-column selector changes.
**column**: column whose value has changed.
**newValue**: selected value.
**newSelected**: index of the selected value.| +| columnchange | { column:column, newValue:newValue, newSelected:newSelected } | Triggered when the value of a column in the multi-column selector changes.
**column**: column whose value has changed.
**newValue**: selected value.
**newSelected**: index of the selected value.| ## Methods @@ -121,67 +121,252 @@ Not supported ## Example - -```html - -
-
- Selected: {{time}}
-
-
-```
-
-```css
-/* xxx.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
- left: 0px;
- top: 0px;
- width: 454px;
- height: 454px;
-}
-.title {
- font-size: 30px;
- text-align: center;
-}
-.time-picker {
- width: 500px;
- height: 400px;
- margin-top: 20px;
-}
-```
-
-```js
-/* xxx.js */
-export default {
- data: {
- defaultTime: "",
- time: "",
- },
- onInit() {
- this.defaultTime = this.now();
- },
- handleChange(data) {
- this.time = this.concat(data.hour, data.minute);
- },
- now() {
- const date = new Date();
- const hours = date.getHours();
- const minutes = date.getMinutes();
- return this.concat(hours, minutes);
- },
-
- fill(value) {
- return (value > 9 ? "" : "0") + value;
- },
-
- concat(hours, minutes) {
- return `${this.fill(hours)}:${this.fill(minutes)}`;
- },
-}
-```
-
-
+1. Text Selector
+ ```html
+
+
+
+ Selected value: {{value}} Selected index: {{index}}
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ margin-top: 20px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ options: ['Option 1','Option 2','Option 3'],
+ value: "Option 1",
+ index: 0
+ },
+ handleChange(data) {
+ this.value = data.newValue;
+ this.index = data.newSelected;
+ },
+ }
+ ```
+ 
+
+2. Time Selector
+ ```html
+
+
+
+ Selected: {{time}}
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ }
+ .time-picker {
+ width: 500px;
+ height: 400px;
+ margin-top: 20px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ defaultTime: "",
+ time: "",
+ },
+ onInit() {
+ this.defaultTime = this.now();
+ },
+ handleChange(data) {
+ this.time = this.concat(data.hour, data.minute);
+ },
+ now() {
+ const date = new Date();
+ const hours = date.getHours();
+ const minutes = date.getMinutes();
+ return this.concat(hours, minutes);
+ },
+ fill(value) {
+ return (value > 9 ? "" : "0") + value;
+ },
+ concat(hours, minutes) {
+ return `${this.fill(hours)}:${this.fill(minutes)}`;
+ },
+ }
+ ```
+
+ 
+
+3. Date Selector
+ ```html
+
+
+
+ Selected: {{time}}
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 454px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ margin-top: 20px;
+ }
+ .date-picker {
+ width: 500px;
+ height: 400px;
+ margin-top: 50px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ date: "",
+ },
+ handleChange(data) {
+ this.date = data.year + "" + data.month + "" + data.day + "";
+ },
+ }
+ ```
+
+
+4. Date and Time Selector
+ ```html
+
+
+
+ Selected: {{datetime}}
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 500px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ margin-top: 20px;
+ }
+ .date-picker {
+ width: 500px;
+ height: 400px;
+ margin-top: 50px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ datetime: "",
+ },
+ handleChange(data) {
+ this.datetime = data.year + "" + data.month + "" + data.day + "" + data.hour + "" + data.minute + "";
+ },
+ }
+ ```
+
+
+5. Multi-Column Text Selector
+
+ ```html
+
+
+
+ Selected: {{ value }}
+
+
+ ```
+
+ ```css
+ /* xxx.css */
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ left: 0px;
+ top: 0px;
+ width: 500px;
+ height: 454px;
+ }
+ .title {
+ font-size: 30px;
+ text-align: center;
+ margin-top: 20px;
+ }
+ ```
+
+ ```js
+ /* xxx.js */
+ export default {
+ data: {
+ multitext: [
+ [1, 2, 3],
+ [4, 5, 6],
+ [7, 8, 9],
+ ],
+ value: ""
+ },
+ handleChange(data) {
+ this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected;
+ },
+ }
+ ```
+ 
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-picker.md b/en/application-dev/reference/arkui-js/js-components-basic-picker.md
index f6425d937129086d130562d8454da03bcaef3c87..5a9ace889f60ae6f6c0c891e8d0a8d55b3dadfd1 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-picker.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-picker.md
@@ -58,7 +58,7 @@ When **type** is set to **time**, a time selector is used.
| Name | Type | Default Value | Mandatory | Description |
| ------------- | ------- | ----------------------------------- | ---- | ---------------------------------------- |
| containsecond | boolean | false | No | Whether seconds are contained. |
-| selected | string | Current time | No | Default value of the time selector, in format of HH:mm. If seconds are contained, the format is HH:mm:ss. |
+| selected | string | Current time | No | Default value of the time selector, in format of HH:mm. If seconds are contained, the format is HH:mm:ss.| | value | string | - | No | Value of the time selector. | | hours | number | 241-4
-5+ | No | Time format used by the time selector. Available values are as follows:
- **12**: displayed in 12-hour format and distinguished by a.m. and p.m.
- **24**: displayed in 24-hour format.
Since API version 5, the default value is the most commonly-used hour format in the current locale.| @@ -166,52 +166,59 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ```html
-
+
```
```css
/* xxx.css */
-.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
+.container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
- picker{
- width:60%;
- height:80px;
- border-radius:20px;
- text-color:white;
- font-size:15px;
- background-color:#4747e3;
- margin-left:20%;
+
+picker {
+ width: 60%;
+ height: 80px;
+ border-radius: 20px;
+ text-color: white;
+ font-size: 15px;
+ background-color: #4747e3;
+ margin-left: 20%;
}
- select{
- background-color: #efecec;
- height: 50px;
- width: 60%;
- margin-left: 20%;
- margin-top: 300px;
- margin-bottom: 50px;
- font-size: 22px;
+
+select {
+ background-color: #efecec;
+ height: 50px;
+ width: 60%;
+ margin-left: 20%;
+ margin-top: 300px;
+ margin-bottom: 50px;
+ font-size: 22px;
}
```
@@ -219,72 +226,96 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
// xxx.js
import router from '@system.router';
import prompt from '@system.prompt';
+
export default {
- data: {
- selectList:["text","data","time","datetime","multitext"],
- rangetext:['15', "20", "25"],
- multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
- textvalue:'default textvalue',
- datevalue:'default datevalue',
- timevalue:'default timevalue',
- datetimevalue:'default datetimevalue',
- multitextvalue:'default multitextvalue',
- containsecond:true,
- multitextselect:[1,2,0],
- datetimeselect:'2012-5-6-11-25',
- timeselect:'11:22:30',
- dateselect:'2021-3-2',
- textselect:'2'
- },
- selectChange(e){
- for(let i = 0;iIf the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| | placeholder-color | <color> | \#99000000
| No | Color of the hint text. | -| font-weight | number \| string | normal | No | Font weight. For details, see **font-weight** of the **[\
- **outset**: The slider is on the sliding bar.
- **inset**: The slider is inside the sliding bar.| +| mode5+ | string | outset | No| Slider style. Available values are as follows:
- **outset**: The slider is on the slider track.
- **inset**: The slider is in the slider track.| | showsteps5+ | boolean | false | No| Whether to display slider scales.| | showtips5+ | boolean | false | No| Whether a tooltip is displayed to show the percentage value on the slider.| @@ -51,7 +51,7 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md | Attribute| Type| Description| | -------- | -------- | -------- | | value5+ | number | Current value of the slider.| -| mode5+ | string | Type of the change event. Available values are as follows:
- **start**: The **value** starts to change.
- **move**: The **value** is changing with users' dragging.
- **end**: The **value** stops changing.| +| mode5+ | string | Type of the change event. Available values are as follows:
- **start**: The **value** starts to change.
- **move**: The **value** is changing with users' dragging.
- **end**: The **value** stops changing.
- **click**: The **value** changes upon a touch on the slider.| ## Example @@ -59,48 +59,23 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md ```html
- slider start value is {{startValue}}
- slider current value is {{currentValue}}
- slider end value is {{endValue}}
-
```
```css
/* xxx.css */
.container {
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
}
-```
-
-```js
-// xxx.js
-export default {
- data: {
- value: 0,
- startValue: 0,
- currentValue: 0,
- endValue: 0,
- },
- setvalue(e) {
- if (e.mode == "start") {
- this.value = e.value;
- this.startValue = e.value;
- } else if (e.mode == "move") {
- this.value = e.value;
- this.currentValue = e.value;
- } else if (e.mode == "end") {
- this.value = e.value;
- this.endValue = e.value;
- } else if (e.mode == "click) {
- this.value = e.value;
- this.currentValue = e.value;
- }
- }
+slider{
+ margin-top: 100px;
}
```
+
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-switch.md b/en/application-dev/reference/arkui-js/js-components-basic-switch.md
index f7cc8ddd86f2762c8b6a7e5e250e95f22e5c74ed..d58e16b10b6357537684c09f519caa537a469f5c 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-switch.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-switch.md
@@ -30,18 +30,20 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
## Styles
+
+
In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
-| Name | Type | Default Value | Mandatory | Description |
-| ------------------- | -------------------------- | ---------- | ---- | ---------------------------------------- |
-| texton-color(Rich) | <color> | \#000000 | No | Text color displayed when the component is checked. |
-| textoff-color(Rich) | <color> | \#000000 | No | Text color displayed when the component is not checked. |
-| text-padding(Rich) | number | 0px | No | Distance between the two sides of the longest text in **texton** and **textoff** and the border of the slider. |
-| font-size(Rich) | <length> | - | No | Font size. This attribute is available only when **texton** and **textoff** are set. |
-| allow-scale(Rich) | boolean | true | No | Whether the font size changes with the system's font size settings.If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| -| font-style(Rich) | string | normal | No | Font style. This attribute is available only when **texton** and **textoff** are set. For details, see **font-style** of the [**\
If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart.| +| font-style | string | normal | No | Font style. This attribute is available only when **texton** and **textoff** are set. For details, see [font-style](../arkui-js/js-components-basic-text.md#styles) of the **\
-
-
+
+
+
+
+
+
```
```css
/* xxx.css */
.container {
- display: flex;
- justify-content: center;
- align-items: center;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.switch {
+ texton-color: red;
+ textoff-color: forestgreen;
}
-switch{
- texton-color:#002aff;
- textoff-color:silver;
- text-padding:20px;
+.text {
+ text-padding: 20px;
+ font-size: 30px;
+ font-weight: 700;
}
```
```js
// xxx.js
-import prompt from '@system.prompt';
+import promptAction from '@ohos.promptAction';
export default {
- data: {
- title: 'World'
- },
- switchChange(e){
- console.log(e.checked);
- if(e.checked){
- prompt.showToast({
- message: "Switch on."
- });
- }else{
- prompt.showToast({
- message: "Switch off."
- });
+ data: {
+ title: 'World'
+ },
+ switchChange(e) {
+ if (e.checked) {
+ promptAction.showToast({
+ message: "Switch on."
+ });
+ } else {
+ promptAction.showToast({
+ message: "Switch off."
+ });
+ }
+ },
+ normalswitchChange(e) {
+ if (e.checked) {
+ promptAction.showToast({
+ message: "switch on"
+ });
+ } else {
+ promptAction.showToast({
+ message: "switch off"
+ });
+ }
}
- }
}
```
-
+
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-text.md b/en/application-dev/reference/arkui-js/js-components-basic-text.md
index c9f0227a6b0f5c684557206d36b84ed722c22c2e..2509a3a6bcc556e19d1393ed80acad3d28c91fb4 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-text.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-text.md
@@ -15,7 +15,7 @@ None
## Child Components
-Only the **[\](../arkui-js/js-components-basic-span.md)** component is supported.
+The **[\](../arkui-js/js-components-basic-span.md)** child component is supported.
## Attributes
@@ -34,19 +34,19 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.| | letter-spacing | <length> | 0px | No | Character spacing (px). | | word-spacing7+ | <length> \| <percentage> \| string | normal | No | Spacing between texts. If the input is a string, the options are as follows:
**normal**: default spacing.| -| font-style | string | normal | No | Font style. Available values are as follows:
- **normal**: standard font style
- **italic**: italic font style| -| font-weight | number \| string | normal | No | Font width. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a larger font width. The value of the number type must be an integer multiple of 100.
The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.| +| font-style | string | normal | No | Font style. Available values are as follows:
- **normal**: standard font style.
- **italic**: italic font style.| +| font-weight | number \| string | normal | No | Font weight. For the number type, the value ranges from 100 to 900. The default value is 400. A larger value indicates a heavier font weight. The value of the number type must be an integer multiple of 100.
The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**.| | text-decoration | string | none | No | Text decoration. Available values are as follows:
- **underline**: An underline is used.
- **line-through**: A strikethrough is used.
- **none**: The standard text is used.| | text-decoration-color7+ | <color> | - | No | Color of the text decoration. | | text-align | string | start
| No | Text alignment mode. Available values are as follows:
- **left**: The text is left-aligned.
- **center**: The text is center-aligned.
- **right**: The text is right-aligned.
- **start**: The text is aligned with the direction in which the text is written.
- **end**: The text is aligned with the opposite direction in which the text is written.
If the text width is not specified, the alignment effect may not be obvious when the text width is the same as the width of the parent container.| -| line-height | <length> \| <percentage>7+ \| string7+ | 0px1-6
normal7+ | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. The value of the string type is as follows:
**normal**7+: default line height | +| line-height | <length> \| <percentage>7+ \| string7+ | 0px1-6
normal7+ | No | Text line height. When this parameter is set to **0px**, the text line height is not limited and the font size is adaptive. The value of the string type is as follows:
**normal**7+: default line height| | text-overflow | string | clip | No | Display mode when the text is too long. This style takes effect when the maximum number of lines is specified. Available values are as follows:
- **clip**: The text is clipped and displayed based on the size of the parent container.
- **ellipsis**: The text is displayed based on the size of the parent container. The text that cannot be displayed is replaced with ellipsis. This style must be used together with **max-lines**.| | font-family | string | sans-serif | No | Font family, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.| -| max-lines | number \| string7+ | - | No | Maximum number of text lines. The value of the string type is as follows:
- **auto**7+: The number of text lines adapts to the container height. | +| max-lines | number \| string7+ | - | No | Maximum number of text lines. The value of the string type is as follows:
- **auto**7+: The number of text lines adapts to the container height.| | min-font-size | <length> | - | No | Minimum font size in the text. This style must be used together with **max-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| | max-font-size | <length> | - | No | Maximum font size in the text. This style must be used together with **min-font-size**. The font size can be changed dynamically. After the maximum and minimum font sizes are set, **font-size** does not take effect.| | font-size-step | <length> | 1px | No | Step for dynamically adjusting the font size in the text. The minimum and maximum font sizes must be set. | -| prefer-font-sizes | <array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.
Example values: **12px,14px,16px**| +| prefer-font-sizes | <array> | - | No | Preset preferred font sizes. For dynamic font size adjustment, the preset sizes are used to match the maximum number of lines in the text. If the preferred font sizes were not set, the font size will be adjusted based on the maximum and minimum font sizes and the step you have set. If the maximum number of lines in the text cannot be met, **text-overflow** is used to truncate the text. If this parameter is set, **font-size**, **max-font-size**, **min-font-size**, and **font-size-step** do not take effect.
Example: prefer-font-sizes: 12px,14px,16px| | word-break6+ | string | normal | No | Text line breaking mode. The options are as follows:
- **normal**: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.
- **break-all**: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.
- **break-word**: Works in the same way as **break-all**, except that it does not break unbreakable words.| | text-indent7+ | <length> | - | No | Indentation of the first line. | | white-space7+ | string | pre | No | Mode for processing blanks in the component. The options are as follows:
- **normal**: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.
- **nowrap**: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.
- **pre**: All contents are output as-is.
- **pre-wrap**: All contents are output as-is with line breaks.
- **pre-line**: All spaces and tabs are combined into one space, the carriage return remains unchanged, and the text is wrapped.| @@ -76,84 +76,65 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support ## Example - +1. ```html
- default text
+ hello world with color
+ hello world with font-size
+ hello world with letter-spacing
+ hello world with word-spacing
+ hello world with italic
+ hello world with font-weight
+ hello world with underline
+ hello world with line-through
+ hello world with text-align:right
```
```css
/* xxx.css */
.container {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-.content{
- width: 400px;
- height: 400px;
- border: 20px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
}
.title {
- font-size: 80px;
- text-align: center;
- width: 400px;
- height: 400px;
+ text-align: center;
+ width: 800px;
+ height: 60px;
}
-```
-
-```js
-// xxx.js
-export default {
- data: {
- title: 'World'
- }
+.textcolor {
+ color: indianred;
}
-```
-
-
-
-```html
-
-
-
- Hello {{ title }}
-
-
+
-
- This is a passage
-
-
- This is a passage
-
-
-```
-
-```css
-/* xxx.css */
-.container {
- flex-direction: column;
- align-items: center;
- background-color: #F1F3F5;
- justify-content: center;
+.textsize {
+ font-size: 40px;
+}
+.textletterspacing {
+ letter-spacing: -3px;
}
-.text1{
- word-spacing: 10px;
- adapt-height: true;
+.textwordspacing {
+ word-spacing: 20px;
}
-.text2{
- width: 200px;
- max-lines: 1;
- text-overflow: ellipsis;
- text-valign: middle;
- line-height: 40px;
- text-decoration: underline;
- text-decoration-color: red;
- text-indent: 20px;
- white-space: pre;
+.textstyle {
+ font-style: italic;
+}
+.textweight {
+ font-weight: 700;
+}
+.textdecoration1 {
+ text-decoration: underline;
+}
+.textdecoration2 {
+ text-decoration: line-through;
+ text-decoration-color: red;
+}
+.textalign {
+ text-align: right;
}
```
-
+
+
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
index 9bc724d26a7610fa4b7fdbd48b21811a2f472cf2..125067139d62be03f2a19995e9181df6010a1f77 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md
@@ -25,19 +25,21 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
-
```
```js
// xxx.js
export default {
- handleClick() {
+ onShow() {
const el =this.$refs.canvas;
- const ctx =el.getContext('2d');
- const gradient = ctx.createLinearGradient(0,0,100,0);
- gradient.addColorStop(0,'#00ffff');
- gradient.addColorStop(1,'#ffff00');
+ const ctx = el.getContext('2d');
+ const gradient = ctx.createLinearGradient(50,0,300,100);
+ gradient.addColorStop(0.0, 'red')
+ gradient.addColorStop(0.5, 'white')
+ gradient.addColorStop(1.0, 'green')
+ ctx.fillStyle = gradient
+ ctx.fillRect(0, 0, 300, 300)
}
}
```
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
index 4100f9429985f1df7dd1e52087c842f128496226..0ebefab7d190de7f8ca8bd76b570444c0a2aa70b 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
@@ -2,7 +2,7 @@
> **NOTE**
>
-> Supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
+> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
**CanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on a canvas.
@@ -426,9 +426,9 @@ export default {
}
```
-
+ 
-In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing.
+ In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing.
### shadowBlur
@@ -585,7 +585,7 @@ Fills a rectangle on the canvas.
```html
-
+
```
@@ -621,7 +621,7 @@ Clears the content in a rectangle on the canvas.
```html
-
+
```
@@ -984,7 +984,7 @@ Creates a pattern for image filling based on a specified source image and repeti
```html
-
+
```
@@ -998,7 +998,7 @@ Creates a pattern for image filling based on a specified source image and repeti
img.src = 'common/images/example.jpg';
var pat = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pat;
- ctx.fillRect(0, 0, 20, 20);
+ ctx.fillRect(0, 0, 500, 500);
}
}
```
@@ -1429,7 +1429,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
setTransform(scaleX: number, skewX: number, skewY: number, scale: number, translateX: number, translateY: number): void
-Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** function.
+Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform()** API.
**Parameters**
@@ -1574,7 +1574,7 @@ Draws an image on the canvas.
```html
-
+
```
@@ -1582,11 +1582,11 @@ Draws an image on the canvas.
//xxx.js
export default {
onShow() {
- var test = this.$element('drawImage');
+ var test = this.$refs.canvas;
var ctx = test.getContext('2d');
var img = new Image();
img.src = 'common/image/test.jpg';
- ctx.drawImage(img, 50, 80, 80, 80);
+ ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 200);
}
}
```
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md
index f5f4179442862246d1c3171dde95879efbe4c532..c2ca3f82172d1b3a7c7b6a5a2d5423d9ecc3aabd 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md
@@ -65,7 +65,7 @@ Sets the path transformation matrix.
```html
-
+
```
@@ -95,7 +95,7 @@ Moves the current point of the path back to the start point of the path, and dra
```html
-
+
```
@@ -223,7 +223,7 @@ Draws a cubic bezier curve on the canvas.
```html
-
+
```
@@ -264,7 +264,7 @@ Draws a quadratic curve on the canvas.
```html
-
+
```
@@ -307,7 +307,7 @@ Draws an arc on the canvas.
```html
-
+
```
@@ -348,7 +348,7 @@ Draws an arc based on the radius and points on the arc.
```html
-
+
```
diff --git a/en/application-dev/reference/arkui-js/js-components-container-list.md b/en/application-dev/reference/arkui-js/js-components-container-list.md
index 640c6c420ce81d299b7d12a1b67cca42b543ea1b..793e037c599b70a09ef595d9ee969823f137917e 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-list.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-list.md
@@ -72,7 +72,7 @@ In addition to the [universal events](../arkui-js/js-components-common-events.md
| scrollend | - | Triggered when the list stops scrolling. |
| scrolltouchup | - | Triggered when the list continues scrolling after the user lifts their fingers. |
| requestitem | - | Triggered for a request to create a list-item.This event is triggered when the number of cached list-items outside the visible area is less than the value of **cachedcount** during long list loading with delay.| -| rotate7+ | { rotateValue: number } | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. | +| rotation7+ | { rotateValue: number } | Triggered to indicate the incremental value of the rotation angle of the watch crown. This parameter is only supported by wearables. | ## Methods @@ -112,22 +112,6 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.