Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
未验证 提交 658e31f5 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!3116 ui英文上新 

Merge pull request !3116 from LiAn/master
上级 4af195e1 0ea87815
隐藏空白更改
内联 并排
Showing with 5425 addition and 243 deletion
en/application-dev/application-dev-website.md
浏览文件 @ 658e31f5
......@@ -51,28 +51,49 @@
- [Defining Page Routes](ui/ui-js-building-ui-routes.md)
- Common Component Development Guidelines
- Container Components
- [List](ui/ui-js-components-list.md)
- [Dialog](ui/ui-js-components-dialog.md)
- [Form](ui/ui-js-components-form.md)
- [Stepper](ui/ui-js-components-stepper.md)
- [Tabs](ui/ui-js-component-tabs.md)
- [<list> Development](ui/ui-js-components-list.md)
- [<dialog> Development](ui/ui-js-components-dialog.md)
- [<form> Development](ui/ui-js-components-form.md)
- [<stepper> Development](ui/ui-js-components-stepper.md)
- [<tabs> Development](ui/ui-js-component-tabs.md)
- [<swiper> Development](ui/ui-js-components-swiper.md)
- Basic Components
- [Text](ui/ui-js-components-text.md)
- [Input](ui/ui-js-components-input.md)
- [Button](ui/ui-js-components-button.md)
- [Picker](ui/ui-js-components-picker.md)
- [Image](ui/ui-js-components-images.md)
- [<text> Development](ui/ui-js-components-text.md)
- [<input> Development](ui/ui-js-components-input.md)
- [<button> Development](ui/ui-js-components-button.md)
- [<picker> Development](ui/ui-js-components-picker.md)
- [<image> Development](ui/ui-js-components-images.md)
- [<image-animator> Development](ui/ui-js-components-image-animator.md)
- [<rating> Development](ui/ui-js-components-rating.md)
- [<slider> Development](ui/ui-js-components-slider.md)
- [<chart> Development](ui/ui-js-components-chart.md)
- [<switch> Development](ui/ui-js-components-switch.md)
- [<toolbar> Development](ui/ui-js-components-toolbar.md)
- [<menu> Development](ui/ui-js-components-menu.md)
- [<marquee> Development](ui/ui-js-components-marquee.md)
- [<qrcode> Development](ui/ui-js-components-qrcode.md)
- [<search> Development](ui/ui-js-components-search.md)
- <canvas> Development
- [CanvasRenderingContext2D](ui/ui-js-components-canvasrenderingcontext2d.md)
- [Path2D](ui/ui-js-components-path2d.md)
- [OffscreenCanvas](ui/ui-js-components-offscreencanvas.md)
- [<grid-container> Development](ui/ui-js-components-calendar.md)
- Svg
- [Basics](ui/ui-js-components-svg-overview.md)
- [Graph Drawing](ui/ui-js-components-svg-graphics.md)
- [Path Drawing](ui/ui-js-components-svg-path.md)
- [Text Drawing](ui/ui-js-components-svg-text.md)
- Animation Development Guidelines
- CSS Animation
- [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md)
- [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md)
- [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md)
- [Defining Animations for SVG Components](ui/ui-js-animate-svg.md)
- JS Animation
- [Component Animation](ui/ui-js-animate-component.md)
- Interpolator Animation
- [Animation Effect](ui/ui-js-animate-dynamic-effects.md)
- [Animation Frame](ui/ui-js-animate-frame.md)
- CSS Animation
- [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md)
- [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md)
- [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md)
- [Defining Animations for SVG Components](ui/ui-js-animate-svg.md)
- JS Animation
- [Component Animation](ui/ui-js-animate-component.md)
- Interpolator Animation
- [Animation Effect](ui/ui-js-animate-dynamic-effects.md)
- [Animation Frame](ui/ui-js-animate-frame.md)
- [Custom Components](ui/ui-js-custom-components.md)
- TypeScript-based Declarative Development Paradigm
- [Overview](ui/ui-ts-overview.md)
......@@ -128,6 +149,13 @@
- [Custom Component Lifecycle Callbacks](ui/ts-custom-component-lifecycle-callbacks.md)
- [Example: Component Creation and Re-Initialization](ui/ts-component-creation-re-initialization.md)
- [Syntactic Sugar](ui/ts-syntactic-sugar.md)
- Common Component Development Guidelines
- [Button](ui/ui-ts-basic-components-button.md)
- [Web](ui/ui-ts-components-web.md)
- Common Layout Development Guidelines
- [Flex Layout](ui/ui-ts-layout-flex.md)
- [Grid Layout](ui/ui-ts-layout-grid-container.md)
- [Media Query](ui/ui-ts-layout-mediaquery.md)
- Experiencing the Declarative UI
- [Creating a Declarative UI Project](ui/ui-ts-creating-project.md)
- [Getting to Know Components](ui/ui-ts-components.md)
......
en/application-dev/ui/Readme-EN.md
浏览文件 @ 658e31f5
......@@ -33,13 +33,33 @@
- [<form> Development](ui-js-components-form.md)
- [<stepper> Development](ui-js-components-stepper.md)
- [<tabs> Development](ui-js-component-tabs.md)
- [<swiper> Development](ui-js-components-swiper.md)
- Basic Components
- [<text> Development](ui-js-components-text.md)
- [<input> Development](ui-js-components-input.md)
- [<button> Development](ui-js-components-button.md)
- [<picker> Development](ui-js-components-picker.md)
- [<image> Development](ui-js-components-images.md)
- [<image-animator> Development](ui-js-components-image-animator.md)
- [<rating> Development](ui-js-components-rating.md)
- [<slider> Development](ui-js-components-slider.md)
- [<chart> Development](ui-js-components-chart.md)
- [<switch> Development](ui-js-components-switch.md)
- [<toolbar> Development](ui-js-components-toolbar.md)
- [<menu> Development](ui-js-components-menu.md)
- [<marquee> Development](ui-js-components-marquee.md)
- [<qrcode> Development](ui-js-components-qrcode.md)
- [<search> Development](ui-js-components-search.md)
- <canvas> Development
- [CanvasRenderingContext2D](ui-js-components-canvasrenderingcontext2d.md)
- [Path2D](ui-js-components-path2d.md)
- [OffscreenCanvas](ui-js-components-offscreencanvas.md)
- [<grid-container> Development](ui-js-components-calendar.md)
- Svg
- [Basics](ui-js-components-svg-overview.md)
- [Graph Drawing](ui-js-components-svg-graphics.md)
- [Path Drawing](ui-js-components-svg-path.md)
- [Text Drawing](ui-js-components-svg-text.md)
- Animation Development Guidelines
- CSS Animation
- [Defining Attribute Style Animations](ui-js-animate-attribute-style.md)
......
en/application-dev/ui/ui-js-component-tabs.md
浏览文件 @ 658e31f5
# <tabs> Development
The <tabs> component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md).
The **<tabs>** component is a common UI component for navigation. It allows quick access to different functions of an app. For details, see [tabs](../reference/arkui-js/js-components-container-tabs.md).
## Creating Tabs
Create a <tabs> component in the .hml file under pages/index.
Create a **<tabs>** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
<div class="container" >
<tabs>
<tab-bar>
<tab-bar>
<text>item1</text>
<text>item2</text>
</tab-bar>
......@@ -25,7 +25,7 @@ Create a &lt;tabs&gt; component in the .hml file under pages/index.
<text>content2</text>
</div>
</tab-content>
</tabs>
</tabs>
</div>
```
......@@ -51,13 +51,13 @@ Create a &lt;tabs&gt; component in the .hml file under pages/index.
## Setting the Tabs Orientation
By default, the active tab of a &lt;tabs&gt; component is the one with the specified index. To show the &lt;tabs&gt; vertically, set the vertical attribute to true.
By default, the active tab of a **&lt;tabs&gt;** component is the one with the specified **index**. To show the **&lt;tabs&gt;** vertically, set the **vertical** attribute to **true**.
```
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs index="1" vertical="true">
<tabs index="1" vertical="true">
<tab-bar >
<text>item1</text>
<text style="margin-top: 50px;">item2</text>
......@@ -76,7 +76,7 @@ By default, the active tab of a &lt;tabs&gt; component is the one with the speci
![en-us_image_0000001222967756](figures/en-us_image_0000001222967756.gif)
Set the mode attribute to enable the child components of the <tab-bar> to be evenly distributed. Set the scrollable attribute to disable scrolling of the <tab-content>.
Set the **mode** attribute to enable the child components of the **&lt;tab-bar&gt;** to be evenly distributed. Set the **scrollable** attribute to disable scrolling of the **&lt;tab-content&gt;**.
```
......@@ -102,9 +102,9 @@ Set the mode attribute to enable the child components of the <tab-bar> to be eve
![en-us_image_0000001267647857](figures/en-us_image_0000001267647857.gif)
## Setting the Style
## Setting Styles
Set the background color, border, and tab-content layout of the &lt;tabs&gt; component.
Set the background color, border, and tab-content layout of the **&lt;tabs&gt;** component.
```
<!-- index.hml -->
......@@ -150,7 +150,8 @@ Set the mode attribute to enable the child components of the <tab-bar> to be eve
margin-top: 10px;
height: 300px;
color: blue;
justify-content: center; align-items: center;
justify-content: center;
align-items: center;
}
```
......@@ -159,13 +160,13 @@ Set the mode attribute to enable the child components of the <tab-bar> to be eve
## Displaying the Tab Index
Add the change event for the &lt;tabs&gt; component to display the index of the current tab after tab switching.
Add the **change** event for the **&lt;tabs&gt;** component to display the index of the current tab after tab switching.
```
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;">
<tabs class="tabs" onchange="tabChange">
<tabs class="tabs"onchange="tabChange">
<tab-bar class="tabBar">
<text class="tabBarItem">item1</text>
<text class="tabBarItem">item2</text>
......@@ -198,15 +199,15 @@ export default {
![en-us_image_0000001222807772](figures/en-us_image_0000001222807772.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - A &lt;tabs&gt; can wrap at most one [<tab-bar>](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [<tab-content>](../reference/arkui-js/js-components-container-tab-content.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - A **&lt;tabs&gt;** can wrap at most one [**&lt;tab-bar&gt;**](../reference/arkui-js/js-components-container-tab-bar.md) and at most one [**&lt;tab-content&gt;**](../reference/arkui-js/js-components-container-tab-content.md).
## Example Scenario
In this example, you can switch between tabs and the active tab has the title text in red with an underline below.
Use the &lt;tabs&gt;, <tab-bar>, and <tab-content> components to implement tab switching. Then define the arrays and attributes. Add the change event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
Use the **&lt;tabs&gt;**, **&lt;tab-bar&gt;**, and **&lt;tab-content&gt;** components to implement tab switching. Then define the arrays and attributes. Add the **change** event to change the attribute values in the arrays so that the active tab has a different font color and an underline.
```
......
en/application-dev/ui/ui-js-components-button.md
浏览文件 @ 658e31f5
# &lt;button&gt; Development
The&lt;button&gt;component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md).
The **&lt;button&gt;** component can be used to set a capsule, circle, text, arc, or download button. For details, see [button](../reference/arkui-js/js-components-basic-button.md).
## Creating a &lt;button&gt; Component
## Creating a &lt;button&gt; Component
Create a &lt;button&gt; component in the .hml file under pages/index.
Create a **&lt;button&gt;** component in the .hml file under **pages/index**.
```
......@@ -20,6 +20,8 @@ Create a &lt;button&gt; component in the .hml file under pages/index.
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -32,7 +34,9 @@ Create a &lt;button&gt; component in the .hml file under pages/index.
## Setting the Button Type
Set the type attribute of the &lt;input&gt; component to button, date, or any of the supported values.
Set the **type** attribute of the **&lt;input&gt;** component to **button**, **date**, or any of the supported values.
```
<!-- xxx.hml -->
......@@ -42,9 +46,13 @@ Set the type attribute of the &lt;input&gt; component to button, date, or any of
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
align-items: center;
......@@ -70,17 +78,19 @@ Set the type attribute of the &lt;input&gt; component to button, date, or any of
![en-us_image_0000001222967744](figures/en-us_image_0000001222967744.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - For capsule buttons, border-related styles are not supported.
>
> - For circle buttons, text-related styles are not supported.
>
> - For text buttons, the text size is adaptive, and radius, width, and height cannot be set. The background-color style is not supported when the background is completely transparent.
> - For text buttons, the text size is adaptive, and **radius**, **width**, and **height** cannot be set. The **background-color** style is not supported when the background is completely transparent.
>
> - If the icon used by the&lt;button&gt;component is from the cloud, you must declare the ohos.permission.INTERNET permission in the config.json file under the resources folder.
> - If the icon used by the **&lt;button&gt;** component is from the cloud, you must declare the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder.
Sample code for declaring the **ohos.permission.INTERNET** permission in the **config.json** file under the **resources** folder:
Sample code for declaring the ohos.permission.INTERNET permission in the config.json file under the resources folder:
```
<!-- config.json -->
......@@ -94,7 +104,7 @@ Sample code for declaring the ohos.permission.INTERNET permission in the config.
## Showing the Download Progress
Add the progress method to the&lt;button&gt;component to display the download progress in real time.
Add the **progress** method to the **&lt;button&gt;** component to display the download progress in real time.
```
......@@ -171,15 +181,16 @@ export default {
![en-us_image_0000001223287652](figures/en-us_image_0000001223287652.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
>
> The setProgress method supports only buttons of the download type.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The **setProgress** method supports only buttons of the download type.
## Example Scenario
Switch between the button types for different types of text.
```
<!-- xxx.hml -->
<div class="container">
......@@ -197,6 +208,8 @@ Switch between the button types for different types of text.
</div>
```
```
/* xxx.css */
.container {
......@@ -243,6 +256,8 @@ Switch between the button types for different types of text.
}
```
```
// xxx.js
export default {
......
en/application-dev/ui/ui-js-components-calendar.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;grid-container&gt; Development
The **&lt;grid-container&gt;** component is the root container of the grid layout. Within the root container, you can use **&lt;grid-row&gt;** and **&lt;grid-col&gt;** for the grid layout. For details, see [grid-container](../reference/arkui-js/js-components-grid-container.md).
## Creating a &lt;grid-container&gt; Component
Create a **&lt;grid-container&gt;** component in the .hml file under **pages/index** and add a [**&lt;grid-row&gt;**](../reference/arkui-js/js-components-grid-row.md) child component.
```
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;">
<grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left:
10%;"></grid-row>
<grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></grid-row>
<grid-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
</grid-container>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
justify-content: center;
align-items: center;
}
```
![en-us_image_0000001276162725](figures/en-us_image_0000001276162725.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **&lt;grid-container&gt;** supports only **&lt;grid-row&gt;** as a child component.
## Methods
Click the **&lt;grid-container&gt;** component to call the **getColumns**, **getColumnWidth**, and **getGutterWidth** methods to return the number of columns in the grid container, and column width and gutter width of the grid container. Press and hold the component to call the **getSizeType** method to return the size-responsive type of the grid container (**xs**|**sm**|**md**|**lg**).
```
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;"
onclick="getColumns" onlongpress="getSizeType">
<grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left:
40%;"></grid-row>
<grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
25%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left:
10%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
</grid-container>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
justify-content: center;
align-items: center;
}
```
```
// index.js
import prompt from '@system.prompt';
export default {
data:{
gutterWidth:'',
columnWidth:'',
columns:'',
},
getColumns(){
this.$element('mygrid').getColumnWidth((result)=>{
this.columnWidth = result;
})
this.$element('mygrid').getGutterWidth((result)=>{
this.gutterWidth = result;
})
this.$element('mygrid').getColumns((result)=>{
this.columns= result;
})
setTimeout(()=>{
prompt.showToast({duration:5000,message:'columnWidth:'+this.columnWidth+',gutterWidth:'+
this.gutterWidth+',getColumns:'+this.columns})
})
},
getSizeType(){
this.$element('mygrid').getSizeType((result)=>{
prompt.showToast({duration:2000,message:'get size type:'+result})
})
},
}
```
![en-us_image_0000001231843088](figures/en-us_image_0000001231843088.gif)
## Adding &lt;grid-col&gt;
After adding a **&lt;grid-row&gt;** child component to **&lt;grid-container&gt;**, add a **&lt;grid-col&gt;** child component to **&lt;grid-row&gt;** to form a layout.
```
<!-- index.hml -->
<div class="container">
<grid-container id="mygrid" columns="4" gutter="0" style="background-color: pink;" onclick="getColumns" onlongpress="getSizeType">
<grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%;">
<grid-col span="0">
<div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
<text style="color: dodgerblue;" onclick="getCol">top</text>
</div>
</grid-col>
</grid-row>
<grid-row style="height:500px;justify-content:space-around;background-color: #3b55ef;width: 100%;">
<grid-col span="0" style="width: 20%;">
<div style="align-items: center;justify-content: center;height: 100%;width: 100%;">
<text style="color: dodgerblue;">left</text>
</div>
</grid-col>
<grid-col span="0" style="background-color:orange;width: 80%;">
<div style="width: 100%;height: 100%;align-items: center;justify-content: center;">
<text>right</text>
</div>
</grid-col>
</grid-row>
<grid-row style="height: 100px;justify-content: space-around;background-color: #4cbff3;width: 100%;">
<grid-col style="background-color:#c075ef;" span="0">
<div style="width: 100%;height: 100%;padding: 20px;align-items: center;justify-content: center;">
<text>bottom</text>
</div>
</grid-col>
</grid-row>
</grid-container>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
justify-content: center;
align-items: center;
}
text{
color: white;
font-size: 40px;
```
![en-us_image_0000001231683124](figures/en-us_image_0000001231683124.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> **&lt;grid-row&gt;** supports only **&lt;grid-col&gt;** as a child component. You can add content only to **&lt;grid-col&gt;**.
## Example Scenario
In this example, the content in the list is output cyclically to create a grid layout. When the user pulls down the screen, the **refresh** method is triggered. In this case, a piece of data is added to the list and **setTimeout** is set to refresh the request data.
```
<!-- index.hml -->
<div class="container">
<refresh refreshing="{{fresh}}" onrefresh="refresh">
<grid-container id="mygrid" gutter="20" style="margin: 10px;">
<grid-row style="height:200px;width: 100%;background-color: #e7e7e2;margin-top: 50px; padding: 0px 20px;border-radius: 15px;" for="item in list">
<grid-col span="0" style="width: 40%;">
<div style="align-items: center;justify-content: center">
<image src="{{item.src}}" style="object-fit: contain;border-radius: 30px;"></image>
</div>
</grid-col>
<grid-col span="0" style="width: 60%;">
<div style="align-items: center;justify-content: center;width: 100%;height: 100%;text-align: center;">
<text>image{{item.id}}</text>
</div>
</grid-col>
</grid-row>
</grid-container>
</refresh>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
}
text{
color: #0a0aef;
font-size: 60px;
}
```
```
// index.js
import prompt from '@system.prompt';
export default {
data:{
list:[
{src:'common/images/1.png',id:'1'},
{src:'common/images/2.png',id:'2'},
{src:'common/images/3.png',id:'3'}
],
fresh:false
},
refresh(e) {
prompt.showToast({
message: 'refreshing'
})
var that = this;
that.fresh = e.refreshing;
setTimeout(function () {
that.fresh = false;
that.list.unshift({src: 'common/images/4.png',id:'4'});
prompt.showToast({
message: 'succeed'
})
}, 2000)
}
}
```
![en-us_image_0000001276003501](figures/en-us_image_0000001276003501.gif)
en/application-dev/ui/ui-js-components-canvas.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;canvas&gt; Development
The **&lt;canvas&gt;** component provides a canvas for drawing customized graphics. For details, see [canvas](../reference/arkui-js/js-components-canvas-canvas.md).
## Creating a &lt;canvas&gt; Component
Create a **&lt;canvas&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<canvas></canvas>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
background-color: #00ff73;
}
```
![en-us_image_0000001232162316](figures/en-us_image_0000001232162316.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The default background color of the **&lt;canvas&gt;** component is the same as that of the parent component.
>
> - The default width and height of **&lt;canvas&gt;** are 300 px and 150 px, respectively.
## Adding Styles
Set **width**, **height**, **background-color**, and **border** of the **&lt;canvas&gt;** component.
```
<!-- xxx.hml -->
<div class="container">
<canvas></canvas>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
width: 500px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
```
![en-us_image_0000001231843104](figures/en-us_image_0000001231843104.png)
## Adding Events
Add the long press event to the **&lt;canvas&gt;** component. When the event is triggered, the value of **dataUrl** (image information returned by the **toDataURL** method) of the **&lt;canvas&gt;** component can be obtained and printed in the text area below.
```
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1" onlongpress="getUrl"></canvas>
<text>dataURL</text>
<text class="content">{{dataURL}}</text>
</div>
```
```
/* xxx.css */.container{ flex-direction: column; justify-content: center; align-items: center; background-color: #F1F3F5;}canvas{ width: 500px; height: 500px; background-color: #fdfdfd; border: 5px solid red;
margin-bottom: 50px;
}.content{ border: 5px solid blue; padding: 10px; width: 90%; height: 400px; overflow: scroll;}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
dataURL:null,
antialia: false,
porc:'open',
},
onShow(){
let el = this.$refs.canvas1;
let ctx = el.getContext("2d");
ctx.strokeRect(100,100,300,300);
},
getUrl(){
let el = this.$refs.canvas1;
let dataUrl = el.toDataURL();
this.dataURL = dataUrl;
prompt.showToast({duration:2000,message:"long press,get dataURL"});
}
}
```
![en-us_image_0000001276003513](figures/en-us_image_0000001276003513.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> The **&lt;canvas&gt;** component cannot be created in **onInit** or **onReady**.
en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md 0 → 100644
浏览文件 @ 658e31f5
# CanvasRenderingContext2D
Use **CanvasRenderingContext2D** to draw objects such as graphics, texts, line segments, and images on the **&lt;canvas&gt;** component. For details, see [CanvasRenderingContext2D](../reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md).
## Drawing Line Segments
Use **moveTo** and **lineTo** to draw a line segment. Use the **closePath** method to end current path, obtaining a closed path. Set **quadraticCurveTo** (quadratic bezier curve) or **bezierCurveTo** (cubic bezier curve) to draw a graphic.
```
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
<select @change="change">
<option value="value1"> line </option>
<option value="value2"> quadratic </option>
<option value="value3"> bezier </option>
<option value="value4"> arc/ellipse </option>
<option value="value5"> lineJoin/miterLimit </option>
</select>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
width: 600px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
select{
margin-top: 50px;
width: 250px;
height: 100px;
background-color: white;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
ctx: null,
},
onShow(){
this.el = this.$refs.canvas1;
this.ctx = this.el.getContext("2d",{antialias: true});
// Clear the contents on the canvas.
this.ctx.clearRect(0, 0, 600, 500);
// Create a drawing path.
this.ctx.beginPath();
// Square off the endpoints of the line.
this.ctx.lineCap = 'butt';
// Border width
this.ctx.lineWidth = 15;
// Create a drawing path.
this.ctx.beginPath();
// Move a drawing path from the current point to a target position.
this.ctx.moveTo(200, 100);
// Connect the current point to a target position.
this.ctx.lineTo(400, 100);
// Stroke a path.
this.ctx.stroke();
this.ctx.beginPath();
// Round the endpoints of the line.
this.ctx.lineCap = 'round';
this.ctx.moveTo(200, 200);
this.ctx.lineTo(400, 200);
this.ctx.stroke();
// Square off the endpoints of the line.
this.ctx.beginPath();
this.ctx.lineCap = 'square';
this.ctx.moveTo(200, 300);
this.ctx.lineTo(400, 300);
this.ctx.stroke();
},
change(e){
if(e.newValue == 'value1'){
this.el = this.$refs.canvas1;
this.ctx = this.el.getContext("2d",{antialias: true});
this.ctx.clearRect(0, 0, 600, 500);
// Top
this.ctx.beginPath();
this.ctx.lineCap = 'butt';
this.ctx.moveTo(200, 100);
this.ctx.lineTo(400, 100);
this.ctx.stroke();
// Center
this.ctx.beginPath();
this.ctx.lineCap = 'round';
this.ctx.moveTo(200, 200);
this.ctx.lineTo(400, 200);
this.ctx.stroke();
// Bottom
this.ctx.beginPath();
this.ctx.lineCap = 'square';
this.ctx.moveTo(200, 300);
this.ctx.lineTo(400, 300);
this.ctx.stroke();
}else if(e.newValue == 'value2'){
this.ctx.clearRect(0, 0, 600, 500);
// Top
this.ctx.beginPath();
this.ctx.moveTo(100, 150);
// Path of the quadratic bezier curve
this.ctx.quadraticCurveTo(300, 50, 500, 150);
this.ctx.stroke();
// Left
this.ctx.beginPath();
this.ctx.moveTo(200, 150);
this.ctx.quadraticCurveTo(250, 250, 250, 400);
this.ctx.stroke();
// Right
this.ctx.beginPath();
this.ctx.moveTo(400, 150);
this.ctx.quadraticCurveTo(350, 250, 350, 400);
this.ctx.stroke();
}else if(e.newValue == 'value3'){
this.ctx.clearRect(0, 0, 600, 500);
// Bottom
this.ctx.beginPath();
this.ctx.moveTo(100, 200);
// Path of the cubic bezier curve
this.ctx.bezierCurveTo(150, 100, 200, 100,250, 200);
this.ctx.stroke();
// Left
this.ctx.beginPath();
this.ctx.moveTo(350, 200);
this.ctx.bezierCurveTo(400, 100, 450, 100,500, 200);
this.ctx.stroke();
// Right
this.ctx.beginPath();
this.ctx.moveTo(200, 350);
this.ctx.bezierCurveTo(250, 500, 350, 500, 400, 350);
this.ctx.stroke();
}else if(e.newValue == 'value4'){
this.ctx.clearRect(0, 0, 600, 500);
this.ctx.beginPath();
this.ctx.moveTo(100, 200);
// Arc
this.ctx.arcTo(150, 300, 350, 300, 150);
this.ctx.stroke();
this.ctx.beginPath();
// Ellipse
this.ctx.ellipse(400, 250, 50, 100, Math.PI * 0.25, Math.PI * 0.5 , Math.PI , 1);
this.ctx.stroke();
}else if(e.newValue == 'value5'){
this.ctx.clearRect(0, 0, 600, 500);
// Upper left
this.ctx.beginPath();
// Draw a sector centered at the common endpoint of connected line segments.
this.ctx.lineJoin = 'round';
this.ctx.moveTo(100, 100);
this.ctx.lineTo(200, 200);
this.ctx.lineTo(100, 250);
this.ctx.stroke();
// lower left
this.ctx.beginPath();
// Fill a triangular between the common endpoint of connected segments.
this.ctx.lineJoin = 'bevel';
this.ctx.moveTo(100, 300);
this.ctx.lineTo(200, 400);
this.ctx.lineTo(100, 450);
this.ctx.stroke();
// Top right
this.ctx.beginPath();
// Distance between the internal angle and exterior angle at the intersection of lines
this.ctx.lineJoin = 'miter';
this.ctx.miterLimit = 3;
this.ctx.moveTo(400, 100);
this.ctx.lineTo(450, 200);
this.ctx.lineTo(400, 250);
// Draw a closed path.
this.ctx.closePath();
this.ctx.stroke();
// Lower right
this.ctx.beginPath();
this.ctx.lineJoin = 'miter';
this.ctx.miterLimit = 10;
this.ctx.moveTo(400, 300);
this.ctx.lineTo(450, 400);
this.ctx.lineTo(400, 450);
this.ctx.closePath();
this.ctx.stroke();
}
},
}
```
![en-us_image_0000001232162320](figures/en-us_image_0000001232162320.gif)
## Drawing Border
Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle with the border width of 5 upon initialization. Change the border width (**lineWidth**), color (**strokeStyle**), and line dash level (**setLineDash**). Add the **change** event to the **&lt;select&gt;** component. The **change** event will be triggered upon selection and the changed image will be displayed.
```
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
<select @change="change">
<option value="value1">strokeRect</option>
<option value="value2">arc</option>
<option value="value3">lineDashRect</option>
<option value="value4">fillRect</option>
</select>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
width: 600px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
select{
margin-top: 50px;
width: 250px;
height: 100px;
background-color: white;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
ctx: null,
},
onShow(){
this.el = this.$refs.canvas1;
this.ctx = this.el.getContext("2d",{antialias: true});
this.ctx.lineWidth = 5;
this.ctx.strokeRect(200, 150, 200, 200);
},
change(e){
if(e.newValue == 'value1'){
// Clear the contents on the canvas.
this.ctx.clearRect(0,0,600,500);
// Border width
this.ctx.lineWidth = 5;
// Border color
this.ctx.strokeStyle = '#110000';
// Line dash level of the border
this.ctx.setLineDash([0,0]);
// Draw a stroked rectangle.
this.ctx.strokeRect(200, 150, 200, 200);
}else if(e.newValue == 'value2'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 30;
this.ctx.strokeStyle = '#0000ff';
this.ctx.setLineDash([0,0]);
// Draw a circle.
this.ctx.arc(300, 250, 150,0,6.28);
// Draw borders.
this.ctx.stroke();
}else if(e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500);
this.ctx.lineWidth = 5;
this.ctx.setLineDash([5,5]);
this.ctx.strokeRect(200, 150, 200, 200);
}else if(e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500);
// Draw and fill a rectangle.
this.ctx.fillStyle = '#0000ff';
this.ctx.fillRect(200, 150, 200, 200);
}
},
}
```
![en-us_image_0000001232003004](figures/en-us_image_0000001232003004.gif)
## Setting Gradient Fill Colors
Add the **createLinearGradient** and **createRadialGradient** attributes to create a gradient container, use the **addColorStop** method to add multiple color blocks to form a gradient color, and set **fillStyle** as **gradient** to apply the gradient color to a rectangle. Then set the shadow blur level by using **shadowBlur**, the shadow color by using **shadowColor**, and the shadow offset by using **shadowOffset**.
```
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
<select @change="change">
<option value="value1">LinearGradient</option>
<option value="value2">RadialGradient</option>
<option value="value3">shadowBlur</option>
<option value="value4">shadowOffset</option>
</select>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
width: 600px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
select{
margin-top: 50px;
width: 250px;
height: 100px;
background-color: white;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
ctx: null,
},
onShow(){
this.el = this.$refs.canvas1;
this.ctx = this.el.getContext("2d",{antialias: true});
// Create a linear gradient.
let gradient = this.ctx.createLinearGradient(100,100, 400,300);
// Add gradient colors.
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.7, 'white');
gradient.addColorStop(1.0, 'green');
// Apply the gradient.
this.ctx.fillStyle = gradient;
this.ctx.fillRect(100, 100, 400, 300);
},
change(e){
if(e.newValue == 'value1'){
// Clear the contents on the canvas.
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createLinearGradient(100,100, 400,300);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.7, 'white');
gradient.addColorStop(1.0, 'green');
this.ctx.fillStyle = gradient;
// Set the level of shadow blur.
this.ctx.shadowBlur = 0;
// Set the distance that shadows will be offset vertically.
this.ctx.shadowOffsetY = 0;
// Set the distance that shadows will be offset horizontally.
this.ctx.shadowOffsetX = 0;
this.ctx.fillRect(100, 100, 400, 300);
}else if(e.newValue == 'value2'){
this.ctx.clearRect(0,0,600,500);
// Create a radial gradient.
let gradient = this.ctx.createRadialGradient(300,250,20,300,250,100);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.7, 'white');
gradient.addColorStop(1.0, 'green');
this.ctx.shadowBlur = 0;
this.ctx.shadowOffsetY = 0;
this.ctx.shadowOffsetX = 0;
this.ctx.fillStyle = gradient;
this.ctx.fillRect(100, 100, 400, 300);
}else if(e.newValue == 'value3'){
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createLinearGradient(100,100, 400,400);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35');
// Set the level of shadow blur.
this.ctx.shadowBlur = 30;
// Set the shadow color.
this.ctx.shadowColor = 'rgb(229, 16, 16)';
this.ctx.fillStyle = gradient;
this.ctx.fillRect(100, 100, 400, 300);
}else if(e.newValue == 'value4'){
this.ctx.clearRect(0,0,600,500);
this.ctx.clearRect(0,0,600,500);
let gradient = this.ctx.createRadialGradient(300,250,20,300,250,200);
gradient.addColorStop(0.0, 'red');
gradient.addColorStop(0.5, 'white');
gradient.addColorStop(1, '#17ea35');
// Set the level of shadow blur.
this.ctx.shadowBlur = 30;
this.ctx.shadowOffsetY = 30;
// Set the shadow color.
this.ctx.shadowColor = 'rgb(23, 1, 1)';
this.ctx.fillStyle = gradient;
this.ctx.fillRect(100, 100, 400, 300);
}
},
}
```
![en-us_image_0000001231683148](figures/en-us_image_0000001231683148.gif)
## Filling Texts
Create a text and use the **fillText** method to write the text on the canvas. Use the **globalAlpha** attribute to change the baseline transparency to avoid the text being hidden by the baseline. Then set the **textAlign** and **textBaseline** attributes to determine the text position based on the baseline.
```
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
<select @change="change">
<option value="value1">text</option>
<option value="value2">textBaseline</option>
<option value="value3">textAlign</option>
</select>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
width: 600px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
select{
margin-top: 50px;
width: 250px;
height: 100px;
background-color: white;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
ctx: null,
},
onShow(){
this.el = this.$refs.canvas1;
this.ctx = this.el.getContext("2d",{antialias: true});
// Create a text.
let text = "Hello World";
// Set the font.
this.ctx.font = '30px';
this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
// Set the fill text.
this.ctx.fillText(text, 200, 250);
},
change(e){
if(e.newValue == 'value1'){
// Clear the contents on the canvas.
this.ctx.clearRect(0,0,600,500);
// Start a new path.
this.ctx.beginPath();
// Initialize the textAlign value.
this.ctx.textAlign = 'left';
// Initialize textBaseline.
this.ctx.textBaseline = 'alphabetic';
// Set the font.
this.ctx.font = '30px';
let text = "Hello World";
// Obtain the font width.
this.ctx.fillText("with:"+this.ctx.measureText(text).width, 200, 300);
// Set the fill text.
this.ctx.fillText(text, 200, 250);
}else if(e.newValue == 'value2'){
this.ctx.clearRect(0,0,600,500);
this.ctx.beginPath();
// Set the Alpha value.
this.ctx.globalAlpha = 0.1;
// Set the line width.
this.ctx.lineWidth = 10;
// Set the line segment color.
this.ctx.strokeStyle = '#0000ff';
// Move from the current point to a target position.
this.ctx.moveTo(0, 240);
// Connect the current point to a target position.
this.ctx.lineTo(600, 240);
this.ctx.stroke();
this.ctx.font = '35px';
this.ctx.globalAlpha = 1;
// Initialize the textAlign value.
this.ctx.textAlign = 'left';
// Set textBaseline.
this.ctx.textBaseline = 'top';
this.ctx.fillText('Top', 50, 240);
this.ctx.textBaseline = 'bottom';
this.ctx.fillText('Bottom', 200, 240);
this.ctx.textBaseline = 'middle';
this.ctx.fillText('Middle', 400, 240);
}else if(e.newValue == 'value3'){
// Clear the contents on the canvas.
this.ctx.clearRect(0,0,600,500);
this.ctx.beginPath();
this.ctx.globalAlpha = 0.1;
this.ctx.lineWidth = 10;
this.ctx.strokeStyle = '#0000ff';
this.ctx.moveTo(300, 0);
this.ctx.lineTo(300, 500);
this.ctx.stroke();
this.ctx.font = '35px';
this.ctx.globalAlpha = 1;
// Initialize textBaseline.
this.ctx.textBaseline = 'alphabetic';
// Set textAlign.
this.ctx.textAlign = 'left';
this.ctx.fillText('textAlign=left',300, 100);
this.ctx.textAlign = 'center';
this.ctx.fillText('textAlign=center',300, 250);
this.ctx.textAlign = 'right';
this.ctx.fillText('textAlign=right',300, 400);
}
}
}
```
![en-us_image_0000001276162745](figures/en-us_image_0000001276162745.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> In the **ltr** layout mode, the value **start** equals **left**. In the **rtl** layout mode, the value **start** equals **right**.
## Adding Images
After creating an image object, use the **drawImage** attribute to draw the image and set animation styles such as scaling, translating, and rotating.
```
<!-- xxx.hml -->
<div class="container">
<div class="content">
<canvas ref="canvas0"></canvas>
<text onclick="change">change</text>
<canvas ref="canvas1"></canvas>
<text onclick="rotate">rotate</text>
<canvas ref="canvas2"></canvas>
<text onclick="scale">scale</text>
<canvas ref="canvas3"></canvas>
<text onclick="translate" style="width: 300px;">translate</text>
<canvas ref="canvas4"></canvas>
<text onclick="transform" style="width: 300px;">transform</text>
<canvas ref="canvas5"></canvas>
<text onclick="setTransform" style="width: 300px;">setTransform</text>
<canvas ref="canvas6"></canvas>
</div>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
}
canvas{
width: 600px;
height: 300px;
margin-bottom: 100px;
background-color: #fdfdfd;
border: 5px solid red;
}
.content{
width: 80%;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
text{
font-size: 35px;
width: 200px;
height: 80px;
color: white;
border-radius: 20px;
text-align: center;
background-color: #6060e7;
margin-bottom: 30px;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
compositeOperation: 'source-over'
},
onShow(){
let ctx = this.$refs.canvas0.getContext("2d");
// Create an image object.
let img = new Image();
// Set the image path.
img.src = 'common/images/2.png';
// Set the image width.
img.width= 150;
// Set the image height.
img.height=150;
// Create an image tiling container.
var pat = ctx.createPattern(img, 'repeat');
ctx.fillStyle = pat;
ctx.fillRect(0, 0, 600, 300);
},
change(){
// Obtain the brush after the canvas is created.
let ctx = this.$refs.canvas1.getContext("2d");
ctx.clearRect(0,0,600,1000);
if(this.compositeOperation == "source-over"){
this.compositeOperation = "destination-over";
}else{
this.compositeOperation = "source-over";
}
ctx.globalCompositeOperation = this.compositeOperation;
let img = new Image();
img.src = 'common/images/2.png';
// Invoked when the image is successfully obtained.
img.onload = function() {
ctx.drawImage(img, 150, 20, 200, 200);
};
let img1 = new Image();
img1.src = 'common/images/3.png';
img1.onload = function() {
// Draw an image.
ctx.drawImage(img1, 250, 80, 200, 200);
};
// A method is triggered when the image fails to be obtained.
img1.onerror = function() {
prompt.showToast({message:"error",duration:2000})
};
},
rotate(){
let ctx = this.$refs.canvas2.getContext("2d");
ctx.clearRect(0,0,600,300);
// Rotate the image.
ctx.rotate(10 * Math.PI / 180);
let img = new Image();
img.src = 'common/images/2.png';
img.onload = function() {
ctx.drawImage(img, 300, 0, 100, 100);
};
},
scale(){
let ctx = this.$refs.canvas3.getContext("2d");
ctx.clearRect(0,0,600,200);
// Scale the image.
ctx.scale(1.3,1.2);
let img = new Image();
img.src = 'common/images/2.png';
img.onload = function() {
ctx.drawImage(img, 0, 0, 50, 50);
};
},
translate(){
let ctx = this.$refs.canvas4.getContext("2d");
ctx.clearRect(0,0,600,300);
ctx.translate(10,0);
let img = new Image();
img.src = 'common/images/2.png';
img.onload = function() {
ctx.drawImage(img, 0, 50, 300, 200);
};
},
transform(){
let ctx = this.$refs.canvas5.getContext("2d");
ctx.clearRect(0,0,600,300);
ctx.transform(1.1, 0.1, 0.1, 1, 10, 0);
let img = new Image();
img.src = 'common/images/2.png';
img.onload = function() {
ctx.drawImage(img, 0, 50, 100, 100);
};
},
setTransform(){
let ctx = this.$refs.canvas6.getContext("2d");
ctx.clearRect(0,0,600,300);
ctx.setTransform(1.1, 0.1, 0.1, 1, 10, 0);
let img = new Image();
img.src = 'common/images/2.png';
img.onload = function() {
ctx.drawImage(img, 0, 50, 100, 100);
};
},
}
```
![en-us_image_0000001232003008](figures/en-us_image_0000001232003008.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - Unlike the **transform()** function, the **setTransform()** function resets the existing transformation matrix and creates a transformation matrix even if it uses the same parameters.
>
> - The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation.
> x' = scaleX \* x + skewY \* y + translateX
>
> y' = skewX \* x + scaleY \* y + translateY
## Adding Methods
Use the **save** method to save the brush style, and use the **restore** method to restore the saved settings. In the following example, set the brush to red. After the brush setting is saved, clear the canvas and change the brush to blue. In this moment, directly using the brush will get a blue rectangle; using the brush after the restore operation will get a red rectangle.
```
<!-- xxx.hml -->
<div class="container">
<div class="content">
<canvas ref="canvas"></canvas>
</div>
<div class="content">
<text onclick="save">save</text>
<text onclick="clear">clear</text>
<text onclick="restore">restore</text>
</div>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
}
canvas{
margin-top: 300px;
width: 600px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
.content{
width: 80%;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
text{
width: 150px;
height: 80px;
color: white;
border-radius: 20px;
text-align: center;
background-color: #6060e7;
margin-bottom: 30px;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
ctx: '',
},
onShow(){
this.ctx = this.$refs.canvas.getContext("2d");
this.ctx.fillStyle = "red"
this.ctx.fillRect(200, 150, 200, 200);
},
save(){
// Save the brush setting.
this.ctx.save();
prompt.showToast({message:"save succeed"});
},
clear(){
this.ctx.clearRect(0,0,600,500);
// Change the brush color.
this.ctx.fillStyle = "#2133d2";
},
restore(){
this.ctx.beginPath();
// Restore the brush setting.
this.ctx.restore();
this.ctx.fillRect(200, 150, 200, 200);
},
}
```
![en-us_image_0000001231683144](figures/en-us_image_0000001231683144.gif)
en/application-dev/ui/ui-js-components-chart.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;chart&gt; Development
The **&lt;chart&gt;** component displays line charts, gauge charts, and bar charts. For details, see [chart](../reference/arkui-js/js-components-basic-chart.md).
## Creating a &lt;chart&gt; Component
Create a **&lt;chart&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
.chart-data {
width: 700px;
height: 600px;
}
```
```
/* xxx.js */
export default {
data: {
lineData: [
{
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716]
}
],
lineOps: {
xAxis: {
min: 0,
max: 20,
display: false,
},
yAxis: {
min: 0,
max: 1000,
display: false,
},
series: {
lineStyle: {
width: 15,
},
}
},
}
}
```
![en-us_image_0000001231683156](figures/en-us_image_0000001231683156.png)
## Setting the Chart Type
Define the chart type using the **type** attribute, for example, setting a chart to a bar chart.
```
<!-- xxx.hml -->
<div class="container">
<div class="container">
<div class="switch-block">
<text class="title">
{{ title }}
</text>
</div>
<tabs class="tabs" index="0" vertical="false" onchange="changes">
<tab-content class="tabcontent" scrollable="true">
<tabs >
<tab-bar class="tab-bar" mode="fixed"style="margin-bottom: 50px;">
<text class="tab-text">Line chart</text>
<text class="tab-text">Bar chart</text>
<text class="tab-text">Gauge chart</text>
</tab-bar>
<tab-content>
<div class="bar-block" style="margin-left: 30px;">
<chart class="chart-data"type="line" ref="linechart" options="{{ lineOps }}" datasets="{{ lineData }}">
</chart>
</div>
<div class="bar-block">
<chart class="data-bar"type="bar" id="bar-chart" options="{{ barOps }}" datasets="{{ barData }}">
</chart>
</div>
<div class="chart-block">
<chart type="gauge" ></chart>
</div>
</tab-content>
</tabs>
</tab-content>
</tabs>
</div>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
background-color: #F1F3F5;
}
.chart-data {
width: 700px;
height: 600px;
}
.title{
margin-left: 50px;
margin-top: 50px;
font-size: 50px;
}
.line-block{
align-items: center;
justify-content: center;
}
.bar-block{
align-items: center;
justify-content: center;
}
.chart-block{
width: 90%;
margin-left: 30px;
}
```
```
/* xxx.js */
export default {
data: {
title:"Type display",
barData: [
{
fillColor: '#3848e8',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595],
}
],
lineData: [
{
strokeColor: '#0081ff',
fillColor: '#cce5ff',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
gradient: true,
}
],
lineOps: {
xAxis: {
min: 0,
max: 20,
display: false,
},
yAxis: {
min: 0,
max: 1000,
display: false,
},
series:{
lineStyle: {
width: "5px",
smooth: true,
},
headPoint: {
shape:"circle",
size: 20,
strokeWidth: 5,
fillColor: '#ffffff',
strokeColor: '#007aff',
display: true,
},
loop:{
margin: 2,
gradient: true
}
},
},
barOps: {
xAxis: {
min: 0,
max: 20,
display: false,
axisTick: 10,
},
yAxis: {
min: 0,
max: 1000,
},
},
},
}
```
![en-us_image_0000001275803181](figures/en-us_image_0000001275803181.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> The **&lt;chart&gt;** component does not display the value of each point.
## Setting the Chart Attributes
In the **options** attribute of the **&lt;chart&gt;** component, you can set the x-axis, y-axis, and data series parameters. In the **datasets** attribute, you can set the line color, fill color, gradient fill color, and drawing point set.
```
<!-- xxx.hml -->
<div class="container">
<chart class="chart-data" type="line" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
.chart-data {
width: 700px;
height: 600px;
}
```
```
/* xxx.js */
export default {
data: {
// Line chart data
lineData: [
{
strokeColor: '#0081ff',
fillColor: '#cce5ff', // Fill color
data: [463, 250, 251, 254, 431, 354, 225, 396, 295, 328, 491, 205, 313, 275, 475, 553, 491, 380, 357, 416],
gradient: true,
}
],
lineOps: {
// X-axis parameters
xAxis: {
min: 0,
max: 20,
display: false,
},
// Y-axis parameters
yAxis: {
min: 0,
max: 1000,
display: false,
},
// Data series parameters
series: {
// Line style
lineStyle: {
width: "5px",
smooth: true,
},
// Style and size of the white point at the start of the line
headPoint: {
shape: "circle",
size: 20,
strokeWidth: 5,
fillColor: '#ffffff',
strokeColor: '#007aff',
display: true,
},
// Whether to start drawing again when the screen is looped.
loop: {
margin: 2,
gradient: true
}
}
},
},
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The **options** attribute supports the settings of bar charts and line charts but does not support those of gauge charts.
>
> - The **datasets** attribute supports the datasets for bar charts and line charts but does not support those of gauge charts.
>
> - Only line charts support **series**.
## Adding Data
Use the **append** method of the **&lt;chart&gt;** component to dynamically add data.
```
<!-- xxx.hml -->
<div class="container">
<stack class="chart-region">
<chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" datasets="{{lineData}}"></chart>
</stack>
<button value="Add data"onclick="addData"></button>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
.chart-region {
height: 400px;
width: 700px;
}
.chart-data {
width: 700px;
height: 600px;
}
button {
width: 100%;
height: 50px;
background-color: #F4F2F1;
text-color: #0C81F3;
margin-top: 30px;
}
```
```
// xxx.js
export default {
data: {
lineData: [
{
strokeColor: '#de0b6e',
fillColor: '#bb09a3',
data: [763, 550, 551, 554, 731, 654, 525, 696, 595, 628, 791, 505, 613, 575, 475, 553, 491, 680, 657, 716],
gradient: true,
}
],
lineOps: {
xAxis: {
min: 0,
max: 20,
display: false,
},
yAxis: {
min: 0,
max: 1000,
display: false,
},
series: {
lineStyle: {
width: "5px",
smooth: true,
},
headPoint: {
shape: "circle",
size: 20,
strokeWidth: 5,
fillColor: '#ffffff',
strokeColor: '#f8145c',
display: true,
},
loop: {
margin: 2,
gradient: true,
}
}
},
},
addData() {
this.$refs.linechart.append({
serial: 0,
data: [Math.floor(Math.random() * 400) + 200]
})
}
}
```
![en-us_image_0000001275803177](figures/en-us_image_0000001275803177.gif)
## Example Scenario
Select the data display status using **&lt;switch&gt;**. When **&lt;switch&gt;** is set to **true**, the timer is used to dynamically display data.
```
<!-- xxx.hml -->
<div class="container">
<div class="container">
<div class="switch-block">
<text class="title">{{ title }} </text>
<switch class="switch" showtext="{{ showText }}" allow-scale="{{ allowScale }}"onchange="change">
</switch>
</div>
<tabs class="tabs" index="0" vertical="false" onchange="changes">
<tab-content class="tabcontent" scrollable="true">
<div>
<tabs class="tabs" index="0" vertical="false" onchange="changes">
<tab-content class="tabcontent" scrollable="true">
<div class="line-class">
<div class="bar-block">
<chart class="chart-data" type="line" ref="linechart" options="{{ lineOps }}"
datasets="{{ lineData }}">
</chart>
</div>
<div class="bar-block">
<chart class="data-bar" type="bar" id="bar-chart" options="{{ barOps }}"datasets="{{ barData }}">
</chart>
</div>
</div>
</tab-content>
</tabs>
</div>
<div>
<div class="container">
<list class="todo-wrapper">
<list-item for="{{ barData }}" class="todo-item">
<text class="todo-title">{{ $item.data }}</text>
</list-item>
</list>
<list class="todo-wrapper">
<list-item for="{{ lineData.data }}" class="todo-item">
<text class="todo-title">{{ $item.value }}</text>
</list-item>
</list>
</div>
</div>
</tab-content>
</tabs>
</div>
</div>
```
```
/* xxx.css */
.container{
display:flex;
flex-direction:column;
background-color: #F1F3F5;
}
.line-class{
display: flex;
flex-direction: column;
}
.title{
font-size: 40px;
margin-left: 40px;
}
.switch-block {
margin-top: 30px;
width: 98%;
height: 80px;
display: flex;
justify-content: space-between;
}
.switch{
font-size: 40px;
}
.bar-block {
margin-top: 80px;
margin-left: 40px;
position: relative;
width: 90%;
border-radius: 10px;
background-color: #25FAB27B;
height: 40%;
justify-content: center;
}
```
```
// xxx.js
export default {
data: {
interval: null,
title: "Data Display",
allowScale: true,
dataLength: 30,
barGroup: 3,
lineData: null,
lineOps: {
xAxis: {
min: 0,
max: 5
},
yAxis: {
min: 0,
max: 100
},
series: {
lineStyle: {
width: '1px',
},
headPoint: {
shape: 'circle',
size: 10,
strokeWidth: 2,
fillColor: '#ffffff',
strokeColor: '#8477DF'
},
loop: {
margin: 2
}
}
},
barData: [
{
fillColor: '#97CF0A2C',
data: [20, 20,40, 56]
},
{
fillColor: '#6D0A7ACF',
data: [52, 40, 2, 67]
},
{
fillColor: '#6A0ACFA1',
data: [56, 2, 77, 40]
}
],
barOps: {
xAxis: {
min: 0,
max: 20,
axisTick: 5
},
yAxis: {
min: 0,
max: 100
}
}
},
onInit() {
this.changeLine();
},
change(e) {
if (e.checked) {
this.interval = setInterval(() => {
this.changeLine();
this.changeBar();
}, 1000)
} else {
clearInterval(this.interval);
}
},
changeLine() {
var dataArray = [];
for (var i = 0; i < this.dataLength; i++) {
var nowValue = Math.floor(Math.random() * 99 + 1);
var obj = {
"value": nowValue,
"description": nowValue + "",
"textLocation": "top",
"textColor": "#CDCACA",
"pointStyle": {
"shape": "circle",
"size": 5,
"fillColor": "#CF0A2C",
"strokeColor": "#CF0A2C"
}
};
dataArray.push(obj);
}
this.lineData = [
{
strokeColor: '#0081ff',
fillColor: '#FF07CDC4',
data: dataArray,
gradient: true,
}
]
},
changeBar() {
for (var i = 0;i < this.barGroup; i++) {
var dataArray = this.barData[i].data;
for (var j = 0;j < 4; j++) {
dataArray[j] = Math.floor(Math.random() * 99 + 1);
}
}
this.barData = this.barData.splice(0, this.barGroup + 1);
},
changes(e) {
console.log("Tab index: " + e.index);
},
}
```
![en-us_image_0000001232162328](figures/en-us_image_0000001232162328.gif)
en/application-dev/ui/ui-js-components-dialog.md
浏览文件 @ 658e31f5
# &lt;dialog&gt; Development
The &lt;dialog&gt; component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md).
The **&lt;dialog&gt;** component is custom pop-up container for showing critical information or calling for an action. For details, see [dialog](../reference/arkui-js/js-components-container-dialog.md).
## Creating a &lt;dialog&gt; Component
Create a &lt;dialog&gt; component in the .hml file under pages/index and add &lt;button&gt; components to trigger the &lt;dialog&gt;. The &lt;dialog&gt; component supports only the width, height, margin, margin-[left|top|right|bottom], and margin-[start|end] styles.
Create a **&lt;dialog&gt;** component in the .hml file under **pages/index** and add **&lt;button&gt;** components to trigger the **&lt;dialog&gt;**. The **&lt;dialog&gt;** component supports only the **width**, **height**, **margin**, **margin-[left|top|right|bottom]**, and **margin-[start|end]** styles.
```
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId"><div class="content">
<dialog class="dialogClass" id="dialogId">
<div class="content" dragable="true">
<text>this is a dialog</text>
</div>
</dialog>
</dialog>
<button value="click me" onclick="openDialog"></button>
</div>
```
......@@ -23,6 +24,8 @@ The &lt;dialog&gt; component is custom pop-up container for showing critical inf
```
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -67,7 +70,9 @@ export default {
## Setting Dialog Box Response
Add a cancel event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the show and close methods to display and close the dialog box, respectively.
Add a **cancel** event that is triggered when a user touches a non-dialog area to cancel the pop-up dialog box. Add the **show** and **close** methods to display and close the dialog box, respectively.
```
<!-- xxx.hml -->
......@@ -82,9 +87,13 @@ Add a cancel event that is triggered when a user touches a non-dialog area to ca
</div>
```
```
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -113,6 +122,8 @@ button{
}
```
```
/* xxx.js */
import prompt from '@system.prompt';
......@@ -133,18 +144,20 @@ export default {
![en-us_image_0000001223287720](figures/en-us_image_0000001223287720.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - This component supports only one child component.
>
> - Attributes and styles of a &lt;dialog&gt; component cannot be dynamically updated.
> - Attributes and styles of a **&lt;dialog&gt;** component cannot be dynamically updated.
>
> - The &lt;dialog&gt; component does not support the focusable and click-effect attributes.
> - The **&lt;dialog&gt;** component does not support the **focusable** and **click-effect** attributes.
## Example Scenario
Use the &lt;dialog&gt; component to implement a schedule. When the dialog box is open, use the [&lt;textarea&gt;](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list.
Use the **&lt;dialog&gt;** component to implement a schedule. When the dialog box is open, use the [**&lt;textarea&gt;**](../reference/arkui-js/js-components-basic-textarea.md) component to add an event and touch the OK button to obtain the current time and save the input text. The events in the calendar are displayed in a list.
```
<!-- xxx.hml -->
......@@ -180,6 +193,8 @@ Use the &lt;dialog&gt; component to implement a schedule. When the dialog box is
</div>
```
```
/* xxx.css */
.doc-page {
......@@ -248,6 +263,8 @@ Use the &lt;dialog&gt; component to implement a schedule. When the dialog box is
}
```
```
/* xxx.js */
var info = null;
......
en/application-dev/ui/ui-js-components-form.md
浏览文件 @ 658e31f5
# &lt;form&gt; Development
The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md)components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) components to be submitted and reset. For details, see [form](../reference/arkui-js/js-components-container-form.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> This component is supported since API version 6.
## Creating a &lt;form&gt; Component
Create a &lt;form&gt; component in the .hml file under pages/index.
Create a **&lt;form&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<form> <input type="text" style="width:80%"></input>
</form>
<form> <input type="text" style="width:80%"></input>
</form>
</div>
```
......@@ -24,6 +24,8 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -36,7 +38,7 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
## Zooming In or Out on a Form
To implement the zoom effect after a form is clicked, add the click-effect attribute to the &lt;form&gt; component. For values of click-effect, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
To implement the zoom effect after a form is clicked, add the **click-effect** attribute to the **&lt;form&gt;** component. For values of **click-effect**, see [Universal Attributes](../reference/arkui-js/js-components-common-attributes.md).
```
<!-- xxx.hml -->
......@@ -48,10 +50,23 @@ The &lt;form&gt; component allows the content in [&lt;input&gt;](../reference/ar
```
## Setting the Form Style
## Setting Form Styles
Add the **background-color** and **border** attributes.
```
<!-- xxx.hml -->
<div class="container">
<form id="formId" class="formClass" click-effect="spring-large">
<input type="text"></input>
</form>
</div>
```
Add the background-color and border attributes.
```
/* xxx.css */
......@@ -63,8 +78,7 @@ Add the background-color and border attributes.
}
.formClass{
width: 80%;
padding: 10px;
border: 1px solid #c3d3e7;
height: 20%;
}
```
......@@ -74,24 +88,24 @@ Add the background-color and border attributes.
## Adding Response Events
To submit or reset a form, add the submit and reset events.
To submit or reset a form, add the **submit** and **reset** events.
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
<form onsubmit='onSubmit' onreset='onReset' style="justify-content: center; align-items: center;text-align: center;">
<div style="flex-direction: column;justify-content: center;align-self: center;">
<div style="justify-content: center; align-items: center;">
<label>Option 1</label>
<input type='radio' name='radioGroup' value='radio1'></input>
<label>Option 2</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<div style="margin-top: 30px;justify-content: center; align-items: center;">
<input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
<input type="reset" value="Reset" style="width:100px;"></input>
</div>
</div>
<div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form">
<div style="justify-content: center; width: 100%;">
<label>Option 1</label>
<input type='radio' name='radioGroup' value='radio1'></input>
<label>Option 2</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<div style="margin-top: 30px;justify-content: center; align-items: center;">
<input type="submit" value="Submit" style="width:100px; margin-right:20px;" ></input>
<input type="reset" value="Reset" style="width:100px;"></input>
</div>
</form>
</div>
```
......@@ -122,7 +136,7 @@ export default{
Select an option and submit or reset the form data.
Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) (en-us_topic_0000001173324647.xml) components, set their type attribute to checkbox and radio, and use the onsubmit and onreset events of the &lt;form&gt; component to submit and reset the form data.
Create [&lt;input&gt;](../reference/arkui-js/js-components-basic-input.md) components, set their **type** attribute to **checkbox** and **radio**, and use the **onsubmit** and **onreset** events of the **&lt;form&gt;** component to submit and reset the form data.
```
......
en/application-dev/ui/ui-js-components-image-animator.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;image-animator&gt; Development
The **&lt;image-animator&gt;** component applies an animation to images. For details, see [image-animator](../reference/arkui-js/js-components-basic-image-animator.md).
## Creating an &lt;image-animator&gt; Component
In the **pages/index** directory, create an **&lt;image-animator&gt;** component in the .hml file, define the component style in the .css file, and reference an image in the .js file.
```
<!-- xxx.hml -->
<div class="container">
<image-animator class="animator" images="{{frames}}" duration="3s"/>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
.animator {
width: 500px;
height: 500px;
}
```
```
/* index.js */
export default {
data: {
frames: [
{
src: "/common/landscape1.jpg",
},
{
src: "/common/landscape2.jpg",
}
],
},
};
```
![en-us_image_0000001275922969](figures/en-us_image_0000001275922969.gif)
## Setting the &lt;image-animator&gt; Attributes
Add the **iteration** (number of times the animation is played), **reverse** (whether the animation plays backward), **fixedsize** (whether the image size is fixed to the component size), **duration** (duration of the animation), and **fillmode** (style of the target when the animation is not playing) attributes.
```
<!-- xxx.hml -->
<div class="container">
<image-animator class="animator" fixedsize="false" iteration='2' reverse="false" ref="animator" fillmode="none" images="{{frames}}"duration="5s" />
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
}
.animator {
width: 500px;
height: 500px;
}
```
```
/* index.js */
export default {
data: {
frames: [
{
src: 'common/landscape1.jpg',
width: '250px',
height: '250px',
left: '150px',
top: '50px',
},
{
src: 'common/landscape2.jpg',
width: '300px',
height: '300px',
left: '150px',
top: '100px',
},
{
src: 'common/landscape1.jpg',
width: '350px',
height: '350px',
left: '150px',
top: '150px',
},
{
src: 'common/landscape2.jpg',
width: '400px',
height: '400px',
left: '150px',
top: '200px',
},
{
src: 'common/landscape3.jpg',
width: '450px',
height: '450px',
left: '150px',
top: '250px',
},
{
src: 'common/landscape4.jpg',
width: '500px',
height: '500px',
left: '150px',
top: '300px',
},
],
},
};
```
![en-us_image_0000001276003481](figures/en-us_image_0000001276003481.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - If the **duration** attribute is set in the **images** attribute, the **duration** attribute set in the **&lt;image-animator&gt;** component is invalid.
>
> - If **fixedsize** is set to **true**, the **width**, **height**, **top**, and **left** settings in **images** will not take effect.
>
> - Setting **reverse** to **false** indicates that images are played from the first one to the last one. Setting **reverse** to **true** indicates that images are played from the last one to the first one.
## Binding Events
Add the start, pause, stop, and resume events to the **&lt;image-animator&gt;** component. Specifically, the start event is triggered when the image animator starts playing; the pause event is triggered when the image animator is clicked; the resume event is triggered when the image animator is pressed and held; the stop event is triggered when the image animator stops playing.
```
<!-- xxx.hml -->
<div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="1" duration="10s" onstart="popstart" onpause="poppause"
onstop="popstop" onresume="popresume" onlongpress="setresume" onclick="setpause">
</image-animator>
</div>
```
```
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.img {
width: 600px;
height: 600px;
border: 3px solid orange;
}
```
```
/* index.js */
import prompt from '@system.prompt';
export default {
data: {
imginfo: [
{
src: 'common/landscape1.jpg',
},{
src: 'common/landscape2.jpg',
},{
src: 'common/landscape3.jpg',
},{
src: 'common/landscape4.jpg',
}
],
},
onInit() {
},
setpause(e) {
this.$element('img').pause()
},
setresume(e) {
this.$element('img').resume()
},
popstart(e) {
prompt.showToast({
message: 'Started.'
})
},
poppause(e) {
prompt.showToast({
message: 'Paused.'
})
},
popstop(e) {
prompt.showToast({
message: 'Stopped.'
})
},
popresume(e) {
prompt.showToast({
message: 'Resumed.'
})
}
}
```
![en-us_image_0000001231843076](figures/en-us_image_0000001231843076.gif)
## Example Scenario
You can click the start or stop button to change the image animation status.
Call the start, pause, stop, and resume methods to start, pause, stop, and resume the image animation, and call the **getState** method to check the image animation status.
```
<!-- xxx.hml -->
<div class="doc-page">
<image-animator class="img" id="img" images="{{imginfo}}" iteration="2" reverse="{{rev}}" duration="10s">
</image-animator>
<div style="width: 700px;height:450px;margin-top: 40px;flex-direction:column;justify-content:space-around;">
<div class="container">
<button type="capsule" value="Start" onclick="startimg"></button>
<button type="capsule" value="Pause" onclick="pauseimg"></button>
</div>
<div class="container">
<button type="capsule" value="Stop" onclick="stopimg"></button>
<button type="capsule" value="Resume" onclick="resumeimg"></button>
</div>
<div class="container">
<button type="capsule" value="Get Status" onclick="getimgstate"></button>
<button type="capsule" value="{{revVal}}" onclick="revimg"></button>
</div>
</div>
</div>
```
```
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.img {
width: 600px;
height: 600px;
border: 3px solid orange;
}
button{
width: 260px
}
.container {
width: 100%;
height: 120px;
align-items: center;
justify-content: space-around;
}
```
```
/* index.js */
import prompt from '@system.prompt';
export default {
data: {
rev:false,
imginfo: [
{
src: 'common/landscape1.jpg',
},{
src: 'common/landscape2.jpg',
},{
src: 'common/landscape3.jpg',
},{
src: 'common/landscape4.jpg',
}
],
revVal:'Reverse'
},
onInit() {
},
startimg(e) {
this.$element('img').start()
},
pauseimg(e) {
this.$element('img').pause()
},
stopimg(e) {
this.$element('img').stop()
},
resumeimg(e) {
this.$element('img').resume()
},
getimgstate(e) {
prompt.showToast({
message: 'Current state:' + this.$element('img').getState()
})
},
revimg(e) {
this.rev = !this.rev
if (this.rev) {
this.revVal ='Play Forward'
} else {
this.revVal ='Reverse'
}
}
}
```
![en-us_image_0000001276162717](figures/en-us_image_0000001276162717.gif)
en/application-dev/ui/ui-js-components-images.md
浏览文件 @ 658e31f5
# &lt;image&gt; Development
The &lt;image&gt; component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md).
The **&lt;image&gt;** component is used to render and display images. For details, see [image](../reference/arkui-js/js-components-basic-image.md).
## Creating an &lt;image&gt; Component
Create an &lt;image&gt; component in the .hml file under pages/index.
Create an **&lt;image&gt;** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
<div class="container">
<image src="common/images/bg-tv.jpg"> </image>
<image style="height: 30%;" src="common/images/bg-tv.jpg"> </image>
</div>
```
......@@ -19,6 +19,8 @@ The &lt;image&gt; component is used to render and display images. For details, s
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -31,7 +33,9 @@ The &lt;image&gt; component is used to render and display images. For details, s
## Setting the Image Style
Set the width, height, and object-fit attributes to define the width, height, and scale type of an image.
Set the **width**, **height**, and **object-fit** attributes to define the width, height, and scale type of an image.
```
<!-- index.hml -->
......@@ -40,31 +44,37 @@ Set the width, height, and object-fit attributes to define the width, height, an
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color:#F1F3F5;
}
image{
width: 80%; height: 500px;
width: 80%;
height: 500px;
border: 5px solid saddlebrown;
border-radius: 20px;
object-fit: contain;
object-fit: contain;
match-text-direction:true;
}
```
![en-us_image_0000001222807796](figures/en-us_image_0000001222807796.png)
## Loading Images
When an image is successfully loaded, the complete event is triggered, and the loaded image is returned. If an exception occurs during image loading, the error event is triggered, and the image loading failure is printed.
When an image is successfully loaded, the **complete** event is triggered, and the loaded image is returned. If an exception occurs during image loading, the **error** event is triggered, and the image loading failure is printed.
```
......@@ -83,6 +93,8 @@ When an image is successfully loaded, the complete event is triggered, and the l
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-self: center;
......@@ -123,7 +135,7 @@ export default {
## Example Scenario
In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a setInterval timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to 0, the timer is cleared and the opacity is set to 1.
In this example you touch and hold an image to gradually hide it. After the image is completely hidden, it will show in its original setting. Set a **setInterval** timer to change the image opacity at a specified interval so that it is hidden gradually. When the opacity changes to **0**, the timer is cleared and the opacity is set to **1**.
```
<!-- index.hml -->
......@@ -143,6 +155,8 @@ export default {
```
/* xxx.css */
.page-container {
width: 100%;
height: 100%;
flex-direction:column;
align-self: center;
justify-content: center;
......
en/application-dev/ui/ui-js-components-input.md
浏览文件 @ 658e31f5
# <input> Development
# &lt;input&gt; Development
The <input> component provides an interactive way to receive user input of various types, including date, checkbox, and button. For details, see [input](../reference/arkui-js/js-components-basic-input.md).
The **&lt;input&gt;** component provides an interactive way to receive user input of various types, including **date**, **checkbox**, and **button**. For details, see [input](../reference/arkui-js/js-components-basic-input.md).
## Creating an <input> Component
## Creating an &lt;input&gt; Component
Create an <input> component in the .hml file under pages/index.
Create an **&lt;input&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<input type="text"> Please enter the content </input>
<input type="text">
Please enter the content
</input>
</div>
```
......@@ -20,6 +22,8 @@ Create an <input> component in the .hml file under pages/index.
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -32,7 +36,7 @@ Create an <input> component in the .hml file under pages/index.
## Setting the Input Type
Set the type attribute of the <input> component to button, date, or any of the supported values.
Set the **type** attribute of the **&lt;input&gt;** component to **button**, **date**, or any of the supported values.
```
......@@ -59,6 +63,8 @@ Set the type attribute of the <input> component to button, date, or any of the s
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
align-items: center;
flex-direction: column;
justify-content: center;
......@@ -102,15 +108,15 @@ export default {
![en-us_image_0000001223287672](figures/en-us_image_0000001223287672.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - For wearables, the input type can only be button, radio, or checkbox.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - For wearables, the input type can only be **button**, **radio**, or **checkbox**.
>
> - The settings of checked take effect only when the input type is set to checkbox or radio. The default value of checked is false.
> - The settings of **checked** take effect only when the input type is set to **checkbox** or **radio**. The default value of **checked** is **false**.
## Event Binding
Add the search and translate events to the <input> component.
Add the **search** and **translate** events to the **&lt;input&gt;** component.
```
<!-- xxx.hml -->
......@@ -128,6 +134,7 @@ export default {
/* xxx.css */
.content {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -170,7 +177,7 @@ export default {
## Setting the Input Error Message
Add the showError method to the <input> component to display an error message in the event of incorrect input.
Add the **showError** method to the **&lt;input&gt;** component to display an error message in the event of incorrect input.
```
......@@ -187,6 +194,7 @@ Add the showError method to the <input> component to display an error message in
/* xxx.css */
.content {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -219,9 +227,13 @@ import prompt from '@system.prompt'
},
buttonClick(e){
if(this.value.length > 6){
this.$element("input").showError({ error: 'Up to 6 characters are allowed.' });
this.$element("input").showError({
error: 'Up to 6 characters are allowed.'
});
}else if(this.value.length == 0){
this.$element("input").showError({ error:this.value + 'This field cannot be left empty.' });
this.$element("input").showError({
error:this.value + 'This field cannot be left empty.'
});
}else{
prompt.showToast({
message: "success "
......@@ -233,14 +245,14 @@ import prompt from '@system.prompt'
![en-us_image_0000001223127708](figures/en-us_image_0000001223127708.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - This method is available when the input type is set to text, email, date, time, number, or password.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - This method is available when the input type is set to **text**, **email**, **date**, **time**, **number**, or **password**.
## Example Scenario
Enter information by using the <input> component of the type that suits your needs.
Enter information by using the **&lt;input&gt;** component of the type that suits your needs.
......
en/application-dev/ui/ui-js-components-list.md
浏览文件 @ 658e31f5
# &lt;list&gt; Development
The &lt;list&gt; component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md).
The **&lt;list&gt;** component provides a list container that presents a series of list items arranged in a column with the same width. Lists can be used for presenting the same type of data in a multiple and coherent row style. For details, see [list](../reference/arkui-js/js-components-container-list.md).
## Creating a &lt;list&gt; Component
Create a &lt;list&gt; component in the .hml file under pages/index.
Create a **&lt;list&gt;** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
<div class="container">
<list> <list-item class="listItem"></list-item>
<list><list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
......@@ -24,6 +24,8 @@ Create a &lt;list&gt; component in the .hml file under pages/index.
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
......@@ -37,21 +39,21 @@ Create a &lt;list&gt; component in the .hml file under pages/index.
![en-us_image_0000001223287680](figures/en-us_image_0000001223287680.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - &lt;list-item-group&gt; is a child component of the &lt;list&gt; component and is used to group items in a list. It can have a &lt;list-item&gt; nested inside, but not &lt;list&gt;.
>
> - &lt;list-item&gt; is a child component of the &lt;list&gt; component and is used to display items in a list.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - **&lt;list-item-group&gt;** is a child component of the **&lt;list&gt;** component and is used to group items in a list. It can have a **&lt;list-item&gt;** nested inside, but not **&lt;list&gt;**.
>
> - **&lt;list-item&gt;** is a child component of the **&lt;list&gt;** component and is used to display items in a list.
## Adding a Scrollbar
To display a scrollbar on the right side of the screen, set scrollbar to on. The side scrollbar can be used to scroll a long list or the screen up or down.
To display a scrollbar on the right side of the screen, set **scrollbar** to **on**. The side scrollbar can be used to scroll a long list or the screen up or down.
```
<!-- index.hml -->
<div class="container">
<list class="listCss" scrollbar="on" >
<list class="listCss" scrollbar="on">
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
......@@ -66,6 +68,8 @@ To display a scrollbar on the right side of the screen, set scrollbar to on. The
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
}
......@@ -86,7 +90,7 @@ To display a scrollbar on the right side of the screen, set scrollbar to on. The
## Adding a Side Index Bar
Set a custom indexer component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used.
Set a custom **indexer** component to add an index bar at the right boundary of a list. By default, an alphabetical indexer is used.
```
......@@ -114,15 +118,15 @@ Set a custom indexer component to add an index bar at the right boundary of a li
![en-us_image_0000001223127716](figures/en-us_image_0000001223127716.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - This indexer attribute is valid only when flex-direction is set to column and columns is set to 1.
>
> - You must include "\#" when using a customized indexer.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - This **indexer** attribute is valid only when **flex-direction** is set to **column** and **columns** is set to **1**.
>
> - You must include **"\#"** when using a customized indexer.
## Collapsing or Expanding a List
To allow a &lt;list&gt; component to collapse and expand, add groupcollapse and groupexpand events.
To allow a **&lt;list&gt;** component to collapse and expand, add **groupcollapse** and **groupexpand** events.
```
......@@ -200,14 +204,16 @@ export default {
![en-us_image_0000001267887845](figures/en-us_image_0000001267887845.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - The groupcollapse and groupexpand events can be used only by the list-item-group component.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The **groupcollapse** and **groupexpand** events can be used only by the **list-item-group** component.
## Example Scenario
Search for contacts by using an alphabetical indexer.
```
<!-- index.hml -->
<div class="doc-page">
......@@ -219,7 +225,7 @@ Search for contacts by using an alphabetical indexer.
<div class="container">
<div class="in-container">
<text class="name">{{$item.name}}</text>
<text class="number">18888888888</text>
<text class="phone">18888888888</text>
</div>
</div>
</list-item>
......@@ -232,6 +238,8 @@ Search for contacts by using an alphabetical indexer.
</div>
```
```
/* index.css */
.doc-page {
......@@ -251,7 +259,7 @@ Search for contacts by using an alphabetical indexer.
color: #000000;
font-size: 39px;
}
.number {
.phone {
color: black;
font-size: 25px;
}
......@@ -265,6 +273,8 @@ Search for contacts by using an alphabetical indexer.
}
```
```
// xxx.js
export default {
......
en/application-dev/ui/ui-js-components-marquee.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;marquee&gt; Development
The **&lt;marquee&gt;** component displays single-line scrolling text. For details, see [marquee](../reference/arkui-js/js-components-basic-marquee.md).
## Creating a &lt;marquee&gt; Component
Create a **&lt;marquee&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<marquee style="width: 100%;height: 80px; color: #ffffff; background-color: #0820ef;padding-left: 200px;">This is a marquee.</marquee>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
```
![en-us_image_0000001231683172](figures/en-us_image_0000001231683172.png)
## Setting Attributes and Styles
Set the **color** and **font-weight** attributes to define the color, font weight, and border style of marquee text.
```
<!-- xxx.hml -->
<div class="container">
<marquee class="customMarquee">It's a racing lamp.</marquee>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
.customMarquee {
width: 100%;
height: 80px;
padding: 10px;
margin: 20px;
border: 4px solid #6712f1;
border-radius: 20px;
font-size: 40px;
color: #ffffff;
font-weight: bolder;
font-family: serif;
background-color: #1567f3;
}
```
![en-us_image_0000001275803193](figures/en-us_image_0000001275803193.png)
Set the **scrollamount**, **loop**, and **direction** attributes to define the maximum scroll length, number of scrolling times, and text scrolling direction.
```
<!-- xxx.hml -->
<div class="tutorial-page">
<div class="mymarquee">
<marquee loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" id="testmarquee" onclick="makestart">
It's a racing lamp
</marquee>
</div>
<div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
<button onclick="setleft" value="left"></button>
<button onclick="setright" value="right"></button>
</div>
</div>
```
```
/* xxx.css */
.tutorial-page {
width: 750px;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.marqueetext {
color: #ffffff;
font-family: serif;
font-size: 37px;
}
.mymarquee {
margin-top: 20px;
width:100%;
height: 100px;
margin-left: 50px;
margin-right: 50px;
border: 1px solid #6712f1;
background-color: #1567f3;
border-radius: 15px;
align-items: center;
}
button{
width: 200px;
height: 80px;
margin-top: 100px;
}
```
```
// xxx.js
export default {
private: {
loopval: -1,
scroll: 10,
isleft: "left",
},
onInit(){
},
setleft(e) {
this.isleft = "left"
},
setright(e) {
this.isleft = "right"
},
makestart(e) {
this.$element('testmarquee').start()
}
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> When the value of **loop** is less than or equal to 0, the marquee scrolls continuously. If **loop** is not set, the default value **-1** is used.
![en-us_image_0000001276162773](figures/en-us_image_0000001276162773.gif)
## Example Scenario
In this example, you can control the scrolling of marquee text.
Set **loop** to **1**. When scrolling ends, trigger a **finish** event to increase the number of scrolling times by 1 and change the font color to a random color. Then, call the **start** method to start scrolling again.
```
<!-- xxx.hml -->
<div class="tutorial-page">
<div class="mymarquee">
<marquee style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext"
id="testmarquee" onfinish="setfinish">
It's a racing lamp
</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>
```
```
/* xxx.css */
.tutorial-page {
width: 750px;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
}
.marqueetext {
font-size: 37px;
}
.mymarquee {
margin-top: 20px;
width:100%;
height: 100px;
margin-left: 50px;
margin-right: 50px;
border: 1px solid #dc0f27;
border-radius: 15px;
align-items: center;
}
button{
width: 200px;
height: 80px;
margin-top: 100px;
}
```
```
// xxx.js
export default {
private: {
loopval: 1,
scroll: 8,
color1: 'red'
},
onInit(){
},
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
},
makestart(e) {
this.$element('testmarquee').start()
},
makestop(e) {
this.$element('testmarquee').stop()
}
}
```
![en-us_image_0000001276003541](figures/en-us_image_0000001276003541.gif)
en/application-dev/ui/ui-js-components-menu.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;menu&gt; Development
The &lt;menu&gt; component serves as a temporary pop-up window to display operations that users can perform. For details, see [menu](../reference/arkui-js/js-components-basic-menu.md).
## Creating a &lt;menu&gt; Component
Create a **&lt;menu&gt;** component in the .hml file under **pages/index** and add the **target**, **type**, and **title** attributes.
```
<!-- xxx.hml-->
<div class="container">
<text class="title-text" id="textId">show menu</text>
<menu target="textId" type="click" title="title">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
</menu>
</div>
```
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
.title-text{
font-size: 35px;
}
```
![en-us_image_0000001232162284](figures/en-us_image_0000001232162284.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The **&lt;menu&gt;** component supports only the [option](../reference/arkui-js/js-components-basic-option.md) child component.
>
> - The **&lt;menu&gt;** component does not support the **focusable** and **disabled** attributes.
## Setting Styles
Set the style for the **&lt;menu&gt;** component, such as the font color, size, and character spacing.
```
<!-- xxx.hml-->
<div class="container">
<text class="title-text" id="textId">show menu</text>
<menu target="textId" type="click" title="title">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
</menu>
</div>
```
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
.title-text{
font-size: 35px;
background-color: #5a5aee;
color: white;
width: 70%;
text-align: center;
height: 85px;
border-radius: 12px;
}
menu{
text-color: blue;
font-size: 35px;
letter-spacing: 2px;
}
option{
color: #6a6aef;
font-size: 30px;
}
```
![en-us_image_0000001275803137](figures/en-us_image_0000001275803137.gif)
## Binding Events
Bind the **&lt;menu&gt;** component with the **onselected** event (triggered when a value in the menu is selected) and the **oncancel** event (triggered when an operation is canceled). Click the **&lt;text&gt;** component to call the **show** method to set the coordinates of the **&lt;menu&gt;** component.
```
<!-- xxx.hml-->
<div class="container">
<text class="title-text" id="textId" onclick="textClick">show menu</text>
<menu title="title" onselected="select" oncancel="cancel" id="menuId">
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
<option value="Item 3">Item 3</option>
</menu>
</div>
```
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
}
.title-text{
font-size: 35px;
background-color: #5a5aee;
color: white;
width: 70%;
text-align: center;
height: 85px;
border-radius: 12px;
margin-top: 500px;
margin-left: 15%;
}
menu{
text-color: blue;
font-size: 35px;
letter-spacing: 2px;
}
option{
color: #6a6aef;
font-size: 30px;
}
```
```
// index.js
import prompt from '@system.prompt';
export default {
select(e) {
prompt.showToast({
message: e.value
})
},
cancel(){
prompt.showToast({
message: "cancel"
})
},
textClick() {
this.$element("menuId").show({x:175,y:590});
},
}
```
![en-us_image_0000001276162713](figures/en-us_image_0000001276162713.gif)
## Example Scenario
Click the **&lt;toggle&gt;** component to change the text color and select the **&lt;menu&gt;** component to change the size of the gradient color block.
```
<!-- xxx.hml-->
<div class="container">
<div class="contentToggle">
<toggle class="toggle" for="{{item in togglesList}}" onclick="toggleClick({{$idx}})" checked="{{item.checked}}">{{item.name}}</toggle>
</div>
<text class="size" style="color: {{color}};">width:{{width}},height:{{height}}</text>
<div style="width: {{width}}'px';height: {{height}}px;background:linear-gradient(to right,#FF0000,#0000FF);"></div>
<text id="menuId" class="text">change size</text>
<menu onselected="select" oncancel="cancel" target="menuId">
<option value="{{item.value}}" for="item in optionList">{{item.text}}</option>
</menu>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
width: 100%;
justify-content: center;
align-items: center;
}
.contentToggle{
width: 100%;
justify-content: space-around;
}
.toggle{
padding: 10px;
height:80px;
font-size: 35px;
width: 200px;
height: 85px;
}
.size{
width: 100%;
height: 200px;
text-align: center;
font-size: 40px;
text-align: center;
}
.text{
width: 300px;
height: 80px;
background-color: #615def;
color: white;
font-size: 35px;
text-align: center;
margin-top: 100px;
}
menu{
text-color: blue;
font-size: 35px;
letter-spacing: 2px;
}
option{
color: #6a6aef;
font-size: 30px;
}
```
```
// index.js
import prompt from '@system.prompt';
export default {
data:{
fresh: false,
width: 200,
height: 200,
color: '',
optionList:[
{text:'200 x 200',value:2},
{text:'300 x 300',value:3},
{text:'500 x 500',value:5},
],
togglesList:[
{name:"red", checked:false},
{name:"blue", checked:false},
{name: "black", checked:false},
],
},
toggleClick(index){
for(let i=0;i<this.togglesList.length;i++){
if(i == index){
this.color = this.togglesList[index].name;
this.togglesList[i].checked = true;
}else{
this.togglesList[i].checked = false;
}
}
},
select(e) {
this.width = e.value * 100;
this.height = e.value * 100;
}
}
```
![en-us_image_0000001276003485](figures/en-us_image_0000001276003485.gif)
en/application-dev/ui/ui-js-components-offscreencanvas.md 0 → 100644
浏览文件 @ 658e31f5
# OffscreenCanvas
Create an **OffscreenCanvas** canvas and create a **getContext2d** object on the canvas. Then, create an image and set the **filter** attribute to change the image style.
```
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas1"></canvas>
<select @change="change()">
<option value="blur(5px)">blur</option>
<option value="grayscale(50%)">grayscale</option>
<option value="hue-rotate(45deg)">hue-rotate</option>
<option value="invert(100%)">invert</option>
<option value="drop-shadow(8px 8px 10px green)">drop-shadow</option>
<option value="brightness(0.4)">brightness</option>
<option value="opacity(0.25)">opacity</option>
<option value="saturate(30%)">saturate</option>
<option value="sepia(60%)">sepia</option>
<option value="contrast(200%)">contrast</option>
</select>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
width: 600px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
select{
margin-top: 50px;
width: 250px;
height: 100px;
background-color: white;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
ctx: null,
offscreen: null,
offCanvas: null,
img: null,
},
onShow(){
this.ctx = this.$refs.canvas1.getContext("2d");
this.offscreen = new OffscreenCanvas(600, 500);
this.offCanvas = this.offscreen.getContext("2d");
this.img = new Image();
this.img.src = 'common/images/2.png';
// Invoked when the image is successfully obtained.
let _this = this;
this.img.onload = function() {
_this.offCanvas.drawImage(_this.img, 100, 100, 400, 300);
};
this.img.onerror = function() {
prompt.showToast({message:"error",duration:2000})
};
var bitmap = this.offscreen.transferToImageBitmap();
this.ctx.transferFromImageBitmap(bitmap);
},
change(e){
this.offCanvas.filter = e.newValue;
this.offCanvas.drawImage(this.img, 100, 100, 400, 300);
var bitmap = this.offscreen.transferToImageBitmap();
this.ctx.transferFromImageBitmap(bitmap);
},
}
```
![en-us_image_0000001232162292](figures/en-us_image_0000001232162292.gif)
## Determining the Position
Use **isPointInPath** and **isPointInStroke** to determine and show whether a coordinate is within the path area and whether a coordinate is on the edge of the path.
```
<!-- xxx.hml -->
<div class="container">
<div class="content">
<text>Coordinate: {{X}}, {{Y}}</text>
<text>In path:{{textValue}}</text>
<text>In stroke:{{textValue1}}</text>
</div>
<canvas ref="canvas"></canvas>
<button onclick="change">Add(50)</button>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
canvas{
width: 600px;
height: 500px;
background-color: #fdfdfd;
border: 5px solid red;
}
.content{
flex-direction: column;
justify-content: center;
align-items: center;
}
text{
font-size: 30px;
width: 300px;
height: 80px;
text-align: center;
}
button{
width: 180px;
height: 75px;
margin-top: 50px;
}
```
```
// xxx.js
export default {
data: {
textValue: 0,
textValue1: 0,
X:0,
Y:250,
},
onShow(){
let canvas = this.$refs.canvas.getContext('2d');
let offscreen = new OffscreenCanvas(500,500);
let offscreenCanvasCtx = offscreen.getContext("2d");
let offscreenCanvasCtx1 = offscreen.getContext("2d");
offscreenCanvasCtx1.arc(this.X, this.Y, 2, 0, 6.28);
offscreenCanvasCtx.lineWidth=20;
offscreenCanvasCtx.rect(200,150, 200, 200);
offscreenCanvasCtx.stroke();
this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false';
this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false';
let bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
},
change(){
if(this.X < 500){
this.X = this.X+50;
}else{
this.X = 0;
}
let canvas = this.$refs.canvas.getContext('2d');
let offscreen = new OffscreenCanvas(500,500);
let offscreenCanvasCtx = offscreen.getContext("2d");
let offscreenCanvasCtx1 = offscreen.getContext("2d");
offscreenCanvasCtx1.arc(this.X, this.Y, 1, 0, 6.28)
offscreenCanvasCtx.lineWidth=20
offscreenCanvasCtx.rect(200,150, 200, 200);
offscreenCanvasCtx.stroke();
this.textValue1 = offscreenCanvasCtx.isPointInStroke(this.X, this.Y)?'true':'false';
this.textValue = offscreenCanvasCtx.isPointInPath(this.X, this.Y)?'true':'false';
let bitmap = offscreen.transferToImageBitmap();
canvas.transferFromImageBitmap(bitmap);
}
}
```
![en-us_image_0000001276003489](figures/en-us_image_0000001276003489.gif)
en/application-dev/ui/ui-js-components-path2d.md 0 → 100644
浏览文件 @ 658e31f5
# Path2D
**&lt;Path2D&gt;** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. For details, see [Path2D](../reference/arkui-js/js-components-canvas-path2d.md).
## Drawing Line Segments
Create a **&lt;Path2D&gt;** object and use line segments to create different shapes.
```
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas"></canvas>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
canvas{
width: 600px;
height: 600px;
background-color: #fdfdfd;
border: 5px solid red;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
onShow(){
let ctx = this.$refs.canvas.getContext('2d',{antialias: true});
let path = ctx.createPath2D();
// Roof
path.moveTo(10, 300);
path.lineTo(210,100);
path.lineTo(410, 300);
// House
path.moveTo(10, 300);
path.lineTo(410, 300);
path.lineTo(410, 600);
path.lineTo(10, 600);
path.closePath();
// Window
path.moveTo(50, 450);
path.bezierCurveTo(70, 350, 130, 350, 150, 450);
path.closePath();
// Door
path.moveTo(250, 450);
path.rect(250, 450, 350, 600);
path.closePath();
// Chimney
path.moveTo(365, 250);
path.ellipse(310, 215, 30, 130,0, Math.PI * 0.04, Math.PI * 1.1, 1);
// Tree
path.moveTo(485, 450);
path.quadraticCurveTo(510, 500, 485, 600);
path.moveTo(550, 450);
path.quadraticCurveTo(525, 500, 550, 600);
path.moveTo(600, 535);
path.arc(520, 450, 85, 0, 6);
ctx.stroke(path);
},
}
```
![en-us_image_0000001232002968](figures/en-us_image_0000001232002968.png)
## Drawing Graphs
Use **createPath2D** to create a path object and draw only **path1** so that only **path1** is displayed on the canvas. Click the **&lt;text&gt;** component to trigger the **addPath** method. The **path2** object is passed to **path1** as a parameter. After the **stroke** operation is performed on the **path1** object, **path1** and **path2** are displayed on the canvas. Click **Change** to change the value of **setTransform** to** setTransform(2, 0.1, 0.1, 2, 0,0)**. The graph is enlarged and tilted to the left.
```
<!-- xxx.hml -->
<div class="container">
<canvas ref="canvas"></canvas>
<div class="content">
<text onclick="addPath">{{ isAdd }}</text>
<text onclick="setTransform">{{textName}}</text>
</div>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
canvas{
width: 600px;
height: 600px;
background-color: #fdfdfd;
border: 5px solid red;
}
.content{
width: 80%;
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
text{
width: 150px;
height: 80px;
color: white;
border-radius: 20px;
text-align: center;
background-color: #6060e7;
margin-bottom: 30px;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
ctx: null,
path1: null,
path2: null,
path3: null,
isAdd: "addPath2",
isChange: true,
textName: 'change'
},
onShow(){
this.ctx = this.$refs.canvas.getContext('2d',{antialias:true});
this.path1 = this.ctx.createPath2D();
this.path1.moveTo(200, 200);
this.path1.lineTo(400, 200);
this.path1.lineTo(400, 400);
this.path1.lineTo(200, 400);
this.path1.closePath();
this.path2 = this.ctx.createPath2D();
this.path2.arc(300, 300, 75, 0, 6.28)
this.ctx.stroke(this.path1);
},
addPath(){
if(this.isAdd == "addPath2"){
this.ctx.clearRect(0,0,600,600)
this.ctx.beginPath();
this.path2.addPath(this.path1)
this.ctx.stroke(this.path2);
this.isAdd = "clearPath2"
}else{
this.ctx.clearRect(0,0,600,600)
this.ctx.stroke(this.path1);
this.isAdd = "addPath2"
}
},
setTransform(){
if(this.isChange){
this.ctx.clearRect(0,0,600,600)
this.path3 = this.ctx.createPath2D();
this.path3.arc(150, 150, 100, 0, 6.28)
this.path3.setTransform(2, 0.1, 0.1, 2, 0,0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "back"
}else{
this.ctx.clearRect(0,0,600,600)
this.path3.setTransform(0.5, -0.1, -0.1, 0.5, 0,0);
this.ctx.stroke(this.path3);
this.isChange = !this.isChange;
this.textName = "change"
}
},
}
```
![en-us_image_0000001231683112](figures/en-us_image_0000001231683112.gif)
en/application-dev/ui/ui-js-components-picker.md
浏览文件 @ 658e31f5
# &lt;picker&gt; Development
The &lt;picker&gt; component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md).
The **&lt;picker&gt;** component supports common, date, time, data and time, and multi-column text selectors. For details, see [picker](../reference/arkui-js/js-components-basic-picker.md).
## Creating a &lt;picker&gt; Component
Create a &lt;picker&gt; component in the .hml file under pages/index.
Create a **&lt;picker&gt;** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
<div class="container">
<picker> picker </picker>
<picker>
picker
</picker>
<div>
```
......@@ -20,6 +22,8 @@ Create a &lt;picker&gt; component in the .hml file under pages/index.
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -32,7 +36,7 @@ Create a &lt;picker&gt; component in the .hml file under pages/index.
## Setting the Picker Type
Set the type attribute of the &lt;picker&gt; component. For example, set it to date.
Set the **type** attribute of the **&lt;picker&gt;** component. For example, set it to **date**.
```
......@@ -47,6 +51,8 @@ Set the type attribute of the &lt;picker&gt; component. For example, set it to d
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -71,14 +77,15 @@ export default {
![en-us_image_0000001267647893](figures/en-us_image_0000001267647893.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
>
> When setting the value range of a common selector, you must use the data binding mode.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - When setting the value range of a common selector, you must use the data binding mode.
>
> - The **lunarswitch** attribute of the date selector is only supported on phones and tablets.
## Setting the Time Format
Set the hours attribute to specify the time format used by the time selector. Available values include 12 and 24, indicating the 12-hour format and 24-hour format, respectively.
Set the **hours** attribute to specify the time format used by the time selector. Available values include **12** and **24**, indicating the 12-hour format and 24-hour format, respectively.
```
......@@ -93,6 +100,8 @@ Set the hours attribute to specify the time format used by the time selector. Av
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -107,15 +116,15 @@ Set the hours attribute to specify the time format used by the time selector. Av
![en-us_image_0000001222807808](figures/en-us_image_0000001222807808.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - When hours is set to 12, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
>
> - When hours is set to 24, the time is displayed in 24-hour format.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - When **hours** is set to **12**, the time is displayed in 12-hour format and distinguished by a.m. and p.m.
>
> - When **hours** is set to **24**, the time is displayed in 24-hour format.
## Adding Response Events
To confirm and cancel selection, add change and cancel events.
To confirm and cancel selection, add **change** and **cancel** events.
```
......@@ -130,6 +139,8 @@ To confirm and cancel selection, add change and cancel events.
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -170,7 +181,9 @@ export default {
## Example Scenario
Implement a health check-in application by using the &lt;picker&gt; component.
Implement a health check-in application by using the **&lt;picker&gt;** component.
```
<!-- index.hml -->
......@@ -202,6 +215,8 @@ Implement a health check-in application by using the &lt;picker&gt; component.
</div>
```
```
/* index.css */
.doc-page {
......@@ -244,6 +259,8 @@ Implement a health check-in application by using the &lt;picker&gt; component.
}
```
```
// xxx.js
import pmt from '@system.prompt'
......
en/application-dev/ui/ui-js-components-qrcode.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;qrcode&gt; Development
The **&lt;qrcode&gt;** component is used to generate and display a QR code. For details, see [qrcode](../reference/arkui-js/js-components-basic-qrcode.md).
## Creating a &lt;qrcode&gt; Component
Create a **&lt;qrcode&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml-->
<div class="container">
<qrcode value="Hello"></qrcode>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
```
![en-us_image_0000001275803133](figures/en-us_image_0000001275803133.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> The **value** parameter must be set.
## Setting the Component Type
Set the **type** attribute to select the QR code type from rectangle and circle.
```
<!-- xxx.hml-->
<div class="container">
<select onchange="settype">
<option for="{{bcol_list}}" value="{{$item}}">{{$item}}</option>
</select>
<qrcode value="Hello" type="{{qr_type}}"></qrcode>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
select{
margin-top: 50px;
margin-bottom: 50px;
}
```
```
// index.js
export default {
data: {
qr_type: 'rect',
bcol_list: ['rect','circle']
},
settype(e) {
this.qr_type = e.newValue
},
}
```
![en-us_image_0000001275922965](figures/en-us_image_0000001275922965.gif)
## Setting Styles
Set the **color** and **background-color** attributes to set the color and background color of a QR code.
```
<!-- xxx.hml-->
<div class="container">
<qrcode value="Hello" type="rect"></qrcode>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
qrcode{
width: 300px;
height: 300px;
color: blue;
background-color: #ffffff;
}
```
![en-us_image_0000001231683116](figures/en-us_image_0000001231683116.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - If the values of **width** and **height** are different, the smaller value is used as the length of the QR code. The generated QR code is center displayed.
>
> - If either **width** or **height** is set, the value is used as the length of the QR code. If neither of them is set, the default length of 200 px is used.
>
## Example Scenario
In this example, you can bind a QR code to a text box, and change the QR code by replacing the content in the text box.
```
<!-- xxx.hml-->
<div class="container">
<input style="margin-bottom: 100px;" onchange="change"></input>
<qrcode value="{{textVal}}"></qrcode>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
qrcode{
width: 400px;
height: 400px;
}
```
```
// index.js
export default{
data: {
textVal: ''
},
change(e){
this.textVal = e.value
}
}
```
![en-us_image_0000001232002972](figures/en-us_image_0000001232002972.gif)
en/application-dev/ui/ui-js-components-rating.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;rating&gt; Development
The **&lt;rating&gt;** component provides a rating bar used for reviews and ratings. For details, see [rating](../reference/arkui-js/js-components-basic-rating.md).
## Creating a &lt;rating&gt; Component
Create a **&lt;rating&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<rating></rating>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
rating {
width: 80%;
height: 150px;
}
```
![en-us_image_0000001231843116](figures/en-us_image_0000001231843116.gif)
## Setting the Rating Level
Use the **&lt;rating&gt;** component to set the number of stars in a rating bar and the current rating using the **numstars** and **rating** attributes, respectively.
```
<!-- xxx.hml -->
<div class="container">
<ratingnumstars="6" rating="5">
</rating>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
rating {
width: 80%;
height: 150px;
}
```
![en-us_image_0000001232003012](figures/en-us_image_0000001232003012.gif)
## Setting the Rating Style
Use the **&lt;rating&gt;** component to set the background images when a rating star is unselected, selected, and partially selected using the **star-background**, **star-foreground**, and **star-secondary** attributes, respectively.
```
<!-- xxx.hml -->
<div class="container">
<div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
<rating numstars="5" rating="1" class="myrating" style="width: {{ratewidth}}; height:{{rateheight}};
star-background: {{backstar}}; star-secondary: {{secstar}};star-foreground: {{forestar}};rtl-flip: true;">
</rating>
</div>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
```
```
/* index.js */
export default {
data: {
backstar: 'common/love.png',
secstar: 'common/love.png',
forestar: 'common/love1.png',
ratewidth: '400px',
rateheight: '150px'
},
onInit(){
}
}
```
![en-us_image_0000001275803173](figures/en-us_image_0000001275803173.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - You must set **star-background**, **star-secondary**, and **star-foreground**. Otherwise, the grey rating star applies, indicating that the image source is incorrectly set.
>
> - The **star-background**, **star-secondary**, and **star-foreground** attributes support only PNG and JPG images in the local path.
## Binding Events
Add the **change** event to the &lt;rating&gt; component to print the current rating.
```
<!-- xxx.hml -->
<div class="container">
<rating numstars="5" rating="0" onchange="showrating"></rating>
</div>
```
```
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
rating {
width: 80%;
height: 150px;
}
```
```
import prompt from '@system.prompt';
export default {
showrating(e) {
prompt.showToast({
message:'Current Rating' + e.rating
})
}
}
```
![en-us_image_0000001276003525](figures/en-us_image_0000001276003525.gif)
## Example Scenario
Change the switch status to toggle between the star background images and drag the slider to adjust the rating values.
```
<!-- xxx.hml -->
<div style="width: 100%;height:100%;flex-direction: column;align-items: center;background-color: #F1F3F5;">
<div style="width: 500px;height: 500px;align-items: center;justify-content: center;flex-direction: column;;">
<rating numstars="{{stars}}" rating="{{rate}}" stepsize="{{step}}" onchange="showrating" class="myrating"
style="width: {{ratewidth}};height:{{rateheight}};star-background: {{backstar}};star-secondary: {{secstar}};
star-foreground: {{forestar}};rtl-flip: true;"></rating>
</div>
<div style="flex-direction: column;width: 80%;align-items: center;">
<div style="width: 100%;height: 100px;align-items: center;justify-content: space-around;">
<text>Replacing a custom image</text>
<switch checked="false" showtext="true" onchange="setstar"></switch>
</div>
<div style="width: 100%;height:120px;margin-top: 50px;margin-bottom: 50px;flex-direction: column;align-items: center;
justify-content: space-around;">
<text>numstars {{stars}}</text>
<slider id="sli1" min="-1" max="10" value="5" step="1" onchange="setnumstars"></slider>
</div>
<div style="width: 100%;height:120px;flex-direction: column;align-items: center;justify-content: space-around;">
<text>rating {{rate}}</text>
<slider id="sli2" min="-1" max="10" value="0" step="1" onchange="setrating"></slider>
</div>
</div>
</div>
```
```
/* xxx.css */
.myrating:active {
width: 500px;
height: 100px;
}
switch{
font-size: 40px;
}
```
```
/* index.js */
import prompt from '@system.prompt';
export default {
data: {
backstar: '',
secstar: '',
forestar: '',
stars: 5,
ratewidth: '300px',
rateheight: '60px',
step: 0.5,
rate: 0
},
onInit(){
},
setstar(e) {
if (e.checked == true) {
this.backstar = 'common/love.png'
this.secstar = 'common/love.png'
this.forestar = 'common/love1.png'
} else {
this.backstar = ''
this.secstar = ''
this.forestar = ''
}
},
setnumstars(e) {
this.stars = e.progress
this.ratewidth = 60 * parseInt(this.stars) + 'px'
},
setstep(e) {
this.step = e.progress
},
setrating(e){
this.rate = e.progress
},
showrating(e) {
prompt.showToast({
message:'Current Rating' + e.rating
})
}
}
```
![en-us_image_0000001275923005](figures/en-us_image_0000001275923005.gif)
en/application-dev/ui/ui-js-components-search.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;search&gt; Development
The **&lt;search&gt;** component provides an input area for users to search. For details, see [search](../reference/arkui-js/js-components-basic-search.md).
## Creating a &lt;search&gt; Component
Create a **&lt;search&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml-->
<div class="container">
<search></search>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
```
![en-us_image_0000001276003537](figures/en-us_image_0000001276003537.png)
## Setting Attributes
Set the **hint**, **icon**, and **searchbutton** to define the hint text, icon, and search button at the end of the search box.
```
<!-- xxx.hml-->
<div class="container">
<search hint="Please enter the search content" searchbutton="search" icon="/common/search1.png"></search>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
```
![en-us_image_0000001275923017](figures/en-us_image_0000001275923017.png)
## Adding Styles
Set **color**, **placeholder**, and **caret-color** to set the text color, hint text color, and cursor color of the search box.
```
<!-- xxx.hml-->
<div class="container">
<search hint="Please enter the search content" searchbutton="search" ></search>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
search{
color: black;
placeholder-color: black;
caret-color: red;
}
```
![en-us_image_0000001232003020](figures/en-us_image_0000001232003020.gif)
## Binding Events
Add the **change**, **search**, **submit**, **share**, and **translate** events to the **&lt;search&gt;** component to perform operations on the input information.
```
<!-- xxx.hml-->
<div class="container">
<text style="margin-left: -7px;">
<span>Enter text and then touch and hold what you've entered</span>
</text>
<search hint="Please enter the search content" searchbutton="search" onsearch="search" onchange="change" ontranslate="translate" onshare="share"
onsubmit="submit">
</search>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
text{
width: 100%;
font-size: 25px;
text-align: center;
margin-bottom: 100px;
}
```
```
// index.js
import prompt from '@system.prompt'
export default {
search(e){
prompt.showToast({
message: e.value,
duration: 3000,
});
},
translate(e){
prompt.showToast({
message: e.value,
duration: 3000,
});
},
share(e){
prompt.showToast({
message: e.value,
duration: 3000,
});
},
change(e){
prompt.showToast({
message: e.value,
duration: 3000,
});
},
submit(e){
prompt.showToast({
message: 'submit',
duration: 3000,
});
}
}
```
![en-us_image_0000001231683164](figures/en-us_image_0000001231683164.gif)
## Example Scenario
In this example, you can select the **&lt;search&gt;**, **&lt;textarea&gt;**, or **&lt;input&gt;** component from the drop-down list box to implement the respective function.
```
<!-- xxx.hml-->
<div style="flex-direction: column;align-items: center;justify-content: center; width: 100%;">
<select class="slt1" id="slt1" onchange="setfield">
<option value="search">Search</option>
<option value="textarea">Textarea</option>
<option value="input">Input</option>
</select>
<div if="{{showsearch}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;">
<search class="field" id="search1" hint="search1" onsubmit="submit" onchange="change" ></search>
<search class="field" id="search2" icon="common/search1.png" hint="search2" show="{{showsec}}" onsubmit="submit" onchange="change" ></search>
</div>
<div if="{{showtextarea}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;">
<textarea class="field" id="textarea1" extend="true" placeholder="textarea1" onchange="change" ></textarea>
<textarea class="field" id="textarea2" extend="true" placeholder="textarea2" onchange="change" show="{{showsec}}"></textarea>
</div>
<div if="{{showinput}}" style="flex-direction: column;align-items: center;margin-top: 50px;height: 400px;justify-content: space-around;">
<input type="text" class="field" id="input1" placeholder="input1" onchange="change" ></input>
<input type="text" class="field" id="input2" placeholder="input2" onchange="change" show="{{showsec}}"></input>
</div>
</div>
```
```
/* xxx.css */
.field {
width: 80%;
color: mediumaquamarine;
font-weight: 600;
placeholder-color: orangered;
}
.slt1{
font-size: 50px;
position: absolute;
left: 50px;
top: 50px;
}
```
```
// index.js
import prompt from '@system.prompt';
export default {
data: {
showsearch: true,
showtextarea: false,
showinput: false,
showsec: true,
},
setfield(e) {
this.field = e.newValue
if (e.newValue == 'search') {
this.showsearch = true
this.showtextarea = false
this.showinput = false
} else if (e.newValue == 'textarea') {
this.showsearch = false
this.showtextarea = true
this.showinput = false
} else {
this.showsearch = false
this.showtextarea = false
this.showinput = true
}
},
submit(e) {
prompt.showToast({
message: 'Search!',
duration: 2000
})
},
change(e) {
prompt.showToast({
message: 'Content:'+ e.text,
duration: 2000
})
}
}
```
![en-us_image_0000001232003024](figures/en-us_image_0000001232003024.gif)
en/application-dev/ui/ui-js-components-slider.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;slider&gt; Development
The **&lt;slider&gt;** component is used to quickly adjust settings, such as the volume and brightness. For details, see [slider](../reference/arkui-js/js-components-basic-slider.md).
## Creating a &lt;slider&gt; Component
Create a **&lt;slider&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<slider></slider>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
justify-content: center;
align-items: center;
}
```
![en-us_image_0000001232162312](figures/en-us_image_0000001232162312.gif)
## Setting Styles and Attributes
Use the **&lt;slider&gt;** component to set the background color, selected color, and slider color using the **color**, **selected-color**, and **block-color** attributes, respectively.
```
<!-- xxx.hml -->
<div class="container">
<slider class= "sli"></slider>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
.sli{
color: #fcfcfc;
scrollbar-color: aqua;
background-color: #b7e3f3;
}
```
![en-us_image_0000001232003000](figures/en-us_image_0000001232003000.gif)
Add the **mix**, **max**, **value**, **step**, and **mode** attributes to set the minimum value, maximum value, initial value, step, and style of the slider.
```
<!-- xxx.hml -->
<div class="container">
<slider min="0" max="100" value="1" step="2" mode="inset" showtips="true"></slider>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
```
![en-us_image_0000001276003517](figures/en-us_image_0000001276003517.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> Set the **mode** attribute to specify the slider style, which takes effect only on mobile phones and tablets. It can be set to:
>
> - **outset**: The slider is on the sliding bar.
>
> - **inset**: The slider is inside the sliding bar.
## Binding Events
Add the **change** event to the **&lt;rating&gt;** component and pass the ChangeEvent attribute when adding the event.
```
<!-- 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>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
```
```
// 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;
}
}
}
```
![en-us_image_0000001275803169](figures/en-us_image_0000001275803169.gif)
## Example Scenario
Adjust the value of the slider to change the image size and dynamically print the width and height of the current image.
```
<!-- xxx.hml -->
<div class="container">
<image src="common/landscape3.jpg" style=" width: {{WidthVal}}px;height:{{HeightVal}}px;margin-top: -150px;"></image>
<div class="txt">
<slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider>
<text>The width of this picture is {{WidthVal}}</text>
<text>The height of this picture is {{HeightVal}}</text>
</div>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
.txt{
flex-direction: column;
justify-content: center;
align-items: center;
position: fixed;
top: 65%;
}
text{
margin-top: 30px;
}
```
```
// xxx.js
export default{
data: {
value: 0,
WidthVal: 200,
HeightVal: 200
},
setvalue(e) {
this.WidthVal = 200 + e.value;
this.HeightVal = 200 + e.value
}
}
```
![en-us_image_0000001275922997](figures/en-us_image_0000001275922997.gif)
en/application-dev/ui/ui-js-components-stepper.md
浏览文件 @ 658e31f5
# &lt;stepper&gt; Development
When multiple steps are required to complete a task, you can use the &lt;stepper&gt; component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
When multiple steps are required to complete a task, you can use the **&lt;stepper&gt;** component to navigate your users through the whole process. For details, see [stepper](../reference/arkui-js/js-components-container-stepper.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> This component is supported since API version 5.
## Creating a &lt;stepper&gt; Component
Create a &lt;stepper&gt; component in the .hml file under pages/index.
Create a **&lt;stepper&gt;** component in the .hml file under **pages/index**.
```
<!-- index.hml -->
<div class="container">
<stepper> <stepper-item>
<stepper><stepper-item>
<text>Step 1</text>
</stepper-item>
<stepper-item>
<text>Step 2</text>
</stepper-item>
</stepper>
</stepper>
</div>
```
......@@ -30,6 +30,8 @@ Create a &lt;stepper&gt; component in the .hml file under pages/index.
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -47,7 +49,7 @@ text{
## Setting the Index
Set index to the index value of the step that you want to display by default.
Set **index** to the index value of the step that you want to display by default.
```
......@@ -71,6 +73,8 @@ Set index to the index value of the step that you want to display by default.
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
background-color:#F1F3F5;
}
......@@ -83,7 +87,7 @@ text{
![en-us_image_0000001267767837](figures/en-us_image_0000001267767837.gif)
Set the label attribute to customize the button text for the &lt;stepper-item&gt;.
Set the **label** attribute to customize the button text for the **&lt;stepper-item&gt;**.
```
......@@ -110,6 +114,8 @@ Set the label attribute to customize the button text for the &lt;stepper-item&gt
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
background-color:#F1F3F5;
}
......@@ -125,7 +131,10 @@ text{
/* index.js */
export default {
data: {
label_1:{ nextLabel: 'NEXT', status: 'normal' },
label_1:{
nextLabel: 'NEXT',
status: 'normal'
},
label_2:{
prevLabel: 'BACK',
nextLabel: 'NEXT',
......@@ -143,9 +152,9 @@ export default {
![en-us_image_0000001267767841](figures/en-us_image_0000001267767841.gif)
## Setting the Style
## Setting Styles
By default, the &lt;stepper&gt; component fills entire space of its container. The sample code below shows how to set the border and background color using the border and background-color attributes.
By default, the **&lt;stepper&gt;** component fills entire space of its container. The sample code below shows how to set the border and background color using the **border** and **background-color** attributes.
```
<!-- index.hml -->
......@@ -164,6 +173,8 @@ export default {
```
/* index.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -174,7 +185,8 @@ export default {
height: 300px;
}
.stepperClass{
border:1px solid silver ; background-color: white;
border:1px solid silver;
background-color: white;
}
text{
width: 100%;
......@@ -188,12 +200,13 @@ text{
## Adding Events
The &lt;stepper&gt; component supports the finish, change, next, back, and skip events.
The **&lt;stepper&gt;** component supports the **finish**, **change**, **next**, **back**, and **skip** events.
- When the change and next or back events exist at the same time, the next or back event is executed before the change event.
- When the **change** and **next** or **back** events exist at the same time, the **next** or **back** event is executed before the **change** event.
- Before resetting the index attribute, you must remove the current value. Otherwise, the value change cannot be detected.
- Before resetting the **index** attribute, you must remove the current value. Otherwise, the value change cannot be detected.
```
<!-- index.hml -->
<div class="container" style="background-color:#F1F3F5;">
......@@ -219,6 +232,8 @@ The &lt;stepper&gt; component supports the finish, change, next, back, and skip
```
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......@@ -339,6 +354,8 @@ Use the &lt;stepper&gt; component to navigate through the steps. Create a [&lt;t
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
......
en/application-dev/ui/ui-js-components-svg-graphics.md 0 → 100644
浏览文件 @ 658e31f5
# Graph Drawing
The **&lt;svg&gt;** component can be used to draw simple shapes, such as rectangles, circles, and lines. For details about the supported shapes, see &lt;svg&gt;.
In this example, you can draw different shapes and stitch them to form a house graph.
```
<!-- xxx.hml -->
<div class="container">
<svg width="1000" height="1000">
<polygon points="100,400 300,200 500,400" fill="red"></polygon> // Rooftop
<polygon points="375,275 375,225 425,225 425,325" fill="orange"></polygon> // Chimney
<rect width="300" height="300" x="150" y="400" fill="orange"> // Main body
</rect>
<rect width="100" height="100" x="180" y="450" fill="white"> // Window
</rect>
<line x1="180" x2="280" y1="500" y2="500" stroke-width="4" fill="white" stroke="black"></line> // Window frame
<line x1="230" x2="230" y1="450" y2="550" stroke-width="4" fill="white" stroke="black"></line> // Window frame
<polygon points="325,700 325,550 400,550 400,700" fill="red"></polygon> // Door
<circle cx="380" cy="625" r="20" fill="black"></circle> // Doorknob
</svg>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
```
![en-us_image_0000001232162288](figures/en-us_image_0000001232162288.png)
en/application-dev/ui/ui-js-components-svg-overview.md 0 → 100644
浏览文件 @ 658e31f5
# Basics
The **&lt;svg&gt;** component is used as the root node of the SVG canvas and can be nested in the SVG. For details, see [svg](../reference/arkui-js/js-components-svg.md).
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The APIs of this component are supported since API version 7.
>
> - The width and height must be defined for the **&lt;svg&gt;** parent component or **&lt;svg&gt;** component. Otherwise, the component is not drawn.
## Creating an &lt;svg&gt; Component
Create a **&lt;svg&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400"> </svg>
</div>
```
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
svg{
background-color: blue;
}
```
![en-us_image_0000001232162324](figures/en-us_image_0000001232162324.png)
## Setting Attributes
Set the **width**, **height**, **x**, **y**, and **viewBox** attributes to define the width, height, X coordinate, Y coordinate, and SVG viewport of the **&lt;svg&gt;** component.
```
<!-- xxx.hml -->
<div class="container">
<svg width="400" height="400" viewBox="0 0 100 100">
<svg class="rect" width="100" height="100" x="20" y="10">
</svg>
</svg>
</div>
```
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
svg{
background-color: yellow;
}
.rect{
background-color: red;
}
```
![en-us_image_0000001231683152](figures/en-us_image_0000001231683152.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - If the **&lt;svg&gt;** component is the root node, the X-axis and Y-axis attributes are invalid.
>
> - If the width and height of **viewBox** are inconsistent with those of the **&lt;svg&gt;** component, the view box will be scaled in center-aligned mode.
en/application-dev/ui/ui-js-components-svg-path.md 0 → 100644
浏览文件 @ 658e31f5
# Path Drawing
The **&lt;svg&gt;** component uses instructions **M** (start point), **H** (horizontal line), and **a** (drawing an arc to a specified position) to control a path and sets the fill colors to create a pie chart.
```
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="100" y="400">
<path d="M300,200 h-150 a150 150 0 1 0 150 -150 z" fill="red" stroke="blue" stroke-width="5" >
</path>
<path d="M275,175 v-150 a150 150 0 0 0 -150 150 z" fill="yellow" stroke="blue" stroke-width="5">
</path>
</svg>
</div>
```
```
/* xxx.css */
.container {
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
height: 1200px;
width: 600px;
background-color: #F1F3F5;
}
```
![en-us_image_0000001232162340](figures/en-us_image_0000001232162340.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - M/m = moveto The **x** and **y** parameters indicate the destination X and Y coordinates of a point. The **M** command only moves the brush, but does not draw a line between two points. Therefore, the **M** command is often used at the beginning of a path to indicate the start point.
>
> - L/l = lineto The **x** and **y** parameters indicate the X and Y coordinates of a point. The **L** command draws a line between the current position and the destination position (the previous point of the brush).
>
> - H/h = horizontal lineto Draws a horizontal line.
>
> - V/v = vertical lineto Draws a vertical line.
>
> - C/c = curveto Draws a cubic Bezier curve. Three groups of coordinate parameters are required: **x1 y1**, **x2 y2**, **x y**.
>
> - S/s = smooth curveto Draws a cubic Bezier curve. Two groups of coordinate parameters are required: **x2 y2**, **x y**.
>
> - Q/q = quadratic Belzier curve Draws a quadratic Bezier curve. Two groups of coordinate parameters are required: **x1 y1**, **x y**.
>
> - T/t = smooth quadratic Belzier curveto Draws a quadratic Bezier curve. One group of coordinate parameters are required: **x y**.
>
> - A/a = elliptical Arc Draw an arc. The following parameters are required: **rx ry x-axis-rotation** (rotation angle), **large-arc-flag** (angle), **sweep-flag** (arc direction), and **x y**. **large-arc-flag** determines whether the arc is less than 180 degrees. **0** indicates yes, and **1** indicates no. **sweep-flag** indicates the direction in which an arc is drawn. **0** indicates that the arc is drawn counterclockwise from the start point to the end point. **1** indicates that the arc is drawn clockwise from the start point to the end point.
>
> - Z/z = closepath Draws a straight line from the current point to the start point of the path.
en/application-dev/ui/ui-js-components-svg-text.md 0 → 100644
浏览文件 @ 658e31f5
# Text Drawing
The **&lt;svg&gt;** component can also be used to draw text.
## Text
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The text content must be written in the **&lt;text&gt;** area. The **&lt;tspan&gt;** child element label can be nested.
>
> - **&lt;text&gt;** can be nested only by the parent element label **svg**.
>
> - Only the default font **sans-serif** is supported.
Set the following attributes to define text styles: **x** (X coordinate), **y** (Y coordinate), **dx** (x-axis offset of the text), **dy** (y-axis offset of the text), **fill** (font fill color), **stroke** (text border color), and **stroke-width** (text border width).
```
<!-- xxx.hml -->
<div class="container">
<svg>
<text x="200" y="300" font-size="80px" fill="blue" >Hello World</text>
<text x="200" y="300" dx="20" dy="80" font-size="80px" fill="blue" fill-opacity="0.5" stroke="red" stroke-width="2">Hello World</text>
<text x="20" y="550" fill="#D2691E">
<tspan dx="40" fill="red" font-size="80" fill-opacity="0.4">Hello World </tspan>
</text>
</svg>
</div>
```
![en-us_image_0000001275803145](figures/en-us_image_0000001275803145.png)
## Drawing Text Along the Path
Set **textpath** to draw text along the path.
```
<!-- xxx.hml -->
<div class="container">
<svg fill="#00FF00" x="100" y="400">
<path d="M40,360 Q360,360 360,180 Q360,20 200,20 Q40,40 40,160 Q40,280 180,180 Q180,180 200,100" stroke="red" fill="none"></path>
<text>
<textpath fill="blue" startOffset="20%" path="M40,360 Q360,360 360,180 Q360,20 200,20 Q40,40 40,160 Q40,280 180,180 Q180,180 200,100" font-size="30px">
This is textpath test.
</textpath>
</text>
</svg>
</div>
```
![en-us_image_0000001231843084](figures/en-us_image_0000001231843084.png)
en/application-dev/ui/ui-js-components-swiper.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;swiper&gt; Development
The **&lt;swiper&gt;** component is a sliding container used to switch between child components. For details, see [swiper](../reference/arkui-js/js-components-container-swiper.md).
## Creating a &lt;swiper&gt; Component
Create a **&lt;swiper&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml-->
<div class="container">
<swiper>
<div class="item" style="background-color: #bf45ea;">
<text>item1</text>
</div>
<div class="item" style="background-color: #088684;">
<text>item2</text>
</div>
<div class="item" style="background-color: #7786ee;">
<text>item3</text>
</div>
</swiper>
</div>
```
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
height: 30%;
}
.item{
width: 100%;
height: 500px;
}
text{
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
color: white;
}
```
![en-us_image_0000001232003028](figures/en-us_image_0000001232003028.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> The **&lt;swiper&gt;** component supports child components except **&lt;list&gt;**.
## Adding Attributes
When **loop** is set to **false**, the **autoplay** attribute is added to the **&lt;swiper&gt;** component and the autoplay interval (**interval**) is set. The component automatically switches between child components and stops at the last one. Add the **digital** attribute to enable the digital navigation point and set **scrolleffect** to **fade**.
```
<!-- xxx.hml-->
<div class="container">
<swiper index="1" autoplay="true" interval="2000" indicator="true" digital="true" duration="500"
scrolleffect="fade" loop="false">
<div class="item" style="background-color: #bf45ea;">
<text>item1</text>
</div>
<div class="item" style="background-color: #088684;">
<text>item2</text>
</div>
<div class="item" style="background-color: #7786ee;">
<text>item3</text>
</div>
<div class="item" style="background-color: #c88cee;">
<text>item4</text>
</div>
</swiper>
</div>
```
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
height: 30%;
}
.item{
width: 100%;
height: 500px;
}
text{
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
color: white;
}
```
![en-us_image_0000001275923021](figures/en-us_image_0000001275923021.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - The **digital** attribute takes effect only when the **indicator** attribute is set to **true**.
>
> - The **loop** attribute takes effect only when there are two or more than two child components of the **&lt;swiper&gt;** component.
>
> - The **scrolleffect** attribute takes effect only when the **loop** attribute value is set to **false**.
## Setting Styles
Set the width and height of the **&lt;swiper&gt;** component, the indicator's size (**indicator-size**), color (**indicator-color**), relative position (**indicator-top**), and color when it is selected (**indicator-selected-color**).
```
<!-- xxx.hml-->
<div class="container">
<swiper index="1" autoplay="true" interval="2000" duration="500" >
<div class="item" style="background: linear-gradient(to right,#806dd9,#5d44ea,#2eb9d5)">
<text>item1</text>
</div>
<div class="item" style="background: linear-gradient( to right,#2eb9d5,#0e7db4,#2673d9)">
<text>item2</text>
</div>
<div class="item" style="background: linear-gradient( to right,#2673d9,#0c89af,#806dd9)">
<text>item3</text>
</div>
</swiper>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
width: 500px;
height: 500px;
border-radius: 250px;
indicator-color: white;
indicator-selected-color: blue;
indicator-size: 40px;
indicator-top: 100px;
overflow: hidden ;
}
.item{
width: 100%;
height: 500px;
}
text{
width: 100%;
text-align: center;
margin-top: 150px;
font-size: 50px;
color: white;
}
```
![en-us_image_0000001275803189](figures/en-us_image_0000001275803189.gif)
## Binding Events
Create two **&lt;text&gt;** components and bind click events. Clicking the component will call **showPrevious** to display the previous child component or **showNext** to display the next child component. Add a **&lt;select&gt;** component. A **change** event is triggered when a user selects a value from the drop-down list box and the **swipeTo** method is called to go to the specified page. Bind the **&lt;swiper&gt;** component with the **change** event (triggered when the index of the currently displayed component changes) and the **finish** event (triggered when the switchover animation ends).
```
<!-- xxx.hml-->
<div class="container">
<swiper interval="2000" onchange="change" loop="false" onanimationfinish="finish" id="swiper">
<div class="item" style="background-color: #bf45ea">
<text>item1</text>
</div>
<div class="item" style="background-color: #088684;">
<text>item2</text>
</div>
<div class="item" style="background-color: #7786ee;">
<text>item3</text>
</div>
<div class="item" style="background-color: #c88cee;">
<text>item4</text>
</div>
</swiper>
<div class="content">
<button class="pnbtn" onclick="previous">Previous</button>
<select onchange="selectChange">
<option value="0">swipeTo 1</option>
<option value="1">swipeTo 2</option>
<option value="2">swipeTo 3</option>
<option value="3">swipeTo 4</option>
</select>
<button class="pnbtn" onclick="next">Next</button>
</div>
</div>
```
```
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
height: 30%;
}
.item{
width: 100%;
height: 500px;
}
text{
width: 100%;
height: 100%;
text-align: center;
font-size: 50px;
color: white;
}
select{
background-color: white;
width: 250px;
height: 80px;
}
.content{
margin-top: 100px;
justify-content: space-around;
}
.pnbtn{
width: 200px;
height: 80px;
font-size: 30px;
}
```
```
import prompt from '@system.prompt';
export default{
change(e){
prompt.showToast({duration:2000,message:"current index:"+e.index});
},
finish(){
prompt.showToast({duration:2000,message:"The switchover ends"});
},
selectChange(e){
this.$element('swiper').swipeTo({index: Number(e.newValue)});
},
previous(){
this.$element('swiper').showPrevious();
},
next(){
this.$element('swiper').showNext();
}
}
```
![en-us_image_0000001231843128](figures/en-us_image_0000001231843128.gif)
## Example Scenario
Use the **&lt;swiper&gt;** component to create an image carousel and a thumbnail module at the bottom of the carousel. After a thumbnail is clicked, the **swipeTo** method is called to switch to the corresponding image.
```
<!-- xxx.hml-->
<div class="container">
<swiper duration="500" indicator="false" id="swiper" onchange="change">
<div class="item" for="item in list">
<image src="{{item.src}}"></image>
</div>
</swiper>
<div class="content">
<div class="content_item {{index == $idx?'actived':''}}" for="item in list" onclick="imageTo({{$idx}})">
<image src="{{item.src}}"></image>
</div>
</div>
</div>
```
```
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
justify-content: center;
width: 100%;
}
swiper{
width: 100%;
height: 500px;
}
.item{
width: 100%;
height: 500px;
}
.content{
margin-top: -120px;
width: 70%;
display: flex;
justify-content: space-around;
height: 100px;
}
.content_item{
padding: 5px;
transform: scale(0.5);
}
.actived{
transform: scale(1);
border: 1px solid #b20937ea;
}
```
```
// index.js
import prompt from '@system.prompt';
export default {
data:{
index: 0,
list:[
{src: 'common/images/1.png'},
{src: 'common/images/2.png'},
{src: 'common/images/3.png'},
{src: 'common/images/4.png'},]
},
imageTo(index){
this.index = index;
this.$element('swiper').swipeTo({index: index});
},
change(e){
this.index = e.index;
}
}
```
![en-us_image_0000001231843132](figures/en-us_image_0000001231843132.gif)
en/application-dev/ui/ui-js-components-switch.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;switch&gt; Development
The **&lt;switch&gt;** component is used to switch between the on and off states. For details, see [switch](../reference/arkui-js/js-components-basic-switch.md).
## Creating a &lt;switch&gt; Component
Create a **&lt;switch&gt;** component in the .hml file under **pages/index**.
```
<div class="container">
<switch></switch>
</div>
```
```
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
```
![en-us_image_0000001231843096](figures/en-us_image_0000001231843096.png)
## Adding Attributes and Methods
Use the **textoff** and **showtext** attributes to set the status when text is selected and unselected. Set the **checked** attribute to **true** (indicating that the component is on). Add the **change** event that is triggered when the component status changes. After the event is triggered, the **switchChange** function is executed to obtain the current component status (on or off).
```
<!-- xxx.hml -->
<div class="container">
<switch showtext="true" texton="open" textoff="close" checked="true" @change="switchChange"></switch>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
switch{
// Color of the selected text
texton-color: #002aff;
// Color of the unselected text
textoff-color: silver;
text-padding: 20px;
font-size: 50px;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
switchChange(e){
if(e.checked){
prompt.showToast({
message: "open"
});
}else{
prompt.showToast({
message: "close"
});
}
}
}
```
![en-us_image_0000001276003505](figures/en-us_image_0000001276003505.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> The text set by **texton** and **textoff** takes effect only when **showtext** is set to **true**.
## Example Scenario
Turn on the switch and the default delivery address is used. When the switch is turned off, the address selection button is displayed on the page. Clicking the button can change the delivery address.
Implementation method: Create a **&lt;switch&gt;** component, set the **checked** attribute to **true**, and change the delivery address through data binding. Set the **display** attribute (the default value is **none**). When the switch is turned off and the **display** attribute is set to **flex**, the address module is displayed and clicking the button can change the color.
```
<!-- xxx.hml -->
<div class="container">
<div class="change">
<text>Choose default address:</text>
<switch showtext="true" texton="on" textoff="off" checked="true" @change="switchChange"></switch>
</div>
<div class="content">
<text class="address"><span>Shipping address:</span><span class="textSpan">{{address}}</span></text>
</div>
<div class="myAddress" style="display: {{addressDisplay}};">
<text style="font-size: 30px;margin-bottom: 50px;">Choose an address:</text>
<text class="addressText" style="background-color: {{item == address?'#0fabe7':''}};color: {{item == address?'white':'black'}};"
for="item in addressList"@click="changeAddress({{$idx}}})">{{item}}</text>
</div>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
background-color: #F1F3F5;
flex-direction: column;
padding: 50px;
}
.change{
margin-top: 20%;
width: 100%;
justify-content: center;
}
switch{
texton-color: #002aff;
textoff-color: silver;
text-padding: 20px;
}
.content{
width: 70%;
text-align: center;
flex-direction: column;
border: 1px solid #002aff;
margin-left: 15%;
text-align: center;
}
.address{
width: 100%;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 28px;
margin-bottom: 50px;
}
.textSpan{
color: #0aa9f1;
}
.myAddress{
flex-direction: column;
margin-top: 50px;
}
.addressText{
margin-left: 35%;
width: 30%;
height: 75px;
text-align: center;
color: white;
margin-bottom: 30px;
border-radius: 10px;
border: 1px solid #0fabe7;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
address: '',
addressDisplay: 'none',
addressList: ['family','company','commissary'],
},
onInit(){
// Initialize the default address to the first one in the address list.
this.address = this.addressList[0];
},
switchChange(e){
if(e.checked){
this.addressDisplay = "none";
}else{
this.addressDisplay = "flex";
}
},
changeAddress(i){
this.address= this.addressList[i];
}
}
```
![en-us_image_0000001231843100](figures/en-us_image_0000001231843100.gif)
en/application-dev/ui/ui-js-components-text.md
浏览文件 @ 658e31f5
# &lt;text&gt; Development
The &lt;text&gt; component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md).
The **&lt;text&gt;** component is used to display a piece of textual information. For details, see [text](../reference/arkui-js/js-components-basic-text.md).
## Creating a &lt;text&gt; Component
Create a &lt;text&gt; component in the .hml file under pages/index.
Create a **&lt;text&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container" style="text-align: center;justify-content: center; align-items: center;">
<text>Hello World</text>
<text>
Hello World
</text>
</div>
```
......@@ -35,10 +37,9 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
## Setting the Text Style and Attributes
- Adding a text style
Set the color, font-size, allow-scale, word-spacing and text-align properties to add the color, size, zoom, text spacing, and vertical alignment of the text.
Set the color, font-size, allow-scale, word-spacing, and text-valign attributes to apply the color, size, zoom, spacing, and vertical alignment styles to the text.
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;flex-direction: column;justify-content: center; align-items: center;">
......@@ -52,7 +53,6 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
```
```
/* xxx.css */
.container {
......@@ -65,14 +65,13 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
}
```
![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png)
![en-us_image_0000001222967764](figures/en-us_image_0000001222967764.png)
- Adding a text modifier
Set the **text-decoration** and **text-decoration-color** attributes to add an underline, overline, line-through, or a combination of lines in the specified color to selected text. For values of **text-decoration**, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
Set the text-decoration attribute to add a line to selected text. Set the text-decoration-color attribute to apply specific color to the added line. For values of text-decoration, see [Text Style](../reference/arkui-js/js-components-basic-text.md).
```
<!-- xxx.hml -->
<div class="container" style="background-color:#F1F3F5;">
......@@ -85,6 +84,7 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
</div>
```
```
/* xxx.css */
.container {
......@@ -99,14 +99,13 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
}
```
![en-us_image_0000001223287688](figures/en-us_image_0000001223287688.png)
- Hiding text content
Set the text-overflow attribute to ellipsis so that overflowed text is displayed as an ellipsis.
- Hiding text content
Set the **text-overflow** attribute to **ellipsis** so that overflowed text is displayed as an ellipsis.
```
<!-- xxx.hml -->
<div class="container">
......@@ -116,6 +115,7 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
</div>
```
```
/* xxx.css */
.container {
......@@ -129,25 +129,22 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
.text{
width: 200px;
max-lines: 1;
text-overflow:ellipsis;
text-overflow:ellipsis;
}
```
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - **text-overflow** must be used together with **max-lines**.
>
> - **max-lines** indicates the maximum number of lines in the text.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - text-overflow must be used together with max-lines.
>
> - max-lines indicates the maximum number of lines in the text.
![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
![en-us_image_0000001267647865](figures/en-us_image_0000001267647865.png)
- Setting the text line breaking mode
Set the **word-break** attribute to specify how to break lines of text. For values of **word-break**, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
Set the word-break attribute to specify how to break lines of text. For values of word-break, see [Text Styles](../reference/arkui-js/js-components-basic-text.md).
```
<!-- xxx.hml -->
<div class="container">
......@@ -162,6 +159,7 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
</div>
```
```
/* xxx.css */
.container {
......@@ -188,66 +186,74 @@ Create a &lt;text&gt; component in the .hml file under pages/index.
height: 200px;
border:1px solid #0931e8;
text-align: center;
word-break: break-all;
word-break: break-all;
font-size: 40px;
}
```
![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png)
![en-us_image_0000001267767865](figures/en-us_image_0000001267767865.png)
- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md)child component
```
<!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5;">
<text style="font-size: 45px;">
This is a passage
</text>
<text style="font-size: 45px;">
<span style="color: aqua;">This </span><span style="color: #F1F3F5;"> 1 </span> <span style="color: blue;"> is a </span> <span style="color: #F1F3F5;"> 1 </span> <span style="color: red;"> passage </span>
</text>
</div>
```
- Setting the [&lt;span&gt;](../reference/arkui-js/js-components-basic-span.md) child component.
```
<!-- xxx.hml -->
<div class="container" style="justify-content: center; align-items: center;flex-direction: column;background-color: #F1F3F5; width: 100%;height: 100%;">
<text style="font-size: 45px;">
This is a passage
</text>
<text style="font-size: 45px;">
<span style="color: aqua;">This </span>
<span style="color: #F1F3F5;">
1
</span>
<span style="color: blue;"> is a </span>
<span style="color: #F1F3F5;">
1
</span>
<span style="color: red;"> passage </span>
</text>
</div>
```
![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
![en-us_image_0000001223127720](figures/en-us_image_0000001223127720.png)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> - When the **&lt;span&gt;** child component is used to form a text paragraph, incorrect **&lt;span&gt;** attribute settings (for example, setting of **font-weight** to **1000**) will result in abnormal display of the text paragraph.
>
> - When the **&lt;span&gt;** child component is being used, do not include any text you want to show in the **&lt;text&gt;** component, as such text will not be displayed if you do so.
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE**:
> - When the &lt;span&gt; child component is used to form a text paragraph, incorrect &lt;span&gt; attribute settings (for example, setting of font-weight to 1000) will result in abnormal display of the text paragraph.
>
> - When the &lt;span&gt; child component is being used, do not include any text you want to show in the &lt;text&gt; component, as such text will not be displayed if you do so.
## Example Scenario
Use the **&lt;text&gt;** component to display text content through data binding. Use the **&lt;span&gt;** child component to hide or display text content by setting the **show** attribute.
## Example Scenario
Use the &lt;text&gt; component to display text content through data binding. Use the &lt;span&gt; child component to hide or display text content by setting the show attribute.
```
<!-- xxx.hml -->
<div class="container">
<div style="align-items: center;justify-content: center;">
<text class="title">
{{ content }}
</text>
<switch checked="true" onchange="test"></switch>
</div>
<text class="span-container" style="color: #ff00ff;">
<span show="{{isShow}}"> {{ content }} </span>
<span style="color: white;">
1
</span>
<span style="color: #f76160">Hide clip </span>
</text>
</div>
```
```
<!-- xxx.hml -->
<div class="container">
<div style="align-items: center;justify-content: center;">
<text class="title">
{{ content }}
</text>
<switch checked="true" onchange="test"></switch>
</div>
<text class="span-container" style="color: #ff00ff;">
<span show="{{isShow}}"> {{ content }} </span>
<span style="color: white;">
1
</span>
<span style="color: #f76160">Hide clip </span>
</text>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
align-items: center;
flex-direction: column;
justify-content: center;
......@@ -266,7 +272,7 @@ Use the &lt;text&gt; component to display text content through data binding. Use
// xxx.js
export default {
data: {
isShow:true,
isShow:true,
content: 'Hello World'
},
onInit(){ },
......
en/application-dev/ui/ui-js-components-toolbar.md 0 → 100644
浏览文件 @ 658e31f5
# &lt;toolbar&gt; Development
The **&lt;toolbar&gt;** component shows actions available on the current screen and can be used for level-1 navigation. For details, see [toolbar](../reference/arkui-js/js-components-basic-toolbar.md).
## Creating a &lt;toolbar&gt; Component
Create a **&lt;toolbar&gt;** component in the .hml file under **pages/index**.
```
<!-- xxx.hml -->
<div class="container">
<toolbar style="background-color: #F1F3F5;">
<toolbar-item value="item1"></toolbar-item>
<toolbar-item value="item2"></toolbar-item>
</toolbar>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
toolbar-item{
font-size: 35px;
}
```
![en-us_image_0000001275922977](figures/en-us_image_0000001275922977.gif)
## Add Child Components
The **&lt;toolbar&gt;** component supports only the **&lt;toolbar-item&gt;** child component and can display a maximum of five **&lt;toolbar-item&gt;** child components on a page. If there are six or more **&lt;toolbar-item&gt;** child components, the first four child components are retained, and the rest are moved to the **More** option on the toolbar and can be displayed on a pop-up window by clicking **More**. Under **More**, the child components are displayed in the default style; the custom style settings do not take effect.
```
<!-- xxx.hml -->
<div class="container">
<toolbar>
<toolbar-item value="item1"></toolbar-item>
<toolbar-item value="item2"></toolbar-item>
<toolbar-item value="item3"></toolbar-item>
<toolbar-item value="item4"></toolbar-item>
<toolbar-item value="item5"></toolbar-item>
<toolbar-item value="item6"></toolbar-item>
</toolbar>
</div>
```
```
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
toolbar-item{
font-size: 35px;
}
```
![en-us_image_0000001232002988](figures/en-us_image_0000001232002988.gif)
## Setting Styles
Set the **position** style for the **&lt;toolbar&gt;** component and set the font color, size, and background color of **&lt;toolbar-item&gt;** child components.
```
<!-- xxx.hml -->
<div class="container">
<toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
<toolbar-item value="item1" icon="common/images/1.png" class="toolbarActive"></toolbar-item>
<toolbar-item value="item2" icon="common/images/2.png"></toolbar-item>
<toolbar-item value="item3" icon="common/images/1.png"></toolbar-item>
<toolbar-item value="item4" icon="common/images/2.png"></toolbar-item>
</toolbar>
</div>
```
```
/* xxx.css */
.container {
background-color: #F1F3F5;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
toolbar-item{
font-size: 35px;
}
.toolbarActive{
color: red;
background-color: #daebef;
}
```
![en-us_image_0000001275803149](figures/en-us_image_0000001275803149.png)
## Binding Events
Bind the click event and long press event to the **&lt;toolbar-item&gt;** child components, so that the text of these components turns red upon click and turns blue upon long press.
```
<!-- xxx.hml -->
<div class="container">
<toolbar style="position: fixed;top: 50%;width: 100%;background-color: #F1F3F5;">
<toolbar-item value="item1" icon="common/images/1.png" style="color: {{itemColor}};" onclick="itemClick"></toolbar-item>
<toolbar-item value="item2" icon="common/images/2.png" style="color: {{itemColor}}"></toolbar-item>
<toolbar-item value="item3" icon="common/images/3.png" style="color: {{itemColor}}" onlongpress="itemLongPress"></toolbar-item>
</toolbar>
</div>
```
```
/* xxx.css */
.container {
background-color: #F1F3F5;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
toolbar-item{
font-size: 35px;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
itemColor:'black'
},
itemClick(){
this.itemColor= "red";
prompt.showToast({duration:2000,message:'item click'});
},
itemLongPress(){
prompt.showToast({duration:2000,message:'item long press'});
this.itemColor= "blue";
},
}
```
![en-us_image_0000001275803153](figures/en-us_image_0000001275803153.gif)
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> The **&lt;toolbar&gt;** component does not allow adding of events or methods, but its child components do.
## Example Scenario
In this example, you'll implement a **&lt;toolbar-item&gt;** component, clicking which will trigger a change in the text color and the image corresponding to the component.
Use the **for** loop to create a **&lt;toolbar-item&gt;** component and bind a click event to it, so that clicking the component will obtain and store an index value. When setting the text color, the system checks whether the current index value is the stored value. If yes, the system sets the color to red. If no, the system uses the default color.
```
<!-- xxx.hml -->
<div class="container">
<image src="{{imgList[active]}}"></image>
<toolbar style="position: fixed;bottom: 5%;width: 100%;background-color: #F1F3F5;">
<toolbar-item value="{{ item.option}}" icon="{{item.icon}}" style="color: {{active == $idx?'red':'black'}};background-color: {{active
== $idx?'#dbe7f1':'#F1F3F5'}};" for="{{item in itemList}}" onclick="itemClick({{$idx}})"></toolbar-item>
</toolbar>
</div>
```
```
/* xxx.css */
.container {
background-color: #F1F3F5;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
toolbar-item{
font-size: 35px;
}
```
```
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
active: 0,
imgList:["common/images/1.png","common/images/2.png","common/images/3.png","common/images/4.png"],
itemList:[
{option:'item1',icon:'common/images/1.png'},
{option:'item2',icon:'common/images/2.png'},
{option:'item3',icon:'common/images/3.png'},
{option:'item4',icon:'common/images/4.png'},
]
},
itemClick(id){
this.active= id;
},
}
```
![en-us_image_0000001231683128](figures/en-us_image_0000001231683128.gif)
en/application-dev/website.md
浏览文件 @ 658e31f5
......@@ -51,28 +51,49 @@
- [Defining Page Routes](ui/ui-js-building-ui-routes.md)
- Common Component Development Guidelines
- Container Components
- [List](ui/ui-js-components-list.md)
- [Dialog](ui/ui-js-components-dialog.md)
- [Form](ui/ui-js-components-form.md)
- [Stepper](ui/ui-js-components-stepper.md)
- [Tabs](ui/ui-js-component-tabs.md)
- [&lt;list&gt; Development](ui/ui-js-components-list.md)
- [&lt;dialog&gt; Development](ui/ui-js-components-dialog.md)
- [&lt;form&gt; Development](ui/ui-js-components-form.md)
- [&lt;stepper&gt; Development](ui/ui-js-components-stepper.md)
- [&lt;tabs&gt; Development](ui/ui-js-component-tabs.md)
- [&lt;swiper&gt; Development](ui/ui-js-components-swiper.md)
- Basic Components
- [Text](ui/ui-js-components-text.md)
- [Input](ui/ui-js-components-input.md)
- [Button](ui/ui-js-components-button.md)
- [Picker](ui/ui-js-components-picker.md)
- [Image](ui/ui-js-components-images.md)
- [&lt;text&gt; Development](ui/ui-js-components-text.md)
- [&lt;input&gt; Development](ui/ui-js-components-input.md)
- [&lt;button&gt; Development](ui/ui-js-components-button.md)
- [&lt;picker&gt; Development](ui/ui-js-components-picker.md)
- [&lt;image&gt; Development](ui/ui-js-components-images.md)
- [&lt;image-animator&gt; Development](ui/ui-js-components-image-animator.md)
- [&lt;rating&gt; Development](ui/ui-js-components-rating.md)
- [&lt;slider&gt; Development](ui/ui-js-components-slider.md)
- [&lt;chart&gt; Development](ui/ui-js-components-chart.md)
- [&lt;switch&gt; Development](ui/ui-js-components-switch.md)
- [&lt;toolbar&gt; Development](ui/ui-js-components-toolbar.md)
- [&lt;menu&gt; Development](ui/ui-js-components-menu.md)
- [&lt;marquee&gt; Development](ui/ui-js-components-marquee.md)
- [&lt;qrcode&gt; Development](ui/ui-js-components-qrcode.md)
- [&lt;search&gt; Development](ui/ui-js-components-search.md)
- &lt;canvas&gt; Development
- [CanvasRenderingContext2D](ui/ui-js-components-canvasrenderingcontext2d.md)
- [Path2D](ui/ui-js-components-path2d.md)
- [OffscreenCanvas](ui/ui-js-components-offscreencanvas.md)
- [&lt;grid-container&gt; Development](ui/ui-js-components-calendar.md)
- Svg
- [Basics](ui/ui-js-components-svg-overview.md)
- [Graph Drawing](ui/ui-js-components-svg-graphics.md)
- [Path Drawing](ui/ui-js-components-svg-path.md)
- [Text Drawing](ui/ui-js-components-svg-text.md)
- Animation Development Guidelines
- CSS Animation
- [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md)
- [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md)
- [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md)
- [Defining Animations for SVG Components](ui/ui-js-animate-svg.md)
- JS Animation
- [Component Animation](ui/ui-js-animate-component.md)
- Interpolator Animation
- [Animation Effect](ui/ui-js-animate-dynamic-effects.md)
- [Animation Frame](ui/ui-js-animate-frame.md)
- CSS Animation
- [Defining Attribute Style Animations](ui/ui-js-animate-attribute-style.md)
- [Defining Animations with the transform Attribute](ui/ui-js-animate-transform.md)
- [Defining Animations with the background-position Attribute](ui/ui-js-animate-background-position-style.md)
- [Defining Animations for SVG Components](ui/ui-js-animate-svg.md)
- JS Animation
- [Component Animation](ui/ui-js-animate-component.md)
- Interpolator Animation
- [Animation Effect](ui/ui-js-animate-dynamic-effects.md)
- [Animation Frame](ui/ui-js-animate-frame.md)
- [Custom Components](ui/ui-js-custom-components.md)
- TypeScript-based Declarative Development Paradigm
- [Overview](ui/ui-ts-overview.md)
......@@ -128,6 +149,13 @@
- [Custom Component Lifecycle Callbacks](ui/ts-custom-component-lifecycle-callbacks.md)
- [Example: Component Creation and Re-Initialization](ui/ts-component-creation-re-initialization.md)
- [Syntactic Sugar](ui/ts-syntactic-sugar.md)
- Common Component Development Guidelines
- [Button](ui/ui-ts-basic-components-button.md)
- [Web](ui/ui-ts-components-web.md)
- Common Layout Development Guidelines
- [Flex Layout](ui/ui-ts-layout-flex.md)
- [Grid Layout](ui/ui-ts-layout-grid-container.md)
- [Media Query](ui/ui-ts-layout-mediaquery.md)
- Experiencing the Declarative UI
- [Creating a Declarative UI Project](ui/ui-ts-creating-project.md)
- [Getting to Know Components](ui/ui-ts-components.md)
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或