Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
提交 75c6681c 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (10132) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 accb18c5
展开全部 显示空白变更内容
内联 并排
Showing with 951 addition and 769 deletion
en/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ 75c6681c
# image # image
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<image>** component is used to render and display images. The **\<image>** component is used to render and display images.
## Child Component
Not supported ## Child Components
## Attributes Not supported
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| ---- | ------ | ------------- | --------- | ------------------------------------------------------------ | | ---- | ------ | ---- | ---- | ---------------------------------------- |
| src | string | - | No | Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.Base64 string6+ is supported. The format is data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data],, where [base64 data] is a Base64 string.The path prefix of **dataability://** is supported, which allows access to the image path provided by the Data ability. | | src | string | - | No | Image path, which supports local paths. The supported image formats include PNG, JPG, BMP, SVG, and GIF.<br>- The Base64 string<sup>6+</sup> is supported in the following format: data:image/[png \| jpeg \| bmp \| webp];base64, [base64 data], where **[base64 data]** is a Base64 string.<br>- The path prefix of **dataability://** is supported, which allows access to the image path provided by the Data ability.<sup>6+</sup>|
| alt | string | - | No | Placeholder image displayed during image loading. | | alt | string | - | No | Alternative information for the image, which is displayed during image loading. |
## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following style attributes are supported.
## 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 | | Name | Type | Default Value | Mandatory | Description |
| -------------------- | ------- | ------------- | --------- | ------------------------------------------------------------ | | ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- |
| object-fit | string | cover | No | Image scale type. For details about available values, see [Types of the object-fit style](js-components-basic-image.md). The SVG format is not supported. | | object-fit | string | cover | No | Image scale type. This style is not supported for SVG images. For details about available values, see **object-fit**.|
| match-text-direction | boolean | false | No | Whether image orientation changes with the text direction. The SVG format is not supported. | | match-text-direction | boolean | false | No | Whether image orientation changes with the text direction. This style is not supported for SVG images. |
| fit-original-size | boolean | false | No | Whether the **\<image>** component adapts to the image source size when the width and height are not set. If this attribute is set to **true**, the **object-fit** attribute does not take effect. SVG images do not support this attribute. | | fit-original-size | boolean | false | No | Whether the **\<image>** component adapts to the image source size when its width and height are not set. If this style is set to **true**, **object-fit** will not take effect. This style is not supported for SVG images.|
| object-position7+ | string | 0px 0px | No | Position of an image in the component.There are two setting types:1. Pixels. For example, **15px 15px** indicates the moving position along the x-axis or y-axis.2. Characters. Optional values are as follows:<br>-**left**: The image is displayed on the left of the component.<br>-**top** The image is displayed on the top of the component.<br>-**right** The image is displayed on the right of the component.<br>-**bottom** The image is displayed at the bottom of the component. | | object-position<sup>7+</sup> | string | 0px 0px | No | Position of an image in the component.<br>The options are as follows:<br>1. Pixels. For example, **15px 15px** indicates the moving position along the x-axis or y-axis.<br>2. Characters. Optional values are as follows:<br>- **left**: The image is displayed on the left of the component.<br>- **top** The image is displayed on the top of the component.<br>- **right** The image is displayed on the right of the component.<br>- **bottom** The image is displayed at the bottom of the component.|
**Table 1** Types of the object-fit style
**Table 1** object-fit
| Type | Description | | Type | Description |
| ---------- | ------------------------------------------------------------ | | ---------- | ------------------------------------ |
| cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle. | | cover | The image is scaled with its aspect ratio retained for both sides to be greater than or equal to the display boundaries and displayed in the middle.|
| contain | The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle. | | contain | The image is scaled with the aspect ratio retained for the image to be completely displayed within the display boundaries and displayed in the middle. |
| fill | The image is resized to fill the display area and its aspect ratio is not retained. | | fill | The image is scaled to fill the display area, and its aspect ratio is not retained. |
| none | The image is displayed in the middle with its aspect ratio and size retained. | | none | The image is displayed in the middle with its aspect ratio and size retained. |
| scale-down | The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size. | | scale-down | The image is displayed in the middle with its aspect ratio retained. The size is equal to or smaller than the original size. |
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** When using an SVG image, note that: > **NOTE**
>
> When using an SVG image, note that:
> >
> - The SVG image will not be drawn if the length or width of the **\<image>** component is infinity. > - The SVG image will not be drawn if the length or width of the **\<image>** component is infinity.
> - If the image length and width are not specified in the SVG description, the SVG fills the **\<image>** component area. >
> - If the image length and width are not specified in the SVG description, the SVG image fills the **\<image>** component area.
>
> - If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect: > - If the image length and width are specified in the SVG description, the following rules are adopted to decide the final display effect:
> >
> 1. If the **\<image>** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component. > 1. If the **\<image>** component is too small to afford the SVG image, the SVG image is cropped and only its upper left part is displayed in the component.
>
> 2. If the **\<image>** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component. > 2. If the **\<image>** component is big enough to afford the SVG image, this SVG image is displayed in the upper left corner of the component.
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description | | Name | Parameter | Description |
| -------------- | -------------------------------- | ------------------------------------------------------------ | | -------------- | ---------------------------------------- | ------------------------- |
| complete(Rich) | { width: width, height: height } | Triggered when an image is successfully loaded. The loaded image is returned. | | complete(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an image is successfully loaded. The loaded image size is returned.|
| error(Rich) | { width: width, height: height } | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. | | error(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an exception occurs during image loading. In this case, the width and height are **0**. |
## Methods ## Methods
Methods in [Universal Methods](js-components-common-methods.md) are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example Code
``` ## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red; "> <image src="common/images/example.png" style="width: 300px; height: 300px; object-fit:{{fit}}; object-position: center center; border: 1px solid red;">
</image> </image>
<select class="selects" onchange="change_fit"> <select class="selects" onchange="change_fit"><option for="{{fits}}" value="{{$item}}">{{$item}}</option></select>
<option for="{{fits}}" value="{{$item}}">{{$item}}</option>
</select>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
} }
.selects{ .selects{
margin-top: 20px; margin-top: 20px;
...@@ -91,6 +96,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -91,6 +96,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
border:1px solid #808080; border:1px solid #808080;
border-radius: 10px; border-radius: 10px;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -103,4 +111,4 @@ export default { ...@@ -103,4 +111,4 @@ export default {
} }
``` ```
![img](figures/example.gif) ![example](figures/example.gif)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ 75c6681c
...@@ -65,72 +65,77 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -65,72 +65,77 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="tutorial-page">
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}" <div class="mymarquee">
onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee> <marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
<div class="content"> id="testmarquee" onfinish="setfinish">
<button class="controlButton" onclick="onStartClick">Start</button> Life is a journey, not the destination.
<button class="controlButton" onclick="onStopClick">Stop</button> </marquee>
</div>
<div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
<button onclick="makestart" value="start"></button>
<button onclick="makestop" value="stop"></button>
</div> </div>
</div> </div>
``` ```
```css ```css
/* xxx.css */ /* xxx.css */
.container { .tutorial-page {
width: 750px;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center;
align-items: center; align-items: center;
background-color: #ffffff; justify-content: center;
} }
.customMarquee { .marqueetext {
width: 100%; font-size: 37px;
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;
} }
.content { .mymarquee {
flex-direction: row; margin-top: 20px;
width:100%;
height: 100px;
margin-left: 50px;
margin-right: 50px;
border: 1px solid #dc0f27;
border-radius: 15px;
align-items: center;
} }
.controlButton { button{
flex-grow: 1; width: 200px;
background-color: #F2F2F2; height: 80px;
text-color: #0D81F2; margin-top: 100px;
} }
``` ```
```js ```js
// xxx.js // xxx.js
export default { export default {
data: { private: {
scrollAmount: 30, loopval: 1,
loop: 3, scroll: 8,
marqueeDir: 'left', color1: 'red'
marqueeCustomData: 'Custom marquee',
},
onMarqueeBounce: function() {
console.log("onMarqueeBounce");
}, },
onMarqueeStart: function() { onInit(){
console.log("onMarqueeStart");
}, },
onMarqueeFinish: function() { setfinish(e) {
console.log("onMarqueeFinish"); 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) { makestart(e) {
this.$element('customMarquee').start(); this.$element('testmarquee').start()
}, },
onStopClick (evt) { makestop(e) {
this.$element('customMarquee').stop(); this.$element('testmarquee').stop()
} }
} }
``` ```
![lite_bar](figures/lite_bar.gif) ![en-us_image_0000001176075554](figures/en-us_image_0000001176075554.gif)
en/application-dev/reference/arkui-js/js-components-basic-picker.md
浏览文件 @ 75c6681c
...@@ -171,19 +171,24 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -171,19 +171,24 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
{{ item }} {{ item }}
</option> </option>
</select> </select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange" <picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
oncancel="textoncancel" class="pickertext"></picker> onchange="textonchange"
oncancel="textoncancel" class="pickertext" show="false"></picker>
<picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true" <picker id="picker1" type="date" value="{{ datevalue }}" start="2002-2-5" end="2030-6-5" selected="{{ dateselect }}"
lunarswitch="true"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker> onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
<picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12" <picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
selected="{{ timeselect }}" hours="12"
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker> onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true" <picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker> onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}" <picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
selected="{{ multitextselect }}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker> onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</div> </div>
``` ```
...@@ -195,16 +200,18 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -195,16 +200,18 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
picker{
width:60%; picker {
height:80px; width: 60%;
border-radius:20px; height: 80px;
text-color:white; border-radius: 20px;
font-size:15px; text-color: white;
background-color:#4747e3; font-size: 15px;
margin-left:20%; background-color: #4747e3;
margin-left: 20%;
} }
select{
select {
background-color: #efecec; background-color: #efecec;
height: 50px; height: 50px;
width: 60%; width: 60%;
...@@ -219,68 +226,92 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods. ...@@ -219,68 +226,92 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
// xxx.js // xxx.js
import router from '@system.router'; import router from '@system.router';
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
data: { data: {
selectList:["text","data","time","datetime","multitext"], selectList: ["text", "data", "time", "datetime", "multitext"],
rangetext:['15', "20", "25"], rangetext: ['15', "20", "25"],
multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]], multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
textvalue:'default textvalue', textvalue: 'default textvalue',
datevalue:'default datevalue', datevalue: 'default datevalue',
timevalue:'default timevalue', timevalue: 'default timevalue',
datetimevalue:'default datetimevalue', datetimevalue: 'default datetimevalue',
multitextvalue:'default multitextvalue', multitextvalue: 'default multitextvalue',
containsecond:true, containsecond: true,
multitextselect:[1,2,0], multitextselect: [1, 2, 0],
datetimeselect:'2012-5-6-11-25', datetimeselect: '2012-5-6-11-25',
timeselect:'11:22:30', timeselect: '11:22:30',
dateselect:'2021-3-2', dateselect: '2021-3-2',
textselect:'2' textselect: '2'
}, },
selectChange(e){ selectChange(e) {
for(let i = 0;i<this.selectList.length;i++){ for (let i = 0;i < this.selectList.length; i++) {
if(e.newValue == this.selectList[i]){ if (e.newValue == this.selectList[i]) {
this.$element("picker"+i).show(); this.$element("picker" + i).show();
} }
} }
}, },
textonchange(e) { textonchange(e) {
this.textvalue = e.newValue; this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected }) prompt.showToast({
message: "text:" + e.newValue + ",newSelected:" + e.newSelected
})
}, },
textoncancel(e) { textoncancel(e) {
prompt.showToast({ message:"text: textoncancel" }) prompt.showToast({
message: "text: textoncancel"
})
}, },
dateonchange(e) { dateonchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day; this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day }) prompt.showToast({
message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
})
}, },
dateoncancel() { dateoncancel() {
prompt.showToast({ message:"date: dateoncancel" }) prompt.showToast({
message: "date: dateoncancel"
})
}, },
timeonchange(e) { timeonchange(e) {
if(this.containsecond){ if (this.containsecond) {
this.timevalue=e.hour+":"+e.minute+":"+e.second; this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second }) prompt.showToast({
message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
})
} else { } else {
this.timevalue=e.hour+":"+e.minute; this.timevalue = e.hour + ":" + e.minute;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute }) prompt.showToast({
}}, message: "Time:" + e.hour + ":" + e.minute
})
}
},
timeoncancel() { timeoncancel() {
prompt.showToast({ message:"timeoncancel" }) prompt.showToast({
message: "timeoncancel"
})
}, },
datetimeonchange(e) { datetimeonchange(e) {
this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute; this.datetimevalue = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute }) prompt.showToast({
message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute
})
}, },
datetimeoncancel() { datetimeoncancel() {
prompt.showToast({ message:"datetimeoncancel" }) prompt.showToast({
message: "datetimeoncancel"
})
}, },
multitextonchange(e) { multitextonchange(e) {
this.multitextvalue=e.newValue; this.multitextvalue = e.newValue;
prompt.showToast({ message:"Multi-column text change" + e.newValue }) prompt.showToast({
message: "Multi-column text change" + e.newValue
})
}, },
multitextoncancel() { multitextoncancel() {
prompt.showToast({ message:"multitextoncancel" }) prompt.showToast({
message: "multitextoncancel"
})
}, },
popup_picker() { popup_picker() {
this.$element("picker_text").show(); this.$element("picker_text").show();
......
en/application-dev/reference/arkui-js/js-components-basic-search.md
浏览文件 @ 75c6681c
# search # search
The **\<search>** component provides an input area for users to search. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Search>** component provides an input area for users to search.
## Child Components ## Child Components
Not supported Not supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory | Description |
| -------------- | --------------------------------------------------- | ------------- | --------- | ------------------------------------------------------------ | | ------------------------- | ----------------------- | ---- | ---- | --------------------------------- |
| icon | string | - | No | Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG. | | icon | string | - | No | Search icon. By default, the system search icon is used. The supported icon format is SVG, JPG, and PNG.|
| hint | string | - | No | Hint text. | | hint | string | - | No | Hint text. |
| value | string | - | No | Text in the search box. | | value | string | - | No | Text in the search box. |
| searchbutton5+ | string | - | No | Text on the search button at the end of the search box. | | searchbutton<sup>5+</sup> | string | - | No | Text on the search button at the end of the search box. |
| menuoptions5+ | Array\<[MenuOption](js-components-basic-search.md)> | - | No | Menu options displayed after users click the **More** button in the pop menu. | | menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | No | Menu options displayed after users click the **More** button. |
**Table 1** MenuOption5+
**Table 1** MenuOption<sup>5+</sup>
| Name | Type | Description | | Name | Type | Description |
| ------- | ------ | ----------------------------------- | | ------- | ------ | ----------- |
| icon | string | Path of the icon for a menu option. | | icon | string | Path of the icon for a menu option.|
| content | string | Text content in a menu option. | | content | string | Text content of a menu option.|
## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
## 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 | | Name | Type | Default Value | Mandatory | Description |
| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ | | ------------------------ | -------------------------- | --------------- | ---- | ---------------------------------------- |
| color | \<color> | #e6000000 | No | Font color of the search box. | | color | &lt;color&gt; | \#e6000000 | No | Font color of the search box. |
| font-size | \<length> | 16px | No | Font size of the search box. | | font-size | &lt;length&gt; | 16px | No | Font size of the search box. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br/>NOTE:<br/>If the **config-changes** tag of **fontSize** is configured for abilities in the **config.json** file, the setting takes effect without application restart. | | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>If 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. | | placeholder-color | &lt;color&gt; | \#99000000<br>| No | Color of the hint text. |
| font-weight | number \| string | normal | No | Font weight. For details, see [font-weight](js-components-basic-text.md) of the **text** component. | | font-weight | number \| string | normal | No | Font weight. For details, see **font-weight** of the **[\<text>](../arkui-js/js-components-basic-text.md#styles)** component.|
| 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 that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. | | 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.|
| caret-color6+ | \<color> | - | No | Color of the input cursor. | | caret-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the caret. |
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.
## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description | | Name | Parameter | Description |
| -------------- | ------------------------------------------ | ------------------------------------------------------------ | | ------------------------- | ---------------------------------------- | ---------------------------------------- |
| change | { text:newText } | Triggered when the content entered in the text box changes.<br/>NOTE:<br/>If you change the **value** attribute directly, this event will not be triggered. | | change | { text:newText } | Triggered when the content entered in the text box changes.<br>If you change the **value** attribute directly, this event will not be triggered. |
| submit | { text:submitText } | Triggered when users click the search icon or the search button5+, or tap the search button on a soft keyboard. | | submit | { text:submitText } | Triggered when users click the search icon or the search button<sup>5+</sup>, or tap the search button on a soft keyboard. |
| translate5+ | { value: selectedText } | Triggered when users click the translate button in the pop menu displayed after they select a text segment. The selected text content is returned. | | translate<sup>5+</sup> | { value: selectedText } | Triggered when users click the translate button in the menu displayed after they select a text segment. The selected text content is returned.|
| share5+ | { value: selectedText } | Triggered when users click the share button in the pop menu displayed after they select a text segment. The selected text content is returned. | | share<sup>5+</sup> | { value: selectedText } | Triggered when users click the share button in the menu displayed after they select a text segment. The selected text content is returned.|
| search5+ | { value: selectedText } | Triggered when users click the search button in the pop menu displayed after they select a text segment. The selected text content is returned. | | search<sup>5+</sup> | { value: selectedText } | Triggered when users click the search button in the menu displayed after they select a text segment. The selected text content is returned.|
| optionselect5+ | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the pop menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned. | | optionselect<sup>5+</sup> | { index:optionIndex, value: selectedText } | Triggered when users click a menu option in the menu displayed after they select a text segment. This event is valid only when the **menuoptions** attribute is set. The option index and selected text content are returned.|
## Methods ## Methods
Methods in [Universal Methods](js-components-common-methods.md) are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example Code
``` ## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<search hint="Enter keywords" searchbutton="Search" @search="search"> <search hint="Enter keywords" searchbutton="Search" @search="search">
</search> </search>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -80,4 +85,4 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -80,4 +85,4 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
} }
``` ```
![img](figures/en-us_image_0000001153427082.png) ![en-us_image_0000001153427082](figures/en-us_image_0000001153427082.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-basic-slider.md
浏览文件 @ 75c6681c
# slider # slider
The **\<slider>** component is used to quickly adjust settings, such as volume and brightness. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<Slider>** component is used to quickly adjust settings, such as the volume and brightness.
## Child Components ## Child Components
Not supported Not supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| min | number | 0 | No| Minimum value of the slider.|
| max | number | 100 | No| Maximum value of the slider.|
| step | number | 1 | No| Step of each slide.|
| value | number | 0 | No| Initial value of the slider.|
| mode<sup>5+</sup> | string | outset | No| Slider style. Available values are as follows:<br>- **outset**: The slider is on the sliding bar.<br>- **inset**: The slider is inside the sliding bar.|
| showsteps<sup>5+</sup> | boolean | false | No| Whether to display slider scales.|
| showtips<sup>5+</sup> | boolean | false | No| Whether a tooltip is displayed to show the percentage value on the slider.|
| Name | Type | Default Value | Mandatory | Description |
| ----------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
| min | number | 0 | No | Minimum value of the slider. |
| max | number | 100 | No | Maximum value of the slider. |
| step | number | 1 | No | Step of each slide. |
| value | number | 0 | No | Initial value of the slider. |
| mode5+ | string | outset | No | Slider style. Available values are as follows:<br/>-**outset**: The slider is on the sliding bar.<br/>-**inset**: The slider is inside the sliding bar. |
| showsteps5+ | boolean | false | No | Whether to display slider scales. |
| showtips5+ | boolean | false | No | Whether a pop-up is displayed to show the percentage value on the slider. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| color | &lt;color&gt; | #19000000 | No| Background color of the slider.|
| selected-color | &lt;color&gt; | #ff007dff | No| Selected color of the slider.|
| block-color | &lt;color&gt; | \#ffffff | No| Slider color.|
| Name | Type | Default Value | Mandatory | Description |
| -------------- | ------- | ------------- | --------- | ------------------------------- |
| color | \<color> | #19000000 | No | Background color of the slider. |
| selected-color | \<color> | #ff007dff | No | Selected color of the slider. |
| block-color | \<color> | #ffffff | No | Slider color. |
## Events ## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| Name | Parameter | Description | | -------- | -------- | -------- |
| ------ | -------------------------------------------- | --------------------------------- | | change | ChangeEvent | Triggered when the value changes.|
| change | [ChangeEvent](js-components-basic-slider.md) | Triggered when the value changes. |
**Table 1** ChangeEvent **Table 1** ChangeEvent
| Attribute| Type| Description|
| -------- | -------- | -------- |
| value<sup>5+</sup> | number | Current value of the slider.|
| mode<sup>5+</sup> | string | Type of the change event. Available values are as follows:<br>- **start**: The **value** starts to change.<br>- **move**: The **value** is changing with users' dragging.<br>- **end**: The **value** stops changing.|
| Attribute | Type | Description |
| ---------------------- | ------ | ------------------------------------------------------------ |
| progress(deprecated5+) | string | Current value of the slider. |
| isEnd(deprecated5+) | string | Whether the dragging operation ends. Available values are as follows:<br/>-**true**: The dragging ends.<br/>-**false**: The dragging is in progress. |
| value5+ | number | Current value of the slider. |
| mode5+ | string | Type of the change event. Available values are as follows:<br/>-**start**: The **value** starts to change.<br/>-**move**: The **value** is changing with users' dragging.<br/>-**end**: The **value** stops changing. |
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text>slider start value is {{startValue}}</text> <slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
<text>slider current value is {{currentValue}}</text> <slider class="" min="0" max="100" value="{{ value }}" step="20" mode="inset" showtips="true"></slider>
<text>slider end value is {{endValue}}</text> <slider class="" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset" showtips="false"></slider>
<slider min="0" max="100" value="{{value}}" onchange="setvalue" ></slider>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
// xxx.js slider{
export default { margin-top: 100px;
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;
}
}
} }
``` ```
![img](figures/slider.png)
\ No newline at end of file ![en-us_image_0000001173324709](figures/slider.png)
en/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 75c6681c
# text # text
The **\<text>** component is used to display a piece of textual information. > **NOTE**
>
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** > - This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
> >
> - The text content must be written in the content area. > - The text content must be written in the content area.
The **\<text>** component is used to display a piece of textual information.
## Required Permissions ## Required Permissions
None None
## Child Component
**\<[span](js-components-basic-span.md)>** is supported. ## Child Components
## Attributes Only the **[\<span>](../arkui-js/js-components-basic-span.md)** component is supported.
Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
## Styles ## Attributes
The [universal attributes](../arkui-js/js-components-common-attributes.md) are supported.
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
## 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 | | Name | Type | Default Value | Mandatory | Description |
| ----------------------- | ---------------------------------------- | -------------- | --------- | ------------------------------------------------------------ | | ---------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| color | \<color> | #e5000000 | No | Text color. | | color | &lt;color&gt; | #e5000000 | No | Font color. |
| font-size | \<length> | 30px | No | Font size (px). | | font-size | &lt;length&gt; | 30px | No | Font size. |
| allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br/>NOTE:<br/>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file. | | allow-scale | boolean | true | No | Whether the font size changes with the system's font size settings.<br>For details about how to make the configuration take effect dynamically, see the **config-changes** attribute in the **config.json** file.|
| letter-spacing | \<length> | 0 px | No | Character spacing (px). | | letter-spacing | &lt;length&gt; | 0px | No | Character spacing (px). |
| word-spacing7+ | \<length> \| \<percentage> \| string | normal | No | Spacing between texts. The options are as follows:**normal**: default spacing. | | word-spacing<sup>7+</sup> | &lt;length&gt; \| &lt;percentage&gt; \| string | normal | No | Spacing between texts. If the input is a string, the options are as follows:<br>**normal**: default spacing.|
| font-style | string | normal | No | Font style. Available values are as follows:<br/>-**normal**: standard font style<br/>-**italic**: italic font style | | font-style | string | normal | No | Font style. Available values are as follows:<br>- **normal**: standard font style<br>- **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.NOTE:The value must be an integer multiple of 100.The value of the string type can be **lighter**, **normal**, **bold**, or **bolder**. | | 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.<br>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:<br/>-**underline**: An underline is used.<br/>-**line-through**: A strikethrough is used.<br/>-**none**: The standard text is used. | | text-decoration | string | none | No | Text decoration. Available values are as follows:<br>- **underline**: An underline is used.<br>- **line-through**: A strikethrough is used.<br>- **none**: The standard text is used.|
| text-decoration-color7+ | \<color> | - | No | Color of the text decoration. | | text-decoration-color<sup>7+</sup> | &lt;color&gt; | - | No | Color of the text decoration. |
| text-align | string | start | No | Text alignment mode. Available values are as follows:<br/>-**left**: The text is left-aligned.<br/>-**center**: The text is center-aligned.<br/>-**right**: The text is right-aligned.<br/>-**start**: The text is aligned with the direction in which the text is written.<br/>-**end**: The text is aligned with the opposite direction in which the text is written.<br/>NOTE:<br/>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. | | text-align | string | start<br> | No | Text alignment mode. Available values are as follows:<br>- **left**: The text is left-aligned.<br>- **center**: The text is center-aligned.<br>- **right**: The text is right-aligned.<br>- **start**: The text is aligned with the direction in which the text is written.<br>- **end**: The text is aligned with the opposite direction in which the text is written.<br>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-6normal7+ | 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 **string** values are as follows:**normal**7+: default line height | | line-height | &lt;length&gt; \| &lt;percentage&gt;<sup>7+</sup> \| string<sup>7+</sup> | 0px<sup>1-6</sup><br>normal<sup>7+</sup> | 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:<br>**normal**<sup>7+</sup>: default line height |
| text-overflow | string | clip | No | Takes effect when the maximum number of lines is specified. Available values are as follows:<br/>-**clip**: The text is clipped and displayed based on the size of the parent container.<br/>-**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**. | | 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:<br>- **clip**: The text is clipped and displayed based on the size of the parent container.<br>- **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 that exists in the system or the font specified by [Custom Font Styles](js-components-common-customizing-font.md) in the family is selected as the font for the text. | | 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 **string** values are as follows:<br/>-**auto**7+: The number of text lines adapts to the container height. | | max-lines | number \| string<sup>7+</sup> | - | No | Maximum number of text lines. The value of the string type is as follows:<br>- **auto**<sup>7+</sup>: 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. | | min-font-size | &lt;length&gt; | - | 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. | | max-font-size | &lt;length&gt; | - | 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. | | font-size-step | &lt;length&gt; | 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 | &lt;array&gt; | - | 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.<br>Example values: **12px,14px,16px**|
| word-break6+ | string | normal | No | Text line breaking mode. The options are as follows:<br/>-**normal**: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.<br/>-**break-all**: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.<br/>-**break-word**: Has the same effect as **break-all**, except that it does not break unbreakable words. | | word-break<sup>6+</sup> | string | normal | No | Text line breaking mode. The options are as follows:<br>- **normal**: Allows text line breaks between words as appropriate to the relevant language writing systems. This is the default mode.<br>- **break-all**: Allows text line breaks between any characters for writing systems other than Chinese, Japanese, and Korean.<br>- **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. | | text-indent<sup>7+</sup> | &lt;length&gt; | - | No | Indentation of the first line. |
| white-space7+ | string | pre | No | Mode for processing blanks in the component. The options are as follows:<br/>-**normal**: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.<br/>-**nowrap**: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.<br/>-**pre**: All contents are output as-is.<br/>-**pre-wrap**: All contents are output as-is with line breaks.<br/>-**pre-line**: All spaces and tabs are combined into one space, the carriage return remains unchanged, and the text is wrapped. | | white-space<sup>7+</sup> | string | pre | No | Mode for processing blanks in the component. The options are as follows:<br>- **normal**: All spaces, carriage returns, and tabs are combined into one space, and the text is automatically wrapped.<br>- **nowrap**: All spaces, carriage returns, and tabs are combined into one space, and the text is not wrapped.<br>- **pre**: All contents are output as-is.<br>- **pre-wrap**: All contents are output as-is with line breaks.<br>- **pre-line**: All spaces and tabs are combined into one space, the carriage return remains unchanged, and the text is wrapped.|
| adapt-height7+ | boolean | false | No | Whether the text size adapts to the container height.NOTE:The settings take effect after font size auto-adaptation is configured. | | adapt-height<sup>7+</sup> | boolean | false | No | Whether the text size adapts to the container height.<br>The settings take effect after font size auto-adaptation is configured. |
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
>
> - In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement. > - In dynamic font adjustment, both the preset size set and the minimum/maximum font sizes are used to adjust the font size to display the text within the maximum number of lines. The preset size set is checked from left to right, and the minimum/maximum font sizes are checked from large to small, to find a size meeting the requirement.
>
> - Use the escape character **\r\n** for newline. > - Use the escape character **\r\n** for newline.
>
> - The following escape characters are supported: **\a**, **\b**, **\f**, **\n**, **\r**, **\t**, **\v**, **\'**, **\"**, and **\0**. > - The following escape characters are supported: **\a**, **\b**, **\f**, **\n**, **\r**, **\t**, **\v**, **\'**, **\"**, and **\0**.
>
> - When you use **\<span>** as a child component to form a text paragraph, note that if a **\<span>** style is abnormal, the text paragraph cannot be displayed. > - When you use **\<span>** as a child component to form a text paragraph, note that if a **\<span>** style is abnormal, the text paragraph cannot be displayed.
>
> - The **letter-spacing**, **text-align**, **line-height**, **text-overflow**, and **max-lines** styles take effect on text content held by the **\<text>** component and its child components (**\<span>**). > - The **letter-spacing**, **text-align**, **line-height**, **text-overflow**, and **max-lines** styles take effect on text content held by the **\<text>** component and its child components (**\<span>**).
> - The **\<text>** component does not support the coexistence of the text content and **\<span>** subcomponents. (If both of them exist, only the content in **\<span>** is displayed.) >
> - The **\<text>** component cannot contain both the text and the child component **\<span>**. If both of them exist, only the content in **\<span>** is displayed.
## Events ## Events
Events in [Universal Events](js-components-common-events.md) are supported. The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Method ## Methods
Methods in [Universal Methods](js-components-common-methods.md) are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example Code
``` ## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<div class="content"> <div class="content">
...@@ -77,6 +86,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -77,6 +86,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
</text> </text>
</div> </div>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
display: flex; display: flex;
...@@ -94,6 +106,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -94,6 +106,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
width: 400px; width: 400px;
height: 400px; height: 400px;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
data: { data: {
...@@ -102,9 +117,9 @@ export default { ...@@ -102,9 +117,9 @@ export default {
} }
``` ```
![img](figures/3.png) ![3](figures/3.png)
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="text1"> <text class="text1">
...@@ -114,6 +129,9 @@ export default { ...@@ -114,6 +129,9 @@ export default {
This is a passage This is a passage
</text> </text>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -138,4 +156,4 @@ export default { ...@@ -138,4 +156,4 @@ export default {
} }
``` ```
![img](figures/2.png) ![2](figures/2.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-container-popup.md
浏览文件 @ 75c6681c
# popup # popup
The **\<popup>** component is used to display a pop-up to offer instructions after a user clicks a bound control. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
Bubble indication. The **\<popup>** component is used to display a pop-up to offer instructions after a user clicks a bound control.
## Required Permissions ## Required Permissions
None None
## Child Components
All child components are supported. Each **\<popup>** can have only one child component<sup>5+</sup>. ## Child Components
## Attributes This component supports only one child component.<sup>5+</sup>
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description | | Name| Type| Default Value| Mandatory| Description|
| ------------- | -------- | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| target | string | - | Yes | ID of the target element. Dynamic switch is not supported. | | target | string | - | Yes| ID of the target element. Dynamic switch is not supported.|
| placement | string | bottom | No | Position of the pop-up. Available values are as follows: <br>- **left**: The pop-up is displayed on the left of the target item. <br>- **right**: The pop-up is displayed on the right of the target item. <br>- **top**: The pop-up is displayed at the top of the target item. <br>- **bottom**: The pop-up is displayed at the bottom of the target item. <br>- **topLeft**: The pop-up is displayed on the upper left of the target item. <br>- **topRight**: The pop-up is displayed on the upper right of the target item. <br>- **bottomLeft**: The pop-up is displayed on the bottom left of the target item. <br>- **bottomRight**: The pop-up is displayed on the bottom right of the target item. | | placement | string | bottom | No| Position of the pop-up. Available values are as follows:<br>- **left**: The pop-up is displayed on the left of the target item.<br>- **right**: The pop-up is displayed on the right of the target item.<br>- **top**: The pop-up is displayed at the top of the target item.<br>- **bottom**: The pop-up is displayed at the bottom of the target item.<br>- **topLeft**: The pop-up is displayed on the upper left of the target item.<br>- **topRight**: The pop-up is displayed on the upper right of the target item.<br>- **bottomLeft**: The pop-up is displayed on the bottom left of the target item.<br>- **bottomRight**: The pop-up is displayed on the bottom right of the target item.|
| keepalive<sup>5+</sup> | boolean | false | No | Whether to retain this pop-up. <br>- **true**: The pop-up does not disappear when users tap other areas or switch the page. To hide the pop-up, you need to call the **hide** method. <br>- **false**: The pop-up disappears when users tap other areas or switch the page. | | keepalive<sup>5+</sup> | boolean | false | No| Whether to retain this pop-up. **true**: The pop-up does not disappear when users tap other areas or switch the page. To hide the pop-up, call the **hide** method.<br>**false**: The pop-up disappears when users tap other areas or switch the page.|
| clickable<sup>5+</sup> | boolean | true | No | Whether to display the pop-up when users click the bound control. If this parameter is set to **false**, the pop-up can be triggered only by a method call. | | clickable<sup>5+</sup> | boolean | true | No| Whether to display the pop-up when users click the bound control. If this parameter is set to **false**, the pop-up can be triggered only by a method call.|
| arrowoffset<sup>5+</sup> | \<length> | 0 | No | Offset of the pop-up arrow. By default, the arrow is centered. A positive value means that the arrow moves along the language direction (LTR or RTL), and a negative value means that the arrow moves along the opposite direction of the language direction. | | arrowoffset<sup>5+</sup> | &lt;length&gt; | 0 | No| Offset of the pop-up arrow. By default, the arrow is centered. A positive value means that the arrow moves along the language direction (LTR or RTL), and a negative value means that the arrow moves along the opposite direction of the language direction.|
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> >
> - The **focusable** attribute is not supported. > The **focusable** attribute is not supported.
## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.
## 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 | | Name| Type| Default Value| Mandatory| Description|
| ---------- | -------- | ------------- | --------- | ------------------------------------------------------------ | | -------- | -------- | -------- | -------- | -------- |
| mask-color | \<color> | - | No | Color configuration of the mask layer. By default, the mask layer is completely transparent. | | mask-color | &lt;color&gt; | - | No| Color configuration of the mask layer. By default, the mask layer is completely transparent.|
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:** > **NOTE**
> >
> - Position-related styles are not supported. > Position-related styles are not supported.
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. ## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| visibilitychange | { visibility: boolean } | Triggered when a pop-up appears or disappears.|
| Name | Parameters | Description |
| ---------------- | ----------------------- | ---------------------------------------------- |
| visibilitychange | { visibility: boolean } | Triggered when a pop-up appears or disappears. |
## Methods ## Methods
Only the following methods are supported. The following methods are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| show<sup>5+</sup> | - | Shows the pop-up.|
| hide<sup>5+</sup> | - | Hides the pop-up.|
| Name | Parameters | Description | > **NOTE**
| ------ | ---------- | ------------------ |
| show<sup>5+</sup> | - | Pops up a message. |
| hide<sup>5+</sup> | - | Hides a pop-up. |
> ![img](https://gitee.com/openharmony/docs/raw/OpenHarmony-3.1-Release/en/application-dev/public_sys-resources/icon-note.gif) **NOTE:**
>
> 1. Attributes and styles of a **\<popup>** component cannot be dynamically updated. > 1. Attributes and styles of a **\<popup>** component cannot be dynamically updated.
>
> 2. Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only **margin-top** takes effect; if the pop-up displays on the upper left of the target element, only **margin-bottom** and **margin-right** take effect. > 2. Margins of a pop-up take effect depending on its position relative to the target element. For example, if the pop-up is below the target element, only **margin-top** takes effect; if the pop-up displays on the upper left of the target element, only **margin-bottom** and **margin-right** take effect.
>
> 3. Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is **0**, the first configured border style (in the sequence of left, top, right, and bottom) takes effect. Otherwise, the **border** attribute does not take effect. > 3. Styles set for the four borders of a pop-up must be the same. If they are different and the border radius is **0**, the first configured border style (in the sequence of left, top, right, and bottom) takes effect. Otherwise, the **border** attribute does not take effect.
>
> 4. The click event bound to the target element of a pop-up does not take effect. > 4. The click event bound to the target element of a pop-up does not take effect.
## Example Code
``` ## Example
```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text id="text">Click to show the pop-up</text> <text id="text">Click to show the pop-up</text>
<!-- popup supports single child of any type<sup>5+</sup> --> <!-- popup supports single child of any type5+ -->
<popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true" <popup id="popup" class="popup" target="text" placement="top" keepalive="true" clickable="true"
arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup"> arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup">
<text class="text">Text content of the pop-up</text> <text class="text">Text content of the pop-up</text>
</popup> </popup>
<button class="button" onclick="showpopup">Click to show the pop-up</button> <button class="button" onclick="showpopup">Click to show the pop-up</button>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -100,13 +107,16 @@ Only the following methods are supported. ...@@ -100,13 +107,16 @@ Only the following methods are supported.
height: 70px; height: 70px;
margin-top: 50px; margin-top: 50px;
} }
```
```js
// xxx.js // xxx.js
import prompt from '@system.prompt' import prompt from '@system.prompt'
export default { export default {
visibilitychange(e) { visibilitychange(e) {
prompt.showToast({ prompt.showToast({
message: 'visibility change visibility: ' + e.visibility, message: 'visibility change visibility: ' + e.visibility,
duration: 3000, duration: 3000
}); });
}, },
showpopup() { showpopup() {
...@@ -114,8 +124,8 @@ export default { ...@@ -114,8 +124,8 @@ export default {
}, },
hidepopup() { hidepopup() {
this.$element("popup").hide(); this.$element("popup").hide();
}, }
} }
``` ```
![img](figures/en-us_image_0000001178886129.png) ![en-us_image_0000001178886129](figures/en-us_image_0000001178886129.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-container-refresh.md
浏览文件 @ 75c6681c
# refresh # refresh
The **\<refresh>** component is used to pull down to refresh the page. > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **<Refresh\>** component is used to refresh a page through a pull-down gesture.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
Supported Supported
## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. ## Attributes
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| offset | &lt;length&gt; | - | No| Distance to the top of the parent component from the **<Refresh\>** component that comes to rest after a successful pull-down gesture.|
| refreshing | boolean | false | No| Whether the **\<refresh>** component is being used for refreshing.|
| type | string | auto | No| Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically.<br>- **auto**: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed.<br>- **pulldown**: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set **scrolleffect** of the list to **no** to prevent drop-down effect conflicts.|
| lasttime | boolean | false | No| Whether to display the last update time. The character string format is **last update time: XXXX**, where **XXXX** is displayed based on the certain time and date formats and cannot be dynamically modified. (It is recommended that this attribute be used when **type** is set to **pulldown**. The fixed distance is at the bottom of the content drop-down area. Pay attention to the **offset** attribute setting to prevent overlapping.)|
| timeoffset<sup>6+</sup> | &lt;length&gt; | - | No| Distance between the update time and the top of the parent component.|
| friction | number | 42 | No| Pull-down friction coefficient. The value ranges from 0 to 100. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 * **friction**% px.|
| Name | Type | Default Value | Mandatory | Description |
| ------------ | -------- | ------------- | --------- | ------------------------------------------------------------ |
| offset | \<length> | - | No | Distance to the top of the parent component from the **\<refresh>** component that comes to rest after a successful swipe gesture. |
| refreshing | boolean | false | No | Whether the **\<refresh>** component is being used for refreshing. |
| type | string | auto | No | Dynamic effect when the component is refreshed. Two options are available and cannot be modified dynamically. <br>- **auto**: default effect. When the list is pulled to the top, the list does not move. When the list is pulled to the bottom, a circle is displayed. <br>- **pulldown**: When the list is pulled to the top, users can continue to pull down to trigger a refresh. The rebound effect will appear after the refresh. If the child component contains a list, set **scrolleffect** of the list to **no** to prevent drop-down effect conflicts. |
| lasttime | boolean | false | No | Whether to display the last update time. The character string format is **last update time: XXXX**, where **XXXX** is displayed based on the time and date display specifications and cannot be dynamically modified. (It is recommended that this attribute be used when **type** is set to **pulldown**. The fixed distance is at the bottom of the content drop-down area. Pay attention to the **offset** attribute setting to prevent overlapping.) |
| timeoffset<sup>6+</sup> | \<length> | - | No | Sets the distance between the update time and the top of the parent component. |
| friction | number | 42 | No | Pull-down friction coefficient. The value ranges from **0** to **100**. A larger value indicates a more responsive component. For example, if a user pulls the component down 100 px, it will actually move 100 * **friction**% px. |
## Styles ## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported. In addition to the [universal styles](../arkui-js/js-components-common-styles.md), the following styles are supported.
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| background-color | &lt;color&gt; | white | No| Background color of the **\<refresh>** component.|
| progress-color | &lt;color&gt; | black | No| Loading color of the **\<refresh>** component.|
| Name | Type | Default Value | Mandatory | Description |
| ---------------- | -------- | ------------- | --------- | ------------------------------------------------- |
| background-color | \<color> | white | No | Background color of the **\<refresh>** component. |
| progress-color | \<color> | black | No | Loading color of the **\<refresh>** component. |
## Events ## Events
The following events are supported. The following events are supported.
| Name| Parameter| Description|
| -------- | -------- | -------- |
| refresh | { refreshing: refreshingValue } | Triggered when the **\<refresh>** component is pulled down and the refresh status changes. Available values are as follows:<br>- **false**: The **\<refresh>** component is being pulled down.<br>- **true**: The **\<refresh>** component is not being pulled down.|
| pulldown | { state: string } | Triggered when a user starts or stops pulling down the **\<refresh>** component. Available values are as follows:<br>- **start**: The pull-down starts.<br>- **end**: The pull-down ends.|
| Name | Parameter | Description |
| -------- | ------------------------------- | ------------------------------------------------------------ |
| refresh | { refreshing: refreshingValue } | Triggered when the **\<refresh>** component is pulled down and the refresh status changes. Available values are as follows: <br>- **false**: The **\<refresh>** component is being pulled down. <br>- **true**: The **\<refresh>** component is not being pulled down. |
| pulldown | { state: string } | Triggered when a user starts or stops pulling down the **\<refresh>** component. Available values are as follows: <br>- **start**: The pull-down starts. <br>- **end**: The pull-down ends. |
## Methods ## Methods
Methods in [Universal Methods](js-components-common-methods.md) are not supported. The [universal methods](../arkui-js/js-components-common-methods.md) are not supported.
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh"> <refresh refreshing="{{fresh}}" onrefresh="refresh">
...@@ -66,6 +70,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte ...@@ -66,6 +70,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
</list> </list>
</refresh> </refresh>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -96,6 +103,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte ...@@ -96,6 +103,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
font-size: 35px; font-size: 35px;
font-weight: bold; font-weight: bold;
} }
```
```js
// xxx.js // xxx.js
import prompt from '@system.prompt'; import prompt from '@system.prompt';
export default { export default {
...@@ -128,4 +138,4 @@ export default { ...@@ -128,4 +138,4 @@ export default {
} }
``` ```
![img](figures/en-us_image_0000001150719520.gif) ![en-us_image_0000001150719520](figures/en-us_image_0000001150719520.gif)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 75c6681c
...@@ -19,9 +19,9 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb ...@@ -19,9 +19,9 @@ PanGesture(value?: { fingers?: number, direction?: PanDirection, distance?: numb
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**| | fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**|
| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**| | direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&amp;) and OR (\|) operations.<br>Default value: **PanDirection.All**|
| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and tab swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.| | distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized. |
## PanDirection enums ## PanDirection
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
......
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 75c6681c
...@@ -428,7 +428,7 @@ struct LineDashOffset { ...@@ -428,7 +428,7 @@ struct LineDashOffset {
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0 this.context.lineDashOffset = 10.0
this.context.stroke(); this.context.stroke()
}) })
} }
.width('100%') .width('100%')
...@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas. ...@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas.
@Entry @Entry
@Component @Component
struct StrokeRect { struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true); private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
...@@ -802,6 +802,7 @@ Draws filled text on the canvas. ...@@ -802,6 +802,7 @@ Draws filled text on the canvas.
| text | string | Yes | '' | Text to draw. | | text | string | Yes | '' | Text to draw. |
| x | number | Yes | 0 | X-coordinate of the lower left corner of the text.| | x | number | Yes | 0 | X-coordinate of the lower left corner of the text.|
| y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.| | y | number | Yes | 0 | Y-coordinate of the lower left corner of the text.|
| maxWidth | number | No | - | Maximum width allowed for the text. |
**Example** **Example**
...@@ -2268,7 +2269,7 @@ struct CanvasGetLineDash { ...@@ -2268,7 +2269,7 @@ struct CanvasGetLineDash {
.onReady(() => { .onReady(() => {
this.context.arc(100, 75, 50, 0, 6.28) this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20]) this.context.setLineDash([10,20])
this.context.stroke(); this.context.stroke()
let res = this.context.getLineDash() let res = this.context.getLineDash()
}) })
} }
...@@ -2407,7 +2408,6 @@ Restores the saved drawing context. ...@@ -2407,7 +2408,6 @@ Restores the saved drawing context.
struct CanvasExample { struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true) private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings) private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......
en/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 75c6681c
# Combined Gestures # Combined Gestures
Continuous recognition, parallel recognition, and exclusive recognition are supported for A group of gestures. Continuous recognition, parallel recognition, and exclusive recognition are supported for a group of gestures.
> **NOTE** > **NOTE**
> >
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 75c6681c
...@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse ...@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
**Parameters** **Parameters**
| Name | Type | Mandatory | Default Value | Description | | Name | Type | Mandatory | Default Value | Description |
| ------ | ------ | ---- | --------- | ---------------------------- | | ------ | ------ | ---- | --------- | ---------------------------- |
| offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.| | offset | number | Yes | 0 | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
| color | string | Yes | '#ffffff' | Gradient color to set. | | color | string | Yes | '#ffffff' | Gradient color to set. |
**Example** **Example**
......
en/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 75c6681c
...@@ -41,7 +41,7 @@ Use the following attributes to bind gesture recognition to a component. When a ...@@ -41,7 +41,7 @@ Use the following attributes to bind gesture recognition to a component. When a
## Gesture Response Event ## Gesture Response Event
The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definitions of other gestures, see the corresponding gesture sections. The component uses the **gesture** method to bind the gesture object and uses the events provided in this object to respond to the gesture operation. For example, the **onAction** event of the **TapGesture** object can be used to respond to a click event. For details about the event definitions of other gestures, see the corresponding gesture sections. To bind multiple gestures, use [combined gestures](ts-combined-gestures.md).
- TapGesture - TapGesture
| Name| Description| | Name| Description|
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或