Skip to content

D
Docs

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

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

!14516 翻译完成 13827 

Merge pull request !14516 from ester.zhou/TR-13827
上级 aea407ac ad98ed37
隐藏空白更改
内联 并排
Showing with 125 addition and 148 deletion
en/application-dev/reference/apis/js-apis-prompt.md
浏览文件 @ ff7ba9c1
...@@ -33,7 +33,7 @@ Shows a toast. ...@@ -33,7 +33,7 @@ Shows a toast.
```js ```js
prompt.showToast({ prompt.showToast({
message: 'Message Info', message: 'Message Info',
duration: 2000, duration: 2000
}); });
``` ```
...@@ -47,7 +47,7 @@ Describes the options for showing the toast. ...@@ -47,7 +47,7 @@ Describes the options for showing the toast.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | ---------------------------------------- | ---- | ---------------------------------------- | | -------- | ---------------------------------------- | ---- | ---------------------------------------- |
| message | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes | Text to display. | | message | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes | Text to display. |
| duration | number | No | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.| | duration | number | No | Duration that the toast will remain on the screen. The default value is 1500 ms. The value range is 1500 ms to 10000 ms. If a value less than 1500 ms is set, the default value is used. If the value greater than 10000 ms is set, the upper limit 10000 ms is used.|
| bottom | string\| number | No | Distance between the toast border and the bottom of the screen. It does not have an upper limit. The default unit is vp. | | bottom | string\| number | No | Distance between the toast border and the bottom of the screen. It does not have an upper limit. The default unit is vp. |
...@@ -80,11 +80,11 @@ prompt.showDialog({ ...@@ -80,11 +80,11 @@ prompt.showDialog({
buttons: [ buttons: [
{ {
text: 'button1', text: 'button1',
color: '#000000', color: '#000000'
}, },
{ {
text: 'button2', text: 'button2',
color: '#000000', color: '#000000'
} }
], ],
}) })
...@@ -122,11 +122,11 @@ prompt.showDialog({ ...@@ -122,11 +122,11 @@ prompt.showDialog({
buttons: [ buttons: [
{ {
text: 'button1', text: 'button1',
color: '#000000', color: '#000000'
}, },
{ {
text: 'button2', text: 'button2',
color: '#000000', color: '#000000'
} }
] ]
}, (err, data) => { }, (err, data) => {
...@@ -148,8 +148,8 @@ Describes the options for showing the dialog box. ...@@ -148,8 +148,8 @@ Describes the options for showing the dialog box.
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| title | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No | Title of the dialog box. | | title | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No | Title of the dialog box. |
| message | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No | Text body. | | message | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No | Text body. |
| buttons | [[Button](#button),[Button](#button)?,[Button](#button)?] | No | Array of buttons in the dialog box. The array structure is **{text:'button', color: '\#666666'}**. Up to three buttons are supported. The first button is of the **positiveButton** type, the second is of the **negativeButton** type, and the third is of the **neutralButton** type.| | buttons | [[Button](#button),[Button](#button)?,[Button](#button)?] | No | Array of buttons in the dialog box. The array structure is **{text:'button', color: '\#666666'}**. Up to three buttons are supported. The first button is of the **positiveButton** type, the second is of the **negativeButton** type, and the third is of the **neutralButton** type.|
## ShowDialogSuccessResponse ## ShowDialogSuccessResponse
...@@ -186,11 +186,11 @@ prompt.showActionMenu({ ...@@ -186,11 +186,11 @@ prompt.showActionMenu({
buttons: [ buttons: [
{ {
text: 'item1', text: 'item1',
color: '#666666', color: '#666666'
}, },
{ {
text: 'item2', text: 'item2',
color: '#000000', color: '#000000'
}, },
] ]
}, (err, data) => { }, (err, data) => {
...@@ -232,11 +232,11 @@ prompt.showActionMenu({ ...@@ -232,11 +232,11 @@ prompt.showActionMenu({
buttons: [ buttons: [
{ {
text: 'item1', text: 'item1',
color: '#666666', color: '#666666'
}, },
{ {
text: 'item2', text: 'item2',
color: '#000000', color: '#000000'
}, },
] ]
}) })
...@@ -257,7 +257,7 @@ Describes the options for showing the action menu. ...@@ -257,7 +257,7 @@ Describes the options for showing the action menu.
| Name | Type | Mandatory| Description | | Name | Type | Mandatory| Description |
| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | | ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| title | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No | Title of the text to display. | | title | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | No | Title of the text to display. |
| buttons | [[Button](#button),[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?] | Yes | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.| | buttons | [[Button](#button),[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?,[Button](#button)?] | Yes | Array of menu item buttons. The array structure is **{text:'button', color: '\#666666'}**. Up to six buttons are supported. If there are more than six buttons, extra buttons will not be displayed.|
## ActionMenuSuccessResponse ## ActionMenuSuccessResponse
...@@ -278,5 +278,5 @@ Describes the menu item button in the action menu. ...@@ -278,5 +278,5 @@ Describes the menu item button in the action menu.
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| ----- | ---------------------------------------- | ---- | ------- | | ----- | ---------------------------------------- | ---- | ------- |
| text | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes | Button text.| | text | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes | Button text.|
| color | string\| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes | Text color of the button.| | color | string \| [Resource](../arkui-ts/ts-types.md#resource)<sup>9+</sup> | Yes | Text color of the button.|
en/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ ff7ba9c1
# picker-view # picker-view
> **NOTE** > **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. > This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen. The **\<picker-view>** component provides the view that shows an embedded scrollable selector on the screen.
...@@ -77,7 +76,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md ...@@ -77,7 +76,7 @@ In addition to the [universal styles](../arkui-js/js-components-common-styles.md
| selected-font-size | &lt;length&gt; | 20px | No | Font size of the selected item. The value is of the length type, in pixels. | | selected-font-size | &lt;length&gt; | 20px | No | Font size of the selected item. The value is of the length type, in pixels. |
| disappear-color<sup>5+</sup> | &lt;color&gt; | \#ffffff | No | Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | | disappear-color<sup>5+</sup> | &lt;color&gt; | \#ffffff | No | Font color of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. |
| disappear-font-size<sup>5+</sup> | &lt;length&gt; | 14px | No | Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. | | disappear-font-size<sup>5+</sup> | &lt;length&gt; | 14px | No | Font size of the items that gradually disappear. Disappearing items are the top option and bottom option of a column containing five options in total. |
| font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text. | | font-family | string | sans-serif | No | Font family of the selector, in which fonts are separated by commas (,). Each font is set using a font name or font family name. The first font in the family or the specified [custom font](../arkui-js/js-components-common-customizing-font.md) is used for the text.|
## Events ## Events
...@@ -138,15 +137,13 @@ Not supported ...@@ -138,15 +137,13 @@ Not supported
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
left: 0px; width: 100%;
top: 0px; height: 50%;
width: 454px;
height: 454px;
} }
.title { .title {
font-size: 30px; font-size: 30px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 50%;
} }
``` ```
...@@ -164,8 +161,8 @@ Not supported ...@@ -164,8 +161,8 @@ Not supported
}, },
} }
``` ```
![](figures/pickerview1.gif) ![picker-view0](figures/picker-view0.gif)
2. Time Selector 2. Time Selector
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
...@@ -180,22 +177,16 @@ Not supported ...@@ -180,22 +177,16 @@ Not supported
```css ```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
left: 0px; width: 100%;
top: 0px; height: 50%;
width: 454px;
height: 454px;
} }
.title { .title {
font-size: 30px; font-size: 31px;
text-align: center; text-align: center;
} margin-top: 50%;
.time-picker {
width: 500px;
height: 400px;
margin-top: 20px;
} }
``` ```
...@@ -227,16 +218,16 @@ Not supported ...@@ -227,16 +218,16 @@ Not supported
} }
``` ```
![](figures/pickerview2.gif) ![picker-view1](figures/picker-view1.gif)
3. Date Selector 3. Date Selector
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<text class="title"> <text class="title">
Selected: {{time}} Selected: {{date}}
</text> </text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view> <picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
</div> </div>
``` ```
...@@ -246,20 +237,13 @@ Not supported ...@@ -246,20 +237,13 @@ Not supported
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
left: 0px; width: 100%;
top: 0px; height: 50%;
width: 454px;
height: 454px;
} }
.title { .title {
font-size: 30px; font-size: 31px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 50%;
}
.date-picker {
width: 500px;
height: 400px;
margin-top: 50px;
} }
``` ```
...@@ -270,12 +254,12 @@ Not supported ...@@ -270,12 +254,12 @@ Not supported
date: "", date: "",
}, },
handleChange(data) { handleChange(data) {
this.date = data.year + "" + data.month + "" + data.day + ""; this.date = data.year + "/" + data.month + "/" + data.day + "";
}, },
} }
``` ```
![picker-view2](figures/picker-view2.gif)
4. Date and Time Selector 4. Date and Time Selector
```html ```html
<!-- xxx.hml --> <!-- xxx.hml -->
...@@ -293,20 +277,13 @@ Not supported ...@@ -293,20 +277,13 @@ Not supported
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
left: 0px; width: 100%;
top: 0px; height: 50%;
width: 500px;
height: 454px;
} }
.title { .title {
font-size: 30px; font-size: 31px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 50%;
}
.date-picker {
width: 500px;
height: 400px;
margin-top: 50px;
} }
``` ```
...@@ -317,12 +294,12 @@ Not supported ...@@ -317,12 +294,12 @@ Not supported
datetime: "", datetime: "",
}, },
handleChange(data) { handleChange(data) {
this.datetime = data.year + "" + data.month + "" + data.day + "" + data.hour + "" + data.minute + ""; this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + "";
}, },
} }
``` ```
![picker-view3](figures/picker-view3.gif)
5. Multi-Column Text Selector 5. Multi-Column Text Selector
```html ```html
...@@ -341,15 +318,13 @@ Not supported ...@@ -341,15 +318,13 @@ Not supported
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
left: 0px; width: 100%;
top: 0px; height: 50%;
width: 500px;
height: 454px;
} }
.title { .title {
font-size: 30px; font-size: 31px;
text-align: center; text-align: center;
margin-top: 20px; margin-top: 50%;
} }
``` ```
...@@ -365,8 +340,8 @@ Not supported ...@@ -365,8 +340,8 @@ Not supported
value: "" value: ""
}, },
handleChange(data) { handleChange(data) {
this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected; this.value = "Selected: " + data.column + "," + "value: " + data.newValue + ", index:" + data.newSelected;
}, },
} }
``` ```
![](figures/pickerview5.gif) ![picker-view4](figures/picker-view4.gif)
en/application-dev/reference/arkui-js/js-components-basic-span.md
浏览文件 @ ff7ba9c1
...@@ -76,7 +76,7 @@ Not supported ...@@ -76,7 +76,7 @@ Not supported
} }
.spanTxt{ .spanTxt{
color: chartreuse; color: chartreuse;
font-size: 100px; font-size: 80px;
} }
``` ```
......
en/application-dev/reference/arkui-ts/ts-basic-components-textinput.md
浏览文件 @ ff7ba9c1
...@@ -31,16 +31,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -31,16 +31,16 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description | | Name | Type | Description |
| ------------------------ | ---------------------------------------- | ---------------------------------------- | | ------------------------ | ---------------------------------------- | ---------------------------------------- |
| type | InputType | Input box type.<br>Default value: **InputType.Normal** | | type | [InputType](#inputtype) | Input box type.<br>Default value: **InputType.Normal** |
| placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color.| | placeholderColor | [ResourceColor](ts-types.md#resourcecolor) | Placeholder text color.|
| placeholderFont | [Font](ts-types.md#font) | Placeholder text font.| | placeholderFont | [Font](ts-types.md#font) | Placeholder text font.|
| enterKeyType | EnterKeyType | Type of the Enter key. Currently, only the default value is supported.<br>Default value: **EnterKeyType.Done**| | enterKeyType | [EnterKeyType](#enterkeytype) | Type of the Enter key. Currently, only the default value is supported.<br>Default value: **EnterKeyType.Done**|
| caretColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the caret in the text box. | | caretColor | [ResourceColor](ts-types.md#resourcecolor) | Color of the caret in the text box. |
| maxLength | number | Maximum number of characters in the text input. | | maxLength | number | Maximum number of characters in the text input. |
| inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) =&gt; void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.| | inputFilter<sup>8+</sup> | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>error?: (value: string) =&gt; void<br>} | Regular expression for input filtering. Only inputs that comply with the regular expression can be displayed. Other inputs are filtered out. The specified regular expression can match single characters, but not strings.<br>- **value**: regular expression to set.<br>- **error**: filtered-out content to return when regular expression matching fails.|
| copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.| | copyOption<sup>9+</sup> | [CopyOptions](ts-appendix-enums.md#copyoptions9) | Whether copy and paste is allowed.|
| showPasswordIcon<sup>9+</sup> | boolean | Whether to display the show password icon at the end of the password text box.<br>Default value: **true**| | showPasswordIcon<sup>9+</sup> | boolean | Whether to display the show password icon at the end of the password text box.<br>Default value: **true**|
| style<sup>9+</sup> | TextInputStyle | Text input style.<br>Default value: **TextInputStyle.Default**| | style<sup>9+</sup> | [TextInputStyle](#textinputstyle9) | Text input style.<br>Default value: **TextInputStyle.Default**|
| textAlign<sup>9+</sup> | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.<br>Default value: **TextAlign.Start** | | textAlign<sup>9+</sup> | [TextAlign](ts-appendix-enums.md#textalign) | Alignment mode of the text in the text box.<br>Default value: **TextAlign.Start** |
## EnterKeyType ## EnterKeyType
...@@ -74,12 +74,12 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the ...@@ -74,12 +74,12 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
In addition to the [universal events](ts-universal-events-click.md), the following events are supported. In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name | Description | | Name | Description |
| ---------------------------------------- | ---------------------------------------- | | ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(callback: (value: string) =&gt; void) | Triggered when the input changes. | | onChange(callback: (value: string) =&gt; void) | Triggered when the input changes.<br>**value**: text content.|
| onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key. | | onSubmit(callback: (enterKey: EnterKeyType) =&gt; void) | Triggered when the Enter key on the keyboard is pressed. The return value is the current type of the Enter key.<br>**enterKeyType**: type of the Enter key. For details, see [EnterKeyType](#enterkeytype).|
| onEditChanged(callback: (isEditing: boolean) =&gt; void)<sup>(deprecated)</sup> | Triggered when the input status changes. Sicne API version 8, **onEditChange** is recommended. | | onEditChanged(callback: (isEditing: boolean) =&gt; void)<sup>(deprecated)</sup> | Triggered when the input status changes. Since API version 8, **onEditChange** is recommended.|
| onEditChange(callback: (isEditing: boolean) =&gt; void)<sup>8+</sup> | Triggered when the input status changes. If the value of **isEditing** is **true**, text input is in progress. | | onEditChange(callback: (isEditing: boolean) =&gt; void)<sup>8+</sup> | Triggered when the input status changes. If the value of **isEditing** is **true**, text input is in progress. |
| onCopy(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied.| | onCopy(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the copy button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be copied.|
| onCut(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut.| | onCut(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the cut button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be cut.|
| onPaste(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted.| | onPaste(callback:(value: string) =&gt; void)<sup>8+</sup> | Triggered when the paste button on the pasteboard, which displays when the text box is long pressed, is clicked.<br>**value**: text to be pasted.|
...@@ -92,7 +92,7 @@ Implements the controller of the **\<TextInput>** component. ...@@ -92,7 +92,7 @@ Implements the controller of the **\<TextInput>** component.
``` ```
controller: TextInputController = new TextInputController() controller: TextInputController = new TextInputController()
``` ```
### caretPosition ### caretPosition<sup>8+</sup>
caretPosition(value: number): void caretPosition(value: number): void
......
en/application-dev/ui/ui-js-animate-component.md
浏览文件 @ ff7ba9c1
...@@ -34,28 +34,28 @@ Call the **animate** method to obtain an animation object, which supports animat ...@@ -34,28 +34,28 @@ Call the **animate** method to obtain an animation object, which supports animat
```js ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
animation: '', animation: '',
}, options: {},
onInit() { frames: {}
}, },
onShow() { onInit() {
var options = { this.options = {
duration: 1500, duration: 1500,
}; };
var frames = [ this.frames = [
{ {
width:200,height:200, width: 200, height: 200,
}, },
{ {
width:300,height:300, width: 300, height: 300,
} }
]; ];
this.animation = this.$element('content').animate(frames, options); // Obtain the animation object. },
}, Show() {
Show() { this.animation = this.$element('content').animate(this.frames, this.options); // Obtain the animation object.
this.animation.play(); this.animation.play();
} }
} }
``` ```
...@@ -173,36 +173,36 @@ Set the animation attributes by using the **options** parameter. ...@@ -173,36 +173,36 @@ Set the animation attributes by using the **options** parameter.
```js ```js
/* xxx.js */ /* xxx.js */
export default { export default {
data: { data: {
animation: '', animation: '',
}, options: {},
onInit() { frames: {}
}, },
onShow() { onInit() {
var options = { this.options = {
duration: 1500, duration: 1500,
easing: 'ease-in', easing: 'ease-in',
delay: 5, delay: 5,
iterations: 2, iterations: 2,
direction: 'normal', direction: 'normal',
}; };
var frames = [ this.frames = [
{ {
transform: { transform: {
translate: '-150px -0px' translate: '-150px -0px'
} }
}, },
{ {
transform: { transform: {
translate: '150px 0px' translate: '150px 0px'
} }
} }
]; ];
this.animation = this.$element('content').animate(frames, options); },
}, Show() {
Show() { this.animation = this.$element('content').animate(this.frames, this.options);
this.animation.play(); this.animation.play();
} }
} }
``` ```
......
en/application-dev/ui/ui-js-animate-transform.md
浏览文件 @ ff7ba9c1
...@@ -39,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -39,8 +39,8 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height: 428px; height: 428px;
background-color: #860303; background-color: #860303;
transform: rotate(45deg); transform: rotate(45deg);
margin-top: 284px; margin-top: 290px;
margin-left: 148px; margin-left: 145px;
} }
.content{ .content{
margin-top: 500px; margin-top: 500px;
...@@ -53,7 +53,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -53,7 +53,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
width: 100px; width: 100px;
height: 150px; height: 150px;
background-color: #1033d9; background-color: #1033d9;
transform: translate(150px,-137px); transform: translate(150px,-152px);
} }
.window{ .window{
z-index: 1; z-index: 1;
...@@ -86,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p ...@@ -86,7 +86,7 @@ Create a square and rotate it by 90 degrees to form a rhombus. Cover the lower p
height: 100px; height: 100px;
border-radius: 15px; border-radius: 15px;
background-color: #9a7404; background-color: #9a7404;
transform: translate(200px,-710px) skewX(-5deg); transform: translate(200px,-700px) skewX(-5deg);
} }
``` ```
......
en/application-dev/ui/ui-js-components-canvas.md
浏览文件 @ ff7ba9c1
...@@ -61,6 +61,8 @@ Set **width**, **height**, **background-color**, and **border** of the **&lt;can ...@@ -61,6 +61,8 @@ Set **width**, **height**, **background-color**, and **border** of the **&lt;can
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background-color: #F1F3F5; background-color: #F1F3F5;
width: 100%;
height: 100%;
} }
canvas{ canvas{
width: 500px; width: 500px;
......
en/application-dev/ui/ui-js-components-grid.md
浏览文件 @ ff7ba9c1
...@@ -14,7 +14,7 @@ Create a **\<grid-container>** component in the .hml file under **pages/index** ...@@ -14,7 +14,7 @@ Create a **\<grid-container>** component in the .hml file under **pages/index**
<div class="container"> <div class="container">
<grid-container id="mygrid" columns="5" gutter="20px" style="background-color: pink;"> <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: <grid-row style="height:100px;justify-content:space-around;width: 80%;background-color: #f67002;margin-left:
10%;"></grid-row> 10%; margin-right: 10%;"></grid-row>
<grid-row style="height:300px;justify-content:space-around;background-color: #ffcf00;width: 100%;"></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-row style="height:150px;justify-content:space-around;background-color: #032cf8;width: 100%;"></grid-row>
</grid-container> </grid-container>
...@@ -52,11 +52,11 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum ...@@ -52,11 +52,11 @@ Touch the **\<grid-container>** component to call the **getColumns**, **getColum
<grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;" <grid-container id="mygrid" columns="6" gutter="20px" style="background-color: pink;padding-top: 100px;"
onclick="getColumns" onlongpress="getSizeType"> onclick="getColumns" onlongpress="getSizeType">
<grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left: <grid-row style="height:100px;justify-content:space-around;background-color: #4cedf3;width: 20%;margin-left:
40%;"></grid-row> 40%; margin-right: 40%;"></grid-row>
<grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left: <grid-row style="height:150px;justify-content:space-around;background-color: #4cbff3;width: 50%;margin-left:
25%;"></grid-row> 25%; margin-right: 25%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left: <grid-row style="height:200px;justify-content:space-around;background-color: #465ff6;width: 80%;margin-left:
10%;"></grid-row> 10%; margin-right: 10%;"></grid-row>
<grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row> <grid-row style="height:200px;justify-content:space-around;background-color: #5011ec;width: 100%;"></grid-row>
</grid-container> </grid-container>
</div> </div>
......
en/application-dev/ui/ui-ts-custom-component-lifecycle-callbacks.md
浏览文件 @ ff7ba9c1
...@@ -77,7 +77,7 @@ Invoked each time when a page is hidden. This callback is used in the routing pr ...@@ -77,7 +77,7 @@ Invoked each time when a page is hidden. This callback is used in the routing pr
onBackPress?(): void onBackPress?(): void
Invoked when a user clicks the back button. Only the custom components decorated by **@Entry** take effect. If **true** is returned, the page processes the return logic and no page routing is performed. If **false** is returned, the default route return logic is used. If the return value is not set, the value **false** is used. Invoked when a user clicks the back button. This callback takes effect only for the custom components decorated by **@Entry**.
**Example 2:** **Example 2:**
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或