Skip to content

D
Docs

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

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

Merge branch 'OpenHarmony-3.1-Release' of gitee.com:openharmony/docs into C1-1215 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 47d9c930 9944c243
展开全部 隐藏空白更改
内联 并排
Showing with 820 addition and 684 deletion
en/application-dev/reference/arkui-js/js-components-basic-image.md
浏览文件 @ 8e42f079
# 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.
## Child Component
## Child Components
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 |
| ---- | ------ | ---- | ---- | ---------------------------------------- |
| 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 | Alternative information for the image, which is displayed during image loading. |
| 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. |
| alt | string | - | No | Placeholder image displayed during image loading. |
## Styles
In addition to the styles in [Universal Styles](js-components-common-styles.md), the following style attributes 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 |
| ---------------------------- | ------- | ------------ | ---- | ---------------------------------------- |
| 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. 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 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-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.|
| 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. |
| match-text-direction | boolean | false | No | Whether image orientation changes with the text direction. The SVG format is not supported. |
| 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. |
| 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. |
**Table 1** object-fit
**Table 1** Types of the object-fit style
| 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.|
| 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 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. |
| 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. |
| 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. |
| 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. |
| 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. |
> ![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**
>
> - 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 specified in the SVG description, the following rules are adopted to decide the final display effect:
> When using an SVG image, note that:
>
> 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.
## Events
> - 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 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:
>
> 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.
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 |
| -------------- | -------------------------------- | ------------------------------------------------------------ |
| complete(Rich) | { width: width, height: height } | Triggered when an image is successfully loaded. The loaded image 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**. |
| Name | Parameter | Description |
| -------------- | ---------------------------------------- | ------------------------- |
| complete(Rich) | {<br> width: width,<br> height: height<br> } | Triggered when an image is successfully loaded. The loaded image size is returned.|
| 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 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 -->
<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>
<select class="selects" onchange="change_fit">
<option for="{{fits}}" value="{{$item}}">{{$item}}</option>
</select>
<select class="selects" onchange="change_fit"><option for="{{fits}}" value="{{$item}}">{{$item}}</option></select>
</div>
```
```css
/* xxx.css */
.container {
justify-content: center;
align-items: center;
flex-direction: column;
}
.selects{
margin-top: 20px;
......@@ -91,6 +96,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
border:1px solid #808080;
border-radius: 10px;
}
```
```js
// xxx.js
export default {
data: {
......@@ -103,4 +111,4 @@ export default {
}
```
![img](figures/example.gif)
\ No newline at end of file
![example](figures/example.gif)
en/application-dev/reference/arkui-js/js-components-basic-marquee.md
浏览文件 @ 8e42f079
......@@ -65,72 +65,77 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```html
<!-- xxx.hml -->
<div class="container">
<marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}"
onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee>
<div class="content">
<button class="controlButton" onclick="onStartClick">Start</button>
<button class="controlButton" onclick="onStopClick">Stop</button>
<div class="tutorial-page">
<div class="mymarquee">
<marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
id="testmarquee" onfinish="setfinish">
Life is a journey, not the destination.
</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>
```
```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()
}
}
```
![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
浏览文件 @ 8e42f079
......@@ -166,52 +166,59 @@ In addition to the [universal methods](../arkui-js/js-components-common-methods.
```html
<!-- xxx.hml -->
<div class="container">
<select @change="selectChange">
<select @change="selectChange">
<option value="{{ item }}" for="item in selectList">
{{ item }}
</option>
</select>
<picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
oncancel="textoncancel" class="pickertext"></picker>
<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>
<picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12"
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</select>
<picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
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"
onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
<picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
selected="{{ timeselect }}" hours="12"
onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
<picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
lunarswitch="true"
onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
<picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
selected="{{ multitextselect }}"
onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
</div>
```
```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;i<this.selectList.length;i++){
if(e.newValue == this.selectList[i]){
this.$element("picker"+i).show();
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;i < this.selectList.length; i++) {
if (e.newValue == this.selectList[i]) {
this.$element("picker" + i).show();
}
}
},
textonchange(e) {
this.textvalue = e.newValue;
prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected })
},
textoncancel(e) {
prompt.showToast({ message:"text: textoncancel" })
},
dateonchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day })
},
dateoncancel() {
prompt.showToast({ message:"date: dateoncancel" })
},
timeonchange(e) {
if(this.containsecond){
this.timevalue=e.hour+":"+e.minute+":"+e.second;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second })
} else {
this.timevalue=e.hour+":"+e.minute;
prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute })
}},
timeoncancel() {
prompt.showToast({ message:"timeoncancel" })
},
datetimeonchange(e) {
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 })
},
datetimeoncancel() {
prompt.showToast({ message:"datetimeoncancel" })
},
multitextonchange(e) {
this.multitextvalue=e.newValue;
prompt.showToast({ message:"Multi-column text change" + e.newValue })
},
multitextoncancel() {
prompt.showToast({ message:"multitextoncancel" })
},
popup_picker() {
this.$element("picker_text").show();
},
textonchange(e) {
this.textvalue = e.newValue;
prompt.showToast({
message: "text:" + e.newValue + ",newSelected:" + e.newSelected
})
},
textoncancel(e) {
prompt.showToast({
message: "text: textoncancel"
})
},
dateonchange(e) {
this.datevalue = e.year + "-" + e.month + "-" + e.day;
prompt.showToast({
message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
})
},
dateoncancel() {
prompt.showToast({
message: "date: dateoncancel"
})
},
timeonchange(e) {
if (this.containsecond) {
this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
prompt.showToast({
message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
})
} else {
this.timevalue = e.hour + ":" + e.minute;
prompt.showToast({
message: "Time:" + e.hour + ":" + e.minute
})
}
},
timeoncancel() {
prompt.showToast({
message: "timeoncancel"
})
},
datetimeonchange(e) {
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
})
},
datetimeoncancel() {
prompt.showToast({
message: "datetimeoncancel"
})
},
multitextonchange(e) {
this.multitextvalue = e.newValue;
prompt.showToast({
message: "Multi-column text change" + e.newValue
})
},
multitextoncancel() {
prompt.showToast({
message: "multitextoncancel"
})
},
popup_picker() {
this.$element("picker_text").show();
},
}
```
......
en/application-dev/reference/arkui-js/js-components-basic-search.md
浏览文件 @ 8e42f079
# 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.
## Child Components
The **\<Search>** component provides an input area for users to search.
Not supported
## Attributes
## Child Components
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
Not supported
## Attributes
| 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. |
| hint | string | - | No | Hint text. |
| value | string | - | No | Text in the search box. |
| searchbutton5+ | 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. |
In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
**Table 1** MenuOption5+
| 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.|
| hint | string | - | No | Hint text. |
| value | string | - | No | Text in the search box. |
| searchbutton<sup>5+</sup> | string | - | No | Text on the search button at the end of the search box. |
| menuoptions<sup>5+</sup> | Array&lt;MenuOption&gt; | - | No | Menu options displayed after users click the **More** button. |
**Table 1** MenuOption<sup>5+</sup>
| Name | Type | Description |
| ------- | ------ | ----------- |
| icon | string | Path of the icon for a menu option.|
| content | string | Text content of a menu option.|
| Name | Type | Description |
| ------- | ------ | ----------------------------------- |
| icon | string | Path of the icon for a menu option. |
| content | string | Text content in a menu option. |
## 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; | \#e6000000 | No | Font color 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>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 | &lt;color&gt; | \#99000000<br>| No | Color of the hint text. |
| 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 in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
| caret-color<sup>6+</sup> | &lt;color&gt; | - | No | Color of the caret. |
| Name | Type | Default Value | Mandatory | Description |
| ----------------- | ---------------- | ------------- | --------- | ------------------------------------------------------------ |
| color | \<color> | #e6000000 | No | Font color of the search box. |
| font-size | \<length> | 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. |
| placeholder-color | \<color> | #99000000 | 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-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. |
| caret-color6+ | \<color> | - | No | Color of the input cursor. |
## 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 |
| ------------------------- | ---------------------------------------- | ---------------------------------------- |
| 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 button<sup>5+</sup>, or tap the search button on a soft keyboard. |
| 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.|
| 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.|
| 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.|
| 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.|
| 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. |
| submit | { text:submitText } | Triggered when users click the search icon or the search button5+, 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. |
| 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. |
| 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. |
| 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. |
## 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 -->
<div class="container">
<search hint="Enter keywords" searchbutton="Search" @search="search">
<search hint="Enter keywords" searchbutton="Search" @search="search">
</search>
</div>
```
```css
/* xxx.css */
.container {
display: flex;
......@@ -80,4 +85,4 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
}
```
![img](figures/en-us_image_0000001153427082.png)
\ No newline at end of file
![en-us_image_0000001153427082](figures/en-us_image_0000001153427082.png)
en/application-dev/reference/arkui-js/js-components-basic-slider.md
浏览文件 @ 8e42f079
# 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
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
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
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 |
| ------ | -------------------------------------------- | --------------------------------- |
| change | [ChangeEvent](js-components-basic-slider.md) | Triggered when the value changes. |
| Name| Parameter| Description|
| -------- | -------- | -------- |
| change | ChangeEvent | Triggered when the value changes.|
**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
```
```html
<!-- xxx.hml -->
<div class="container">
<text>slider start value is {{startValue}}</text>
<text>slider current value is {{currentValue}}</text>
<text>slider end value is {{endValue}}</text>
<slider min="0" max="100" value="{{value}}" onchange="setvalue" ></slider>
<slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
<slider class="" min="0" max="100" value="{{ value }}" step="20" mode="inset" showtips="true"></slider>
<slider class="" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset" showtips="false"></slider>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
flex-direction: column;
justify-content: center;
align-items: center;
}
// 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;
}
}
slider{
margin-top: 100px;
}
```
![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-container-popup.md
浏览文件 @ 8e42f079
# 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
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 |
| ------------- | -------- | ------------- | --------- | ------------------------------------------------------------ |
| 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. |
| 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. |
| 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. |
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| 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.|
| 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.|
| 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 |
| ---------- | -------- | ------------- | --------- | ------------------------------------------------------------ |
| mask-color | \<color> | - | No | Color configuration of the mask layer. By default, the mask layer is completely transparent. |
| Name| Type| Default Value| Mandatory| Description|
| -------- | -------- | -------- | -------- | -------- |
| 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
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 |
| ------ | ---------- | ------------------ |
| 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:**
>
> **NOTE**
> 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.
>
> 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.
## Example Code
```
## Example
```html
<!-- xxx.hml -->
<div class="container">
<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"
arrowoffset="100px" onvisibilitychange="visibilitychange" onclick="hidepopup">
<text class="text">Text content of the pop-up</text>
</popup>
<button class="button" onclick="showpopup">Click to show the pop-up</button>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -100,13 +107,16 @@ Only the following methods are supported.
height: 70px;
margin-top: 50px;
}
```
```js
// xxx.js
import prompt from '@system.prompt'
export default {
visibilitychange(e) {
prompt.showToast({
message: 'visibility change visibility: ' + e.visibility,
duration: 3000,
duration: 3000
});
},
showpopup() {
......@@ -114,8 +124,8 @@ export default {
},
hidepopup() {
this.$element("popup").hide();
},
}
}
```
![img](figures/en-us_image_0000001178886129.png)
\ No newline at end of file
![en-us_image_0000001178886129](figures/en-us_image_0000001178886129.png)
en/application-dev/reference/arkui-js/js-components-container-refresh.md
浏览文件 @ 8e42f079
# 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
None
## Child Components
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
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
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 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
```
```html
<!-- xxx.hml -->
<div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh">
......@@ -66,6 +70,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
</list>
</refresh>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
......@@ -96,6 +103,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are not supporte
font-size: 35px;
font-weight: bold;
}
```
```js
// xxx.js
import prompt from '@system.prompt';
export default {
......@@ -106,7 +116,7 @@ export default {
onInit() {
this.list = [];
for (var i = 0; i <= 3; i++) {
var item ='List element' + i;
var item ='List element' + i;
this.list.push(item);
}
},
......@@ -128,4 +138,4 @@ export default {
}
```
![img](figures/en-us_image_0000001150719520.gif)
\ No newline at end of file
![en-us_image_0000001150719520](figures/en-us_image_0000001150719520.gif)
en/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
浏览文件 @ 8e42f079
......@@ -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**|
| 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|
| -------- | -------- |
......
en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 8e42f079
......@@ -428,7 +428,7 @@ struct LineDashOffset {
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.lineDashOffset = 10.0
this.context.stroke();
this.context.stroke()
})
}
.width('100%')
......@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas.
@Entry
@Component
struct StrokeRect {
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
......@@ -802,6 +802,7 @@ Draws filled text on the canvas.
| text | string | Yes | '' | Text to draw. |
| 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.|
| maxWidth | number | No | - | Maximum width allowed for the text. |
**Example**
......@@ -2268,7 +2269,7 @@ struct CanvasGetLineDash {
.onReady(() => {
this.context.arc(100, 75, 50, 0, 6.28)
this.context.setLineDash([10,20])
this.context.stroke();
this.context.stroke()
let res = this.context.getLineDash()
})
}
......@@ -2407,8 +2408,7 @@ Restores the saved drawing context.
struct CanvasExample {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Canvas(this.context)
......
en/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 8e42f079
# 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**
>
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
浏览文件 @ 8e42f079
......@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
**Parameters**
| 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.|
| color | string | Yes | '#ffffff' | Gradient color to set. |
| 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.|
| color | string | Yes | '#ffffff' | Gradient color to set. |
**Example**
......
en/application-dev/reference/arkui-ts/ts-gesture-settings.md
浏览文件 @ 8e42f079
......@@ -41,7 +41,7 @@ Use the following attributes to bind gesture recognition to a component. When a
## 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
| Name| Description|
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或