Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“664be756185923b96e8da79261073c461ae84298”上不存在“paddle/fluid/git@gitcode.net:BaiXuePrincess/Paddle.git”
未验证 提交 cf68ab51 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!13124 翻译完成 11180+10932+11164+11198+11199+11378+11380+12427 

Merge pull request !13124 from ester.zhou/C1-0103
上级 cf1ea7dc 42801563
隐藏空白更改
内联 并排
Showing with 263 addition and 228 deletion
en/application-dev/reference/apis/Readme-EN.md
浏览文件 @ cf68ab51
...@@ -68,6 +68,9 @@ ...@@ -68,6 +68,9 @@
- bundle/[HapModuleInfo](js-apis-bundle-HapModuleInfo.md) - bundle/[HapModuleInfo](js-apis-bundle-HapModuleInfo.md)
- bundle/[Metadata](js-apis-bundle-Metadata.md) - bundle/[Metadata](js-apis-bundle-Metadata.md)
- bundle/[ModuleInfo](js-apis-bundle-ModuleInfo.md) - bundle/[ModuleInfo](js-apis-bundle-ModuleInfo.md)
- Application Management
- [@system.package](js-apis-system-package.md)
- UI Page - UI Page
- [@ohos.animator](js-apis-animator.md) - [@ohos.animator](js-apis-animator.md)
...@@ -234,7 +237,6 @@ ...@@ -234,7 +237,6 @@
- [@system.mediaquery](js-apis-system-mediaquery.md) - [@system.mediaquery](js-apis-system-mediaquery.md)
- [@system.network](js-apis-system-network.md) - [@system.network](js-apis-system-network.md)
- [@system.notification](js-apis-system-notification.md) - [@system.notification](js-apis-system-notification.md)
- [@system.package](js-apis-system-package.md)
- [@system.prompt](js-apis-system-prompt.md) - [@system.prompt](js-apis-system-prompt.md)
- [@system.request](js-apis-system-request.md) - [@system.request](js-apis-system-request.md)
- [@system.router](js-apis-system-router.md) - [@system.router](js-apis-system-router.md)
......
en/application-dev/reference/apis/js-apis-inputmethodengine.md
浏览文件 @ cf68ab51
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
## Modules to Import ## Modules to Import
``` ```js
import inputMethodEngine from '@ohos.inputmethodengine'; import inputMethodEngine from '@ohos.inputmethodengine';
``` ```
...@@ -14,44 +14,44 @@ import inputMethodEngine from '@ohos.inputmethodengine'; ...@@ -14,44 +14,44 @@ import inputMethodEngine from '@ohos.inputmethodengine';
Defines constant values. Defines constant values.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
| Name| Type| Readable| Writable| Description| | Name| Type| Readable| Writable| Description|
| -------- | -------- | -------- | -------- | -------- | | -------------------- | -------- | ---- | ---- | ------------------- |
| ENTER_KEY_TYPE_UNSPECIFIED | number | Yes| No| No function is specified for the Enter key.| | ENTER_KEY_TYPE_UNSPECIFIED | number | Yes | No | No function is specified for the Enter key.|
| ENTER_KEY_TYPE_GO | number | Yes| No| The Enter key takes the user to the target.| | ENTER_KEY_TYPE_GO | number | Yes | No | The Enter key takes the user to the target.|
| ENTER_KEY_TYPE_SEARCH | number | Yes| No| The Enter key takes the user to the results of their searching.| | ENTER_KEY_TYPE_SEARCH | number | Yes | No | The Enter key takes the user to the results of their searching.|
| ENTER_KEY_TYPE_SEND | number | Yes| No| The Enter key sends the text to its target.| | ENTER_KEY_TYPE_SEND | number | Yes | No | The Enter key sends the text to its target.|
| ENTER_KEY_TYPE_NEXT | number | Yes| No| The Enter key takes the user to the next field.| | ENTER_KEY_TYPE_NEXT | number | Yes | No | The Enter key takes the user to the next field.|
| ENTER_KEY_TYPE_DONE | number | Yes| No| The Enter key takes the user to the next line.| | ENTER_KEY_TYPE_DONE | number | Yes | No | The Enter key takes the user to the next line.|
| ENTER_KEY_TYPE_PREVIOUS | number | Yes| No| The Enter key takes the user to the previous field.| | ENTER_KEY_TYPE_PREVIOUS | number | Yes | No | The Enter key takes the user to the previous field.|
| PATTERN_NULL | number | Yes| No| Any type of edit box.| | PATTERN_NULL | number | Yes | No | Any type of edit box.|
| PATTERN_TEXT | number | Yes| No| Text edit box.| | PATTERN_TEXT | number | Yes | No | Text edit box.|
| PATTERN_NUMBER | number | Yes| No| Number edit box.| | PATTERN_NUMBER | number | Yes | No | Number edit box.|
| PATTERN_PHONE | number | Yes| No| Phone number edit box.| | PATTERN_PHONE | number | Yes | No | Phone number edit box.|
| PATTERN_DATETIME | number | Yes| No| Date edit box.| | PATTERN_DATETIME | number | Yes | No | Date edit box.|
| PATTERN_EMAIL | number | Yes| No| Email edit box.| | PATTERN_EMAIL | number | Yes | No | Email edit box.|
| PATTERN_URI | number | Yes| No| URI edit box.| | PATTERN_URI | number | Yes | No | URI edit box.|
| PATTERN_PASSWORD | number | Yes| No| Password edit box.| | PATTERN_PASSWORD | number | Yes | No | Password edit box.|
| OPTION_ASCII | number | Yes| No| ASCII values are allowed.| | OPTION_ASCII | number | Yes | No | ASCII values are allowed.|
| OPTION_NONE | number | Yes| No| No input attribute is specified.| | OPTION_NONE | number | Yes | No | No input attribute is specified.|
| OPTION_AUTO_CAP_CHARACTERS | number | Yes| No| Characters are allowed.| | OPTION_AUTO_CAP_CHARACTERS | number | Yes | No | Characters are allowed.|
| OPTION_AUTO_CAP_SENTENCES | number | Yes| No| Sentences are allowed.| | OPTION_AUTO_CAP_SENTENCES | number | Yes | No | Sentences are allowed.|
| OPTION_AUTO_WORDS | number | Yes| No| Words are allowed.| | OPTION_AUTO_WORDS | number | Yes | No | Words are allowed.|
| OPTION_MULTI_LINE | number | Yes| No| Multiple lines are allowed.| | OPTION_MULTI_LINE | number | Yes | No | Multiple lines are allowed.|
| OPTION_NO_FULLSCREEN | number | Yes| No| Half-screen style.| | OPTION_NO_FULLSCREEN | number | Yes | No | Half-screen style.|
| FLAG_SELECTING | number | Yes| No| The edit box is being selected.| | FLAG_SELECTING | number | Yes | No | The edit box is being selected.|
| FLAG_SINGLE_LINE | number | Yes| No| The edit box allows only single-line input.| | FLAG_SINGLE_LINE | number | Yes | No | The edit box allows only single-line input.|
| DISPLAY_MODE_PART | number | Yes| No| The edit box is displayed in half-screen mode.| | DISPLAY_MODE_PART | number | Yes | No | The edit box is displayed in half-screen mode.|
| DISPLAY_MODE_FULL | number | Yes| No| The edit box is displayed in full screen.| | DISPLAY_MODE_FULL | number | Yes | No | The edit box is displayed in full screen.|
## inputMethodEngine.getInputMethodEngine<a name="getInputMethodEngine"></a> ## inputMethodEngine.getInputMethodEngine
getInputMethodEngine(): InputMethodEngine getInputMethodEngine(): InputMethodEngine
Obtains an **InputMethodEngine** instance. Obtains an **InputMethodEngine** instance.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Return value** **Return value**
...@@ -62,16 +62,16 @@ Obtains an **InputMethodEngine** instance. ...@@ -62,16 +62,16 @@ Obtains an **InputMethodEngine** instance.
**Example** **Example**
```js ```js
var InputMethodEngine = inputMethodEngine.getInputMethodEngine(); let InputMethodEngine = inputMethodEngine.getInputMethodEngine();
``` ```
## inputMethodEngine.createKeyboardDelegate<a name="createKeyboardDelegate"></a> ## inputMethodEngine.createKeyboardDelegate
createKeyboardDelegate(): KeyboardDelegate createKeyboardDelegate(): KeyboardDelegate
Obtains a **KeyboardDelegate** instance. Obtains a **KeyboardDelegate** instance.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Return value** **Return value**
...@@ -82,20 +82,20 @@ Obtains a **KeyboardDelegate** instance. ...@@ -82,20 +82,20 @@ Obtains a **KeyboardDelegate** instance.
**Example** **Example**
```js ```js
var KeyboardDelegate = inputMethodEngine.createKeyboardDelegate(); let KeyboardDelegate = inputMethodEngine.createKeyboardDelegate();
``` ```
## InputMethodEngine<a name="InputMethodEngine"></a> ## InputMethodEngine
In the following API examples, you must first use [getInputMethodEngine](#getInputMethodEngine) to obtain an **InputMethodEngine** instance, and then call the APIs using the obtained instance. In the following API examples, you must first use [getInputMethodEngine](#getInputMethodEngine) to obtain an **InputMethodEngine** instance, and then call the APIs using the obtained instance.
### on('inputStart')<a name="inputStart"></a> ### on('inputStart')
on(type: 'inputStart', callback: (kbController: KeyboardController, textInputClient: TextInputClient) => void): void on(type: 'inputStart', callback: (kbController: KeyboardController, textInputClient: TextInputClient) => void): void
Listens for the input method binding event. This API uses a callback to return the result. Listens for the input method binding event. This API uses a callback to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -119,7 +119,7 @@ off(type: 'inputStart', callback?: (kbController: KeyboardController, textInputC ...@@ -119,7 +119,7 @@ off(type: 'inputStart', callback?: (kbController: KeyboardController, textInputC
Cancels listening for the input method binding event. Cancels listening for the input method binding event.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -140,7 +140,7 @@ on(type: 'keyboardShow'|'keyboardHide', callback: () => void): void ...@@ -140,7 +140,7 @@ on(type: 'keyboardShow'|'keyboardHide', callback: () => void): void
Listens for an input method event. Listens for an input method event.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -163,7 +163,7 @@ off(type: 'keyboardShow'|'keyboardHide', callback?: () => void): void ...@@ -163,7 +163,7 @@ off(type: 'keyboardShow'|'keyboardHide', callback?: () => void): void
Cancels listening for an input method event. Cancels listening for an input method event.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -178,7 +178,7 @@ Cancels listening for an input method event. ...@@ -178,7 +178,7 @@ Cancels listening for an input method event.
InputMethodEngine.off('keyboardShow'); InputMethodEngine.off('keyboardShow');
``` ```
## KeyboardDelegate<a name="KeyboardDelegate"></a> ## KeyboardDelegate
In the following API examples, you must first use [createKeyboardDelegate](#createKeyboardDelegate) to obtain a **KeyboardDelegate** instance, and then call the APIs using the obtained instance. In the following API examples, you must first use [createKeyboardDelegate](#createKeyboardDelegate) to obtain a **KeyboardDelegate** instance, and then call the APIs using the obtained instance.
...@@ -188,7 +188,7 @@ on(type: 'keyDown'|'keyUp', callback: (event: KeyEvent) => boolean): void ...@@ -188,7 +188,7 @@ on(type: 'keyDown'|'keyUp', callback: (event: KeyEvent) => boolean): void
Listens for a hard keyboard even. This API uses a callback to return the key information. Listens for a hard keyboard even. This API uses a callback to return the key information.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -211,7 +211,7 @@ off(type: 'keyDown'|'keyUp', callback?: (event: KeyEvent) => boolean): void ...@@ -211,7 +211,7 @@ off(type: 'keyDown'|'keyUp', callback?: (event: KeyEvent) => boolean): void
Cancels listening for a hard keyboard even. Cancels listening for a hard keyboard even.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -232,7 +232,7 @@ on(type: 'cursorContextChange', callback: (x: number, y:number, height:number) = ...@@ -232,7 +232,7 @@ on(type: 'cursorContextChange', callback: (x: number, y:number, height:number) =
Listens for cursor context changes. This API uses a callback to return the cursor information. Listens for cursor context changes. This API uses a callback to return the cursor information.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -255,7 +255,7 @@ off(type: 'cursorContextChange', callback?: (x: number, y:number, height:number) ...@@ -255,7 +255,7 @@ off(type: 'cursorContextChange', callback?: (x: number, y:number, height:number)
Cancels listening for cursor context changes. Cancels listening for cursor context changes.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -276,7 +276,7 @@ on(type: 'selectionChange', callback: (oldBegin: number, oldEnd: number, newBegi ...@@ -276,7 +276,7 @@ on(type: 'selectionChange', callback: (oldBegin: number, oldEnd: number, newBegi
Listens for text selection changes. This API uses a callback to return the text selection information. Listens for text selection changes. This API uses a callback to return the text selection information.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -299,7 +299,7 @@ off(type: 'selectionChange', callback?: (oldBegin: number, oldEnd: number, newBe ...@@ -299,7 +299,7 @@ off(type: 'selectionChange', callback?: (oldBegin: number, oldEnd: number, newBe
Cancels listening for text selection changes. Cancels listening for text selection changes.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -321,7 +321,7 @@ on(type: 'textChange', callback: (text: string) => void): void ...@@ -321,7 +321,7 @@ on(type: 'textChange', callback: (text: string) => void): void
Listens for text changes. This API uses a callback to return the current text content. Listens for text changes. This API uses a callback to return the current text content.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -359,7 +359,7 @@ Cancels listening for text changes. ...@@ -359,7 +359,7 @@ Cancels listening for text changes.
KeyboardDelegate.off('textChange'); KeyboardDelegate.off('textChange');
``` ```
## KeyboardController<a name="KeyboardController"></a> ## KeyboardController
In the following API examples, you must first use [inputStart](#inputStart) to obtain a **KeyboardController** instance, and then call the APIs using the obtained instance. In the following API examples, you must first use [inputStart](#inputStart) to obtain a **KeyboardController** instance, and then call the APIs using the obtained instance.
...@@ -369,7 +369,7 @@ hideKeyboard(callback: AsyncCallback&lt;void&gt;): void ...@@ -369,7 +369,7 @@ hideKeyboard(callback: AsyncCallback&lt;void&gt;): void
Hides the keyboard. This API uses an asynchronous callback to return the result. Hides the keyboard. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -379,10 +379,9 @@ Hides the keyboard. This API uses an asynchronous callback to return the result. ...@@ -379,10 +379,9 @@ Hides the keyboard. This API uses an asynchronous callback to return the result.
**Example** **Example**
```js ```js
KeyboardController.hideKeyboard(()=>{ KeyboardController.hideKeyboard(()=>{
}); });
``` ```
### hideKeyboard ### hideKeyboard
...@@ -395,18 +394,17 @@ Hides the keyboard. This API uses a promise to return the result. ...@@ -395,18 +394,17 @@ Hides the keyboard. This API uses a promise to return the result.
**Return value** **Return value**
| Type | Description: | | Type | Description |
| ---------------- | -------- | | ---------------- | -------- |
| Promise&lt;void> | Promise used to return the result.| | Promise&lt;void> | Promise used to return the result.|
**Example** **Example**
```js ```js
KeyboardController.hideKeyboard(); KeyboardController.hideKeyboard();
``` ```
## TextInputClient<a name="TextInputClient"></a> ## TextInputClient
In the following API examples, you must first use [inputStart](#inputStart) to obtain a **TextInputClient** instance, and then call the APIs using the obtained instance. In the following API examples, you must first use [inputStart](#inputStart) to obtain a **TextInputClient** instance, and then call the APIs using the obtained instance.
...@@ -416,7 +414,7 @@ getForward(length:number, callback: AsyncCallback&lt;string&gt;): void ...@@ -416,7 +414,7 @@ getForward(length:number, callback: AsyncCallback&lt;string&gt;): void
Obtains the specific-length text before the cursor. This API uses an asynchronous callback to return the result. Obtains the specific-length text before the cursor. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -428,9 +426,9 @@ Obtains the specific-length text before the cursor. This API uses an asynchronou ...@@ -428,9 +426,9 @@ Obtains the specific-length text before the cursor. This API uses an asynchronou
**Example** **Example**
```js ```js
TextInputClient.getForward(5,(text) =>{ TextInputClient.getForward(5,(text) =>{
console.info("text = " + text); console.info("text = " + text);
}); });
``` ```
### getForward ### getForward
...@@ -439,7 +437,7 @@ getForward(length:number): Promise&lt;string&gt; ...@@ -439,7 +437,7 @@ getForward(length:number): Promise&lt;string&gt;
Obtains the specific-length text before the cursor. This API uses a promise to return the result. Obtains the specific-length text before the cursor. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -456,8 +454,8 @@ Obtains the specific-length text before the cursor. This API uses a promise to r ...@@ -456,8 +454,8 @@ Obtains the specific-length text before the cursor. This API uses a promise to r
**Example** **Example**
```js ```js
var text = TextInputClient.getForward(5); let text = TextInputClient.getForward(5);
console.info("text = " + text); console.info("text = " + text);
``` ```
### getBackward ### getBackward
...@@ -466,7 +464,7 @@ getBackward(length:number, callback: AsyncCallback&lt;string&gt;): void ...@@ -466,7 +464,7 @@ getBackward(length:number, callback: AsyncCallback&lt;string&gt;): void
Obtains the specific-length text after the cursor. This API uses an asynchronous callback to return the result. Obtains the specific-length text after the cursor. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -478,8 +476,8 @@ Obtains the specific-length text after the cursor. This API uses an asynchronous ...@@ -478,8 +476,8 @@ Obtains the specific-length text after the cursor. This API uses an asynchronous
**Example** **Example**
```js ```js
TextInputClient.getBackward(5,(text)=>{ TextInputClient.getBackward(5,(text)=>{
console.info("text = " + text); console.info("text = " + text);
}); });
``` ```
...@@ -489,7 +487,7 @@ getBackward(length:number): Promise&lt;string&gt; ...@@ -489,7 +487,7 @@ getBackward(length:number): Promise&lt;string&gt;
Obtains the specific-length text after the cursor. This API uses a promise to return the result. Obtains the specific-length text after the cursor. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -506,8 +504,8 @@ Obtains the specific-length text after the cursor. This API uses a promise to re ...@@ -506,8 +504,8 @@ Obtains the specific-length text after the cursor. This API uses a promise to re
**Example** **Example**
```js ```js
var text = TextInputClient.getBackward(5); let text = TextInputClient.getBackward(5);
console.info("text = " + text); console.info("text = " + text);
``` ```
### deleteForward ### deleteForward
...@@ -516,7 +514,7 @@ deleteForward(length:number, callback: AsyncCallback&lt;boolean&gt;): void ...@@ -516,7 +514,7 @@ deleteForward(length:number, callback: AsyncCallback&lt;boolean&gt;): void
Deletes the fixed-length text before the cursor. This API uses an asynchronous callback to return the result. Deletes the fixed-length text before the cursor. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -529,7 +527,7 @@ Deletes the fixed-length text before the cursor. This API uses an asynchronous c ...@@ -529,7 +527,7 @@ Deletes the fixed-length text before the cursor. This API uses an asynchronous c
```js ```js
TextInputClient.deleteForward(5,(isSuccess)=>{ TextInputClient.deleteForward(5,(isSuccess)=>{
console.info("isSuccess = " + isSuccess); console.info("isSuccess = " + isSuccess);
}); });
``` ```
...@@ -539,7 +537,7 @@ deleteForward(length:number): Promise&lt;boolean&gt; ...@@ -539,7 +537,7 @@ deleteForward(length:number): Promise&lt;boolean&gt;
Deletes the fixed-length text before the cursor. This API uses a promise to return the result. Deletes the fixed-length text before the cursor. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -556,8 +554,8 @@ Deletes the fixed-length text before the cursor. This API uses a promise to retu ...@@ -556,8 +554,8 @@ Deletes the fixed-length text before the cursor. This API uses a promise to retu
**Example** **Example**
```js ```js
var isSuccess = TextInputClient.deleteForward(5); let isSuccess = TextInputClient.deleteForward(5);
console.info("isSuccess = " + isSuccess); console.info("isSuccess = " + isSuccess);
``` ```
### deleteBackward ### deleteBackward
...@@ -566,7 +564,7 @@ deleteBackward(length:number, callback: AsyncCallback&lt;boolean&gt;): void ...@@ -566,7 +564,7 @@ deleteBackward(length:number, callback: AsyncCallback&lt;boolean&gt;): void
Deletes the fixed-length text after the cursor. This API uses an asynchronous callback to return the result. Deletes the fixed-length text after the cursor. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -578,8 +576,8 @@ Deletes the fixed-length text after the cursor. This API uses an asynchronous ca ...@@ -578,8 +576,8 @@ Deletes the fixed-length text after the cursor. This API uses an asynchronous ca
**Example** **Example**
```js ```js
TextInputClient.deleteBackward(5, (isSuccess)=>{ TextInputClient.deleteBackward(5, (isSuccess)=>{
console.info("isSuccess = " + isSuccess); console.info("isSuccess = " + isSuccess);
}); });
``` ```
...@@ -606,7 +604,7 @@ Deletes the fixed-length text after the cursor. This API uses a promise to retur ...@@ -606,7 +604,7 @@ Deletes the fixed-length text after the cursor. This API uses a promise to retur
**Example** **Example**
```js ```js
var isSuccess = TextInputClient.deleteBackward(5); let isSuccess = TextInputClient.deleteBackward(5);
console.info("isSuccess = " + isSuccess); console.info("isSuccess = " + isSuccess);
``` ```
...@@ -616,7 +614,7 @@ sendKeyFunction(action:number, callback: AsyncCallback&lt;boolean&gt;): void ...@@ -616,7 +614,7 @@ sendKeyFunction(action:number, callback: AsyncCallback&lt;boolean&gt;): void
Sets the Enter key to send the text to its target. This API uses an asynchronous callback to return the result. Sets the Enter key to send the text to its target. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -628,8 +626,8 @@ Sets the Enter key to send the text to its target. This API uses an asynchronous ...@@ -628,8 +626,8 @@ Sets the Enter key to send the text to its target. This API uses an asynchronous
**Example** **Example**
```js ```js
TextInputClient.sendKeyFunction(inputMethod.ENTER_KEY_TYPE_NEXT,(isSuccess)=>{ TextInputClient.sendKeyFunction(inputMethod.ENTER_KEY_TYPE_NEXT,(isSuccess)=>{
console.info("isSuccess = " + isSuccess); console.info("isSuccess = " + isSuccess);
}); });
``` ```
...@@ -639,7 +637,7 @@ sendKeyFunction(action:number): Promise&lt;boolean&gt; ...@@ -639,7 +637,7 @@ sendKeyFunction(action:number): Promise&lt;boolean&gt;
Sets the Enter key to send the text to its target. This API uses a promise to return the result. Sets the Enter key to send the text to its target. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -656,7 +654,7 @@ Sets the Enter key to send the text to its target. This API uses a promise to re ...@@ -656,7 +654,7 @@ Sets the Enter key to send the text to its target. This API uses a promise to re
**Example** **Example**
```js ```js
var isSuccess = TextInputClient.sendKeyFunction(inputMethod.ENTER_KEY_TYPE_NEXT); let isSuccess = TextInputClient.sendKeyFunction(inputMethod.ENTER_KEY_TYPE_NEXT);
console.info("isSuccess = " + isSuccess); console.info("isSuccess = " + isSuccess);
``` ```
...@@ -679,7 +677,7 @@ Inserts text. This API uses an asynchronous callback to return the result. ...@@ -679,7 +677,7 @@ Inserts text. This API uses an asynchronous callback to return the result.
```js ```js
TextInputClient.insertText("test", (isSuccess)=>{ TextInputClient.insertText("test", (isSuccess)=>{
console.info("isSuccess = " + isSuccess); console.info("isSuccess = " + isSuccess);
}); });
``` ```
...@@ -689,7 +687,7 @@ insertText(text:string): Promise&lt;boolean&gt; ...@@ -689,7 +687,7 @@ insertText(text:string): Promise&lt;boolean&gt;
Inserts text. This API uses a promise to return the result. Inserts text. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -706,7 +704,7 @@ Inserts text. This API uses a promise to return the result. ...@@ -706,7 +704,7 @@ Inserts text. This API uses a promise to return the result.
**Example** **Example**
```js ```js
var isSuccess = TextInputClient.insertText("test"); let isSuccess = TextInputClient.insertText("test");
console.info("isSuccess = " + isSuccess); console.info("isSuccess = " + isSuccess);
``` ```
...@@ -716,7 +714,7 @@ getEditorAttribute(callback: AsyncCallback&lt;EditorAttribute&gt;): void ...@@ -716,7 +714,7 @@ getEditorAttribute(callback: AsyncCallback&lt;EditorAttribute&gt;): void
Obtains the attribute of the edit box. This API uses an asynchronous callback to return the result. Obtains the attribute of the edit box. This API uses an asynchronous callback to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Parameters** **Parameters**
...@@ -727,8 +725,8 @@ Obtains the attribute of the edit box. This API uses an asynchronous callback to ...@@ -727,8 +725,8 @@ Obtains the attribute of the edit box. This API uses an asynchronous callback to
**Example** **Example**
```js ```js
TextInputClient.getEditorAttribute((EditorAttribute)=>{ TextInputClient.getEditorAttribute((EditorAttribute)=>{
}); });
``` ```
### getEditorAttribute ### getEditorAttribute
...@@ -737,7 +735,7 @@ getEditorAttribute(): Promise&lt;EditorAttribute&gt; ...@@ -737,7 +735,7 @@ getEditorAttribute(): Promise&lt;EditorAttribute&gt;
Obtains the attribute of the edit box. This API uses a promise to return the result. Obtains the attribute of the edit box. This API uses a promise to return the result.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
**Return value** **Return value**
...@@ -748,25 +746,25 @@ Obtains the attribute of the edit box. This API uses a promise to return the res ...@@ -748,25 +746,25 @@ Obtains the attribute of the edit box. This API uses a promise to return the res
**Example** **Example**
```js ```js
var EditorAttribute = TextInputClient.getEditorAttribute(); let EditorAttribute = TextInputClient.getEditorAttribute();
``` ```
## EditorAttribute<a name="EditorAttribute"></a> ## EditorAttribute
Describes the attribute of the edit box. Describes the attribute of the edit box.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
| Name | Type| Readable| Writable| Description | | Name | Type| Readable| Writable| Description |
| ------------ | -------- | ---- | ---- | ------------------ | | ------------ | -------- | ---- | ---- | ------------------ |
| enterKeyType | number | Yes | No | Function attribute of the edit box.| | enterKeyType | number | Yes | No | Function attribute of the edit box.|
| inputPattern | number | Yes | No | Text attribute of the edit box.| | inputPattern | number | Yes | No | Text attribute of the edit box.|
## KeyEvent<a name="KeyEvent"></a> ## KeyEvent
Describes the attribute of a key. Describes the attribute of a key.
**System capability**: SystemCapability.MiscServices.InputMethodFramework **System capability**: SystemCapability.Miscservices.InputMethodFramework
| Name | Type| Readable| Writable| Description | | Name | Type| Readable| Writable| Description |
| --------- | -------- | ---- | ---- | ------------ | | --------- | -------- | ---- | ---- | ------------ |
......
en/application-dev/reference/apis/js-apis-system-package.md
浏览文件 @ cf68ab51
# Application Management # Application Management
> ![icon-note.gif](public_sys-resources/icon-note.gif) **Note：** > **NOTE**
> >
> - The APIs of this module are no longer maintained since API version 7. It is recommended that you use [`@ohos.bundle`](js-apis-Bundle.md) instead. > The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>
> - The initial APIs of this module are supported since API version 3. Newly added APIs will be marked with a superscript to indicate their earliest API version.
## Modules to Import ## Modules to Import
...@@ -26,20 +24,20 @@ Checks whether an application exists, or whether a native application has been i ...@@ -26,20 +24,20 @@ Checks whether an application exists, or whether a native application has been i
**System capability**: SystemCapability.BundleManager.BundleFramework **System capability**: SystemCapability.BundleManager.BundleFramework
**Parameter** **Parameters**
| Name | Type | Mandatory | Description | | Name | Type | Mandatory | Description |
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| bundleName | string | Yes | Application&nbsp;bundle&nbsp;name | | bundleName | string | Yes | Application bundle name. |
| success | Function | No | Called&nbsp;when&nbsp;the&nbsp;check&nbsp;result&nbsp;is&nbsp;obtained | | success | Function | No | Called when the check result is obtained. |
| fail | Function | No | Called&nbsp;when&nbsp;the&nbsp;check&nbsp;result&nbsp;fails&nbsp;to&nbsp;be&nbsp;obtained | | fail | Function | No | Called when the check result fails to be obtained. |
| complete | Function | No | Called&nbsp;when&nbsp;the&nbsp;execution&nbsp;is&nbsp;complete | | complete | Function | No | Called when the execution is complete. |
The following value will be returned when the check result is obtained. The following value will be returned when the check result is obtained.
| Name | Type | Description | | Name | Type | Description |
| -------- | -------- | -------- | | -------- | -------- | -------- |
| result | boolean | Whether&nbsp;the&nbsp;application&nbsp;exists,&nbsp;or&nbsp;whether&nbsp;the&nbsp;native&nbsp;application&nbsp;has&nbsp;been&nbsp;installed | | result | boolean | The value **true** means that the application exists or the native application has been installed, and **false** means the opposite. |
**Example** **Example**
......
en/application-dev/reference/apis/js-apis-uitest.md
浏览文件 @ cf68ab51
...@@ -19,6 +19,20 @@ This module provides the following functions: ...@@ -19,6 +19,20 @@ This module provides the following functions:
import {UiDriver,BY,MatchPattern} from '@ohos.uitest' import {UiDriver,BY,MatchPattern} from '@ohos.uitest'
``` ```
## MatchPattern
Enumerates the match patterns supported for component attributes.
**System capability**: SystemCapability.Test.UiTest
| Name | Value | Description |
| ----------- | ---- | -------------- |
| EQUALS | 0 | Equal to the given value. |
| CONTAINS | 1 | Contains the given value. |
| STARTS_WITH | 2 | Starts with the given value.|
| ENDS_WITH | 3 | Ends with the given value.|
## By ## By
The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components. The UiTest framework provides a wide range of UI component feature description APIs in the **By** class to filter and match components.
...@@ -978,16 +992,3 @@ async function demo() { ...@@ -978,16 +992,3 @@ async function demo() {
} }
``` ```
## MatchPattern
Enumerates the match patterns supported for component attributes.
**System capability**: SystemCapability.Test.UiTest
| Name | Value | Description |
| ----------- | ---- | -------------- |
| EQUALS | 0 | Equal to the given value. |
| CONTAINS | 1 | Containing the given value. |
| STARTS_WITH | 2 | Starting from the given value.|
| ENDS_WITH | 3 | Ending with the given value.|
en/application-dev/reference/arkui-js/js-components-container-badge.md
浏览文件 @ cf68ab51
# badge # badge
The **&lt;badge&gt;** component is used to mark new events that require user attention in your application. > **NOTE**
>
> This component is supported since API version 5. Updates will be marked with a superscript to indicate their earliest API version.
The **\<badge>** component is used to mark new events that require user attention in your application.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
This component supports only one child component. This component supports only one child component.
> ![img](public_sys-resources/icon-note.gif) **NOTE:** If multiple child components are used, only the first one takes effect by default. > **NOTE**
>
## Attributes > If multiple child components are used, only the first one takes effect by default.
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.
## Attributes
In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description | | Name | Type | Default Value | Mandatory| Description |
| --------- | ------------------------------------------------------------ | ------------- | --------- | ------------------------------------------------------------ | | ------------------ | ----------- | -------- | ---- | ------------------------------------------------------------ |
| placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:<br>- **right**: on the right border of the component.<br>- **rightTop**: in the upper right corner of the component border.<br>- **left**: on the left border of the component. | | placement | string | rightTop | No | Position of a number or dot badge. Available values are as follows:<br>- **right**: on the right border of the component.<br>- **rightTop**: in the upper right corner of the component border.<br>- **left**: on the left border of the component.|
| count | number | 0 | No | Number of notifications displayed via the badge. The default value is **0**. If the number of notifications is greater than 0, the badge changes from a dot to the number. If this attribute is not set or the value is less than or equal to 0, the badge is a dot.<br>**NOTE:** When the **count** value is greater than the **maxcount** value, maxcount+ is displayed.<br>The largest integer value supported for **count** is **2147483647**. | | count | number | 0 | No | Number of notifications displayed via the badge. If the value is 0 (default value), the badge is not displayed. If the value is greater than 0, the badge is a number badge.<br>When the **count** value is greater than the **maxcount** value, *maxcount***+** is displayed. The largest integer value supported for **count** is **2147483647**.|
| visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, set the **count** attribute. | | visible | boolean | false | No | Whether to display the badge. The value **true** means that the badge shows up when a new notification is received. To use a number badge, also set the **count** attribute.|
| maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.<br>**NOTE:** The largest integer value supported for **maxcount** is **2147483647**. | | maxcount | number | 99 | No | Maximum number of notifications. When the number of new notifications exceeds the value of this attribute, *maxcount***+** is displayed, for example, **99+**.<br>The largest integer value supported for **maxcount** is **2147483647**.|
| config | BadgeConfig | - | No | Configuration of the badge. | | config | BadgeConfig | - | No | Configuration of the badge. |
| label<sup>6+</sup> | string | - | No | Text of the new notification displayed via the badge.<br>**NOTE:** When this attribute is set, attributes **count** and **maxcount** do not take effect. | | label<sup>6+</sup> | string | - | No | Text of the new notification displayed via the badge.<br>When this attribute is set, attributes **count** and **maxcount** do not take effect.|
**Table 1** BadgeConfig **Table 1** BadgeConfig
| Name | Type | Default Value | Mandatory | Description |
| ---------- | -------------- | -------- | ---- | ------------ |
| badgeColor | &lt;color&gt; | \#fa2a2d | No | Background color of the badge. |
| textColor | &lt;color&gt; | \#ffffff | No | Text color of the number badge.|
| textSize | &lt;length&gt; | 10px | No | Text size of the number badge.|
| badgeSize | &lt;length&gt; | 6px | No | Default size of the dot badge. |
| Name | Type | Default Value | Mandatory | Description |
| ---------- | -------------- | ------------- | --------- | ------------------------------- |
| badgeColor | &lt;color&gt; | #fa2a2d | No | Background color of the badge. |
| textColor | &lt;color&gt; | #ffffff | No | Text color of the number badge. |
| textSize | &lt;length&gt; | 10px | No | Text size of the number badge. |
| badgeSize | &lt;length&gt; | 6px | No | Default size of the dot badge. |
## Styles ## Styles
Styles in [Universal Styles](js-components-common-styles.md) are supported. The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
> **NOTE**
>
> The total size of child components must be smaller than or equal to that of the **\<badge>** component. Otherwise, the child components cannot be displayed.
> ![img](public_sys-resources/icon-note.gif) **NOTE:** The total size of child components must be smaller than or equal to that of the **&lt;badge&gt;** component. Otherwise, the child components cannot be displayed.
## Events ## Events
Events in [Universal Events](js-components-common-events.md) are supported. The [universal events](../arkui-js/js-components-common-events.md) are supported.
## Methods ## Methods
Methods in [Universal Methods](js-components-common-methods.md) are supported. The [universal methods](../arkui-js/js-components-common-methods.md) are supported.
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<badge class="badge" config="{{badgeconfig}}" visible="true" count="100" maxcount="99"> <badge class="badge" config="{{badgeconfig}}" visible="true" count="100" maxcount="99">
...@@ -64,6 +75,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -64,6 +75,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
<text class="text2">example</text> <text class="text2">example</text>
</badge> </badge>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -82,6 +96,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported. ...@@ -82,6 +96,9 @@ Methods in [Universal Methods](js-components-common-methods.md) are supported.
background-color: #46b1e3; background-color: #46b1e3;
font-size: 50px; font-size: 50px;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
data:{ data:{
...@@ -93,4 +110,4 @@ export default { ...@@ -93,4 +110,4 @@ export default {
} }
``` ```
![img](figures/figures1.png) ![en-us_image_000000117726526811](figures/en-us_image_000000117726526811.png)
\ No newline at end of file
en/application-dev/reference/arkui-js/js-components-container-tabs.md
浏览文件 @ cf68ab51
# tabs # tabs
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
The **\<tabs>** component provides a tab container. The **\<tabs>** component provides a tab container.
## Required Permissions ## Required Permissions
None None
## Child Components ## Child Components
A **\<tabs>** can wrap at most one **<[tab-bar](js-components-container-tab-bar.md)>** and at most one **<[tab-content](js-components-container-tab-content.md)>**. Only [\<tab-bar>](../arkui-js/js-components-container-tab-bar.md) and [\<tab-content>](../arkui-js/js-components-container-tab-content.md) are supported.
## Attributes ## Attributes
In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported. In addition to the [universal attributes](../arkui-js/js-components-common-attributes.md), the following attributes are supported.
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | ----- | ---- | ---------------------------------------- |
| index | number | 0 | No | Index of the active tab. |
| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally. |
| Name | Type | Default Value | Mandatory | Description |
| -------- | ------- | ------------- | --------- | ------------------------------------------------------------ |
| index | number | 0 | No | Index of the active tab. |
| vertical | boolean | false | No | Whether the tab is vertical. Available values are as follows:<br>- **false**: The **\<tab-bar>** and **\<tab-content>** are arranged vertically.<br>- **true**: The **\<tab-bar>** and **\<tab-content>** are arranged horizontally. |
## Styles ## Styles
Styles in [Universal Styles](js-components-common-styles.md) are supported. The [universal styles](../arkui-js/js-components-common-styles.md) are supported.
## Events
In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported. ## Events
In addition to the [universal events](../arkui-js/js-components-common-events.md), the following events are supported.
| Name | Parameter | Description |
| ------ | ------------------------------------ | ----------------------------- |
| change | { index: indexValue } | Triggered upon tab switching. This event is not triggered when the **index** value is dynamically changed.|
| Name | Parameter | Description |
| ------ | --------------------- | ------------------------------------------------------------ |
| change | { index: indexValue } | Triggered upon tab switching.NOTE:This event is not triggered when the **index** value is dynamically changed. |
## Example ## Example
``` ```html
<!-- xxx.hml --> <!-- xxx.hml -->
<div class="container"> <div class="container">
<tabs class = "tabs" index="0" vertical="false" onchange="change"> <tabs class = "tabs" index="0" vertical="false" onchange="change">
...@@ -59,6 +63,9 @@ In addition to the events in [Universal Events](js-components-common-events.md), ...@@ -59,6 +63,9 @@ In addition to the events in [Universal Events](js-components-common-events.md),
</tab-content> </tab-content>
</tabs> </tabs>
</div> </div>
```
```css
/* xxx.css */ /* xxx.css */
.container { .container {
flex-direction: column; flex-direction: column;
...@@ -90,6 +97,9 @@ In addition to the events in [Universal Events](js-components-common-events.md), ...@@ -90,6 +97,9 @@ In addition to the events in [Universal Events](js-components-common-events.md),
width: 300px; width: 300px;
text-align: center; text-align: center;
} }
```
```js
// xxx.js // xxx.js
export default { export default {
change: function(e) { change: function(e) {
...@@ -98,4 +108,4 @@ export default { ...@@ -98,4 +108,4 @@ export default {
} }
``` ```
![img](figures/tab.gif) ![tab](figures/tab.gif)
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-container-alphabet-indexer.md
浏览文件 @ cf68ab51
# AlphabetIndexer # AlphabetIndexer
The **\<Indexer>** component provides an alphabetic index bar. The **\<Indexer>** component can create a logically indexed array of items in a container for instant location.
> **NOTE** > **NOTE**
> >
...@@ -20,28 +20,29 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number}) ...@@ -20,28 +20,29 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
| Name| Type| Mandatory| Description| | Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- | | -------- | -------- | -------- | -------- |
| arrayValue | Array&lt;string&gt; | Yes| Array of strings to be displayed in the alphabetic index bar.| | arrayValue | Array&lt;string&gt; | Yes| Array of strings to be displayed in the alphabetic index bar. The value cannot be null.|
| selected | number | Yes | Index of the initially selected item. | | selected | number | Yes | Index of the initially selected item. If the value exceeds the value range, the default value 0 is used. |
## Attributes ## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description | | Name | Type | Description |
| ----------------------- | --------------- | ----------------------------------------------------------- | | ----------------------- | --------------- | ----------------------------------------------------------- |
| color | [ResourceColor](ts-types.md#resourcecolor8) | Font color. | | color | [ResourceColor](ts-types.md#resourcecolor8) | Font color.<br>Default value: **0x99000000** |
| selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the selected text. | | selectedColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the selected text.<br>Default value: **0xFF254FF7** |
| popupColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the pop-up text. | | popupColor | [ResourceColor](ts-types.md#resourcecolor8) | Font color of the pop-up text.<br>Default value: **0xFF254FF7** |
| selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected item. | | selectedBackgroundColor | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the selected item.<br>Default value: **0x1F0A59F7** |
| popupBackground | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the pop-up text. | | popupBackground | [ResourceColor](ts-types.md#resourcecolor8) | Background color of the pop-up text.<br>Default value: **0xFFF1F3F5** |
| usingPopup | boolean | Whether to use pop-up text. | | usingPopup | boolean | Whether to use pop-up text.<br>Default value: **false** |
| selectedFont | [Font](ts-types.md#font) | Font style of the selected text. | | selectedFont | [Font](ts-types.md#font) | Font style of the selected text.<br>Default value:<br>{<br>fontSize:10,<br> fontStyle:FontStyle.Normal,<br> fontWeight:FontWeight.Normal,<br> fontFamily:HarmonyOS Sans<br>} |
| popupFont | [Font](ts-types.md#font) | Font style of the pop-up text. | | popupFont | [Font](ts-types.md#font) | Font style of the pop-up text.<br>Default value:<br>{<br>fontSize:10,<br> fontStyle:FontStyle.Normal,<br> fontWeight:FontWeight.Normal,<br> fontFamily:HarmonyOS Sans<br>} |
| font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar. | | font | [Font](ts-types.md#font) | Default font style of the alphabetic index bar.<br>Default value:<br>{<br>fontSize:10,<br> fontStyle:FontStyle.Normal,<br> fontWeight:FontWeight.Normal,<br> fontFamily:HarmonyOS Sans<br>} |
| itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. | | itemSize | string \| number | Size of an item in the alphabetic index bar. The item is a square, and the side length needs to be set. This attribute cannot be set to a percentage.<br>Default value: **24.0** |
| alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported.<br>Default value: **IndexerAlign.Right**| | alignStyle | IndexerAlign | Alignment style of the alphabetic index bar. Left alignment and right alignment are supported.<br>Default value: **IndexerAlign.Right**|
| selected | number | Index of the selected item.| | selected | number | Index of the selected item.<br>Default value: **0**|
| popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.| | popupPosition | [Position](ts-types.md#position8) | Position of the pop-up window relative to the center of the indexer bar's top border.<br>Default value: **{x:96.0, y:48.0}**|
## IndexerAlign enums ## IndexerAlign
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
...@@ -50,6 +51,7 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number}) ...@@ -50,6 +51,7 @@ AlphabetIndexer(value: {arrayValue: Array&lt;string&gt;, selected: number})
## Events ## Events
Only the following events are supported.
| Name| Description| | Name| Description|
| -------- | -------- | | -------- | -------- |
| onSelected(callback: (index: number) =&gt; void)<sup>(deprecated)</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. | | onSelected(callback: (index: number) =&gt; void)<sup>(deprecated)</sup> | Invoked when an item in the alphabetic indexer bar is selected. The return value is the index of the selected item. |
......
en/application-dev/reference/arkui-ts/ts-methods-menu.md
浏览文件 @ cf68ab51
# Menu # Menu
> **NOTE** The menu bound to a component through [bindContextMenu](./ts-universal-attributes-menu.md#attributes) on a page can be closed as needed.
> **NOTE**
> >
> This method is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. > The APIs of this module are supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
## ContextMenu.close ## ContextMenu.close
close(): void close(): void
Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#atrributes) on a page. Closes the menu bound to this component through [bindContextMenu](./ts-universal-attributes-menu.md#attributes) on a page.
## Example ## Example
...@@ -17,26 +20,38 @@ Closes the menu bound to this component through [bindContextMenu](./ts-universal ...@@ -17,26 +20,38 @@ Closes the menu bound to this component through [bindContextMenu](./ts-universal
@Entry @Entry
@Component @Component
struct Index { struct Index {
@Builder MenuBuilder(){ @Builder MenuBuilder() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text('close') Button('Test ContextMenu1')
.fontSize(30) Divider().strokeWidth(2).margin(5)
.fontWeight(FontWeight.Bold) Button('Test ContextMenu2')
.onClick(() => { Divider().strokeWidth(2).margin(5)
ContextMenu.close(); Button('Test ContextMenu3')
}) }
}.height(400) .width(200)
.backgroundColor(Color.Pink) .height(160)
} }
build() { build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Column(){ Column() {
Text("Text") Text("Test ContextMenu")
}.bindContextMenu(this.MenuBuilder, ResponseType.LongPress) .fontSize(20)
.width('100%')
.height(500)
.backgroundColor(0xAFEEEE)
.textAlign(TextAlign.Center)
}
.bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
.onDragStart(()=>{
// Close the menu when the component is dragged.
ContextMenu.close()
})
} }
.width('100%') .width('100%')
.height('100%') .height('100%')
} }
} }
``` ```
![contextmenu_close.gif](figures/contextmenu_close.gif)
en/application-dev/reference/arkui-ts/ts-universal-attributes-overlay.md
浏览文件 @ cf68ab51
...@@ -8,10 +8,9 @@ You can set overlay text for a component. ...@@ -8,10 +8,9 @@ You can set overlay text for a component.
## Attributes ## Attributes
| Name | Type | Description | | Name| Type| Default Value| Description|
| ------- | ----------------------------- | ------------------------- | | -------- | -------- | -------- | -------- |
| overlay | value: string,<br/>options?: {<br/>align?: [Alignment](ts-appendix-enums.md#alignment), <br/>offset?: {x?: number, y?: number}<br/>} | Overlay added to the component. The overlay has the same layout as the component.<br>Default value:<br>{<br>align: Alignment.Center,<br>offset: {0, 0}<br>} | | overlay | value: string,<br>options?: {<br>align?: [Alignment](ts-appendix-enums.md#alignment), <br>offset?: {x?: number, y?: number}<br>} | {<br>align: Alignment.Center,<br>offset: {0, 0}<br>} | Overlay added to the component.<br> **value**: mask text.<br>**options**: text positioning. **align** indicates the location of the text relative to the component. **[offset](ts-universal-attributes-location.md)** indicates the offset of the text relative to the upper left corner of itself. By default, the text is in the upper left corner of the component.<br>If both **align** and **offset** are set, the text is first positioned relative to the component, and then offset relative to the upper left corner of itself.|
## Example ## Example
...@@ -28,7 +27,10 @@ struct OverlayExample { ...@@ -28,7 +27,10 @@ struct OverlayExample {
Column() { Column() {
Image($r('app.media.img')) Image($r('app.media.img'))
.width(240).height(240) .width(240).height(240)
.overlay("Winter is a beautiful season, especially when it snows.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } }) .overlay("Winter is a beautiful season, especially when it snows.", {
align: Alignment.Bottom,
offset: { x: 0, y: -15 }
})
}.border({ color: Color.Black, width: 2 }) }.border({ color: Color.Black, width: 2 })
}.width('100%') }.width('100%')
}.padding({ top: 20 }) }.padding({ top: 20 })
......
en/application-dev/ui/ui-js-building-ui-routes.md
浏览文件 @ cf68ab51
# Defining Page Routes # Defining Page Routes
An application generally consists of more than one page. For example, a music application may come with a music list page and a playback page. You need to link these pages through the page router to implement redirection as required. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song.
An application generally consist of more than one page. For example, in a music application, a user taps a song on a music list page to jump to the playback page of the song. You need to link these pages through the page router to implement redirection as required.
The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages: The page router finds the target page based on the page URI. The following describes how to implement redirection between two pages:
1. In the **Project** window of DevEco Studio, choose **entry** > **src** > **mainjsdefault**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the detail page. 1. In the **Project** window of DevEco Studio, choose **src** > **main** > **js** > **MainAbility**. Right-click the **pages** folder and choose **NewJS Page** from the shortcut menu to create the **detail** page.
2. Call **router.push()** to navigate users to the detail page. 2. Call **router.push()** to navigate users to the **detail** page.
3. Call **router.back()** to navigate users to the index page. 3. Call **router.back()** to navigate users to the **index** page.
## Building the Page Layout ## Building the Page Layout
The index and detail pages each contains a &lt;text> component that specifies the current page, and a **\<button>** component that implements the switching between two pages. Example code in .hml files is as follows: The **index** and **detail** pages each contains a **\<text>** component that specifies the current page, and a **\<button>** component that implements the switching between two pages. Example code in **.hml** files is as follows:
``` ```html
<!-- index.hml --> <!-- index.hml -->
<div class="container"> <div class="container">
<text class="title">This is the index page.</text> <text class="title">This is the index page.</text>
...@@ -27,8 +25,7 @@ The index and detail pages each contains a &lt;text> component that specifies th ...@@ -27,8 +25,7 @@ The index and detail pages each contains a &lt;text> component that specifies th
</div> </div>
``` ```
```html
```
<!-- detail.hml --> <!-- detail.hml -->
<div class="container"> <div class="container">
<text class="title">This is the detail page.</text> <text class="title">This is the detail page.</text>
...@@ -39,13 +36,14 @@ The index and detail pages each contains a &lt;text> component that specifies th ...@@ -39,13 +36,14 @@ The index and detail pages each contains a &lt;text> component that specifies th
## Setting Page Styles ## Setting Page Styles
Set styles for the index and detail pages. Center the **\<text>** and **\<button>** components and space the two components with 50 pixels. The CSS code for the two pages is as follows: Set styles for the **index** and **detail** pages. Center the **\<text>** and **\<button>** components and space the two components with 50 pixels. The CSS code for the two pages is as follows:
``` ```css
/* index.css */ /* index.css */
/* detail.css */ /* detail.css */
.container { .container {
width: 100%;
height: 100%;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -60,25 +58,23 @@ Set styles for the index and detail pages. Center the **\<text>** and **\<button ...@@ -60,25 +58,23 @@ Set styles for the index and detail pages. Center the **\<text>** and **\<button
## Implementing Redirection ## Implementing Redirection
To make the launch method of the **\<button>** component take effect, the redirection logic needs to be implemented in the .js file of the page. Call router.push() to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the router module before calling the router method. The sample code is as follows: To make the **launch** method of the **\<button>** component take effect, the redirection logic needs to be implemented in the **.js** file of the page. Call **router.push()** to add the page URI to the route stack, that is, to jump to the page specified by the URI. You need to import the **router** module before calling the **router** method. The sample code is as follows:
```js
```
// index.js // index.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
launch() { launch() {
router.push ({ router.push ({
uri: 'pages/detail/detail', url: 'pages/detail/detail',
}); });
}, },
} }
``` ```
```js
```
// detail.js // detail.js
import router from '@system.router'; import router from '@ohos.router';
export default { export default {
launch() { launch() {
router.back(); router.back();
...@@ -88,10 +84,4 @@ export default { ...@@ -88,10 +84,4 @@ export default {
The figure below shows the effect. The figure below shows the effect.
![en-us_image_0000001222967784](figures/en-us_image_0000001222967784.png) ![en-us_image_0000001222967784](figures/en-us_image_0000001222967784.png)
## Samples
The following sample is provided to help you better understand how to develop page routing:
[`JsRouter`: Page Routing (JavaScript, API 8)](https://gitee.com/openharmony/app_samples/tree/master/UI/JsRouter)
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或