Skip to content

D
Docs

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

通知 159
Star 292
Fork 28
D
Docs

体验新版 GitCode，发现更多精彩内容 >>

提交 3fd5e73b 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (14746) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 2b850ab5
隐藏空白更改
内联 并排
Showing with 76 addition and 69 deletion
en/application-dev/reference/arkui-js/js-components-common-events.md
浏览文件 @ 3fd5e73b
......@@ -99,6 +99,8 @@ Different from private events, universal events can be bound to most components.
When a component triggers an event, the event callback receives an event object by default. You can obtain the corresponding information through the event object.
| Attribute | Type | Description |
| -------------------- | ------ | ---------------------------------------- |
| dataSet<sup>6+</sup> | Object | Custom attribute set defined through [data-*](../arkui-js/js-components-common-attributes.md).|
......@@ -241,32 +243,38 @@ Sets a custom drag image.
**Example**
```js
createPixelMap() {
let color = new ArrayBuffer(4*96*96);
var buffer = new Uint8Array(color);
for (var i = 0; i < buffer.length; i++) {
buffer[i] = (i + 1) % 255;
}
let opts = {
alphaType:0,
editable:true,
pixelFormat:4,
scaleMode:1,
size:{height:96,width:96}
}
const promise = image.createPixelMap(color,opts);
promise.then((data)=> {
console.error('-create pixmap has info message:' + JSON.stringify(data));
this.pixelMap = data;
this.pixelMapReader = data;
})
},
import image from '@ohos.multimedia.image';
onInit() {
this.createPixelMap
},
dragStart(e) {
e.dataTransfer.setDragImage(this.pixelMapReader, 50, 50);
export default {
createPixelMap() {
let color = new ArrayBuffer(4 * 96 * 96);
var buffer = new Uint8Array(color);
for (var i = 0; i < buffer.length; i++) {
buffer[i] = (i + 1) % 255;
}
let opts = {
alphaType: 0,
editable: true,
pixelFormat: 4,
scaleMode: 1,
size: {
height: 96, width: 96
}
}
const promise = image.createPixelMap(color, opts);
promise.then((data) => {
console.error('-create pixmap has info message:' + JSON.stringify(data));
this.pixelMap = data;
this.pixelMapReader = data;
})
},
onInit() {
this.createPixelMap
},
dragStart(e) {
e.dataTransfer.setDragImage(this.pixelMapReader, 50, 50);
}
}
```
en/application-dev/reference/arkui-ts/ts-container-column.md
浏览文件 @ 3fd5e73b
......@@ -29,7 +29,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description|
| -------- | -------- | -------- |
| alignItems | [HorizontalAlign](ts-appendix-enums.md#horizontalalign) | Alignment mode of the child components in the horizontal direction.<br>Default value: **HorizontalAlign.Center**|
| justifyContent<sup>8+</sup> | [FlexAlign](ts-container-flex.md) | Alignment mode of the child components in the vertical direction.<br>Default value: **FlexAlign.Start**|
| justifyContent<sup>8+</sup> | [FlexAlign](ts-appendix-enums.md#flexalign) | Alignment mode of the child components in the vertical direction.<br>Default value: **FlexAlign.Start**|
## Example
......
en/application-dev/reference/arkui-ts/ts-media-components-video.md
浏览文件 @ 3fd5e73b
......@@ -48,7 +48,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| muted | boolean | Whether to mute the video.<br>Default value: **false** |
| autoPlay | boolean | Whether to enable auto play.<br>Default value: **false** |
| controls | boolean | Whether to display the video playback control bar.<br>Default value: **true**|
| objectFit | [ImageFit](ts-basic-components-image.md) | Video scale type.<br>Default value: **Cover** |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Video scale type.<br>Default value: **Cover** |
| loop | boolean | Whether to repeat the video.<br>Default value: **false** |
## Events
......@@ -243,5 +243,3 @@ struct VideoCreateComponent {
}
}
```
<!--no_check-->
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md
浏览文件 @ 3fd5e73b
......@@ -23,7 +23,7 @@ Defines and shows the action sheet.
| autoCancel | boolean | No | Whether to close the dialog box when the overlay is clicked.<br>Default value: **true**|
| confirm | {<br>value: [ResourceStr](ts-types.md#resourcestr),<br>action: () =&gt; void<br>} | No | Text content of the confirm button and callback upon button clicking.<br>Default value:<br>**value**: button text.<br>**action**: callback upon button clicking.|
| cancel | () =&gt; void | No | Callback invoked when the dialog box is closed after the overlay is clicked. |
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Bottom**|
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Bottom**|
| offset | {<br>dx: Length,<br>dy: Length<br>} | No | Offset of the dialog box relative to the alignment position.<br>Default value: {<br>dx: 0,<br>dy: 0<br>} |
| sheets | Array&lt;SheetInfo&gt; | Yes | Options in the dialog box. Each option supports the image, text, and callback.|
......
en/application-dev/reference/arkui-ts/ts-state-management.md
浏览文件 @ 3fd5e73b
# State Management with Application-level Variables
The state management module provides APIs for data storage, persistent data management, Ability data storage, and environment status required by applications. The APIs for Ability data storage are supported since API version 9.
The state management module provides APIs for data storage, persistent data management, **Ability** data storage, and environment status required by applications.
> **NOTE**
>
......@@ -77,7 +77,7 @@ let simple = AppStorage.Prop('simpleProp')
### SetAndProp
SetAndProp\<S>(propName: string, defaultValue: S): SubscribedAbstractProperty\<S>;
SetAndProp\<S>(propName: string, defaultValue: S): SubscribedAbstractProperty\<S>
Works in a way similar to the **Prop** API. If the current key is stored in the **AppStorage**, the value corresponding to the key is returned. If the key has not been created, a **Prop** instance corresponding to the default value is created and returned.
......@@ -162,7 +162,7 @@ Replaces the value of a saved key.
| boolean | Returns **true** and the value if the key exists; returns **false** otherwise.|
```ts
let simple = AppStorage.Set('simpleProp', 121);
let simple = AppStorage.Set('simpleProp', 121)
```
### SetOrCreate
......@@ -313,7 +313,7 @@ Creates and initializes a **LocalStorage** object.
| initializingProperties | Object | No | All object attributes and their values returned by **object.keys(obj)**.|
```ts
this.storage = new LocalStorage()
let storage = new LocalStorage()
```
### GetShared<sup>9+</sup>
......@@ -353,8 +353,8 @@ Checks whether the **LocalStorage** contains the specified attribute.
| boolean | Returns whether the attribute exists.|
```ts
this.storage = new LocalStorage()
this.storage.has('storageSimpleProp')
let storage = new LocalStorage()
storage.has('storageSimpleProp')
```
### get<sup>9+</sup>
......@@ -376,8 +376,8 @@ Obtains the value of the specified key.
| T \| undefined | Returns the value of the specified key if it exists; returns **undefined** otherwise.|
```ts
this.storage = new LocalStorage()
let simpleValue = this.storage.get('storageSimpleProp')
let storage = new LocalStorage()
let simpleValue = storage.get('storageSimpleProp')
```
### set<sup>9+</sup>
......@@ -400,8 +400,8 @@ Sets a new value for the specified key.
| boolean | Returns **true** and the value if the key exists; returns **false** otherwise.|
```ts
this.storage = new LocalStorage()
this.storage.set('storageSimpleProp', 121)
let storage = new LocalStorage()
storage.set('storageSimpleProp', 121)
```
### setOrCreate<sup>9+</sup>
......@@ -424,8 +424,8 @@ Creates or updates the value of the specified key.
| boolean | Updates the value of the attribute and returns **true** if an attribute that has the same name as the specified key exists; creates an attribute with the specified value as its default value and returns false otherwise. **undefined** and **null** are not allowed.|
```ts
this.storage = new LocalStorage()
this.storage.setOrCreate('storageSimpleProp', 121)
let storage = new LocalStorage()
storage.setOrCreate('storageSimpleProp', 121)
```
### link<sup>9+</sup>
......@@ -447,8 +447,8 @@ Establishes two-way data binding between an attribute and this **LocalStorage**
| T | Returns two-way binding to this attribute if there is data with a given key. This means that attribute changes made by a variable or component will be synchronized to the **LocalStorage**, and attribute changes made through the **LocalStorage** will be synchronized to the variable or component. returns **undefined** if the attribute with the given key does not exist.|
```ts
this.storage = new LocalStorage()
let localStorage = this.storage.link('storageSimpleProp')
let storage = new LocalStorage()
let localStorage = storage.link('storageSimpleProp')
```
### setAndLink<sup>9+</sup>
......@@ -471,8 +471,8 @@ Works in a way similar to the **Link** API.
| @Link | Returns the value corresponding to the key if the current key is stored in the **LocalStorage**; creates and returns a **Link** instance corresponding to the default value if the key has not been created.|
```ts
this.storage = new LocalStorage()
let localStorage = this.storage.setAndLink('storageSimpleProp', 121)
let storage = new LocalStorage()
let localStorage = storage.setAndLink('storageSimpleProp', 121)
```
### prop<sup>9+</sup>
......@@ -494,8 +494,8 @@ Establishes one-way data binding with an attribute to update its status.
| @Prop | Returns one-way binding to an attribute with a given key if the attribute exists; returns **undefined** otherwise. One-way binding means that attribute changes made through the **LocalStorage** will be synchronized to the variable or component, but attribute changes made by the variable or component will not be synchronized to the **LocalStorage**. This API returns immutable variables and is applicable to mutable and immutable state variables alike. |
```ts
this.storage = new LocalStorage()
let localStorage = this.storage.prop('storageSimpleProp')
let storage = new LocalStorage()
let localStorage = storage.prop('storageSimpleProp')
```
### setAndProp<sup>9+</sup>
......@@ -518,8 +518,8 @@ Works in a way similar to the **Prop** API.
| @Prop | Returns the value corresponding to the given key if the key is stored in the **LocalStorage**; creates and returns a **Prop** instance corresponding to the default value if the key has not been created.|
```ts
this.storage = new LocalStorage()
let localStorage = this.storage.setAndProp('storageSimpleProp', 121)
let storage = new LocalStorage()
let localStorage = storage.setAndProp('storageSimpleProp', 121)
```
### delete<sup>9+</sup>
......@@ -538,11 +538,11 @@ Deletes the key-value pair that matches the specified key.
| Type | Description |
| ------- | ---------------------------------------- |
| boolean | Returns **true** if the key-value pair exists and is successfully deleted; returns **false** if the key-value pair does not exist, fails to be deleted, or is being referenced by a state variable.|
| boolean | Returns **true** if the key-value pair exists and is successfully deleted; returns **false** otherwise.|
```ts
this.storage = new LocalStorage()
this.storage.delete('storageSimpleProp')
let storage = new LocalStorage()
storage.delete('storageSimpleProp')
```
### keys<sup>9+</sup>
......@@ -558,8 +558,8 @@ Searches for all keys.
| array\<string> | Returns an array of strings containing all keys that are not serializable.|
```ts
this.storage = new LocalStorage()
let simple = this.storage.keys()
let storage = new LocalStorage()
let simple = storage.keys()
```
### size<sup>9+</sup>
......@@ -575,8 +575,8 @@ Obtains the number of existing key-value pairs.
| number | Returns the number of key-value pairs.|
```ts
this.storage = new LocalStorage()
let simple = this.storage.size()
let storage = new LocalStorage()
let simple = storage.size()
```
### Clear<sup>9+</sup>
......@@ -592,8 +592,8 @@ Deletes all attributes.
| boolean | Returns **true** if all attributes are deleted; returns **false** if any of the attributes is being referenced by a state variable.|
```ts
this.storage = new LocalStorage()
let simple = this.storage.clear()
let storage = new LocalStorage()
let simple = storage.clear()
```
## PersistentStorage
......@@ -612,7 +612,7 @@ Creates a **persistentstorage** object.
| storage | Storage | Yes | **Storage** object. |
```ts
this.persistentstorage = new PersistentStorage(AppStorage,Storage)
let persistentstorage = new PersistentStorage(AppStorage,Storage)
```
### PersistProp
......@@ -650,7 +650,7 @@ PersistentStorage.DeleteProp('highScore')
### PersistProps
PersistProps(properties: {key: string, defaultValue: any}[]): void;
PersistProps(properties: {key: string, defaultValue: any}[]): void
Changes the attributes that match the specified keys to persistent data in the **AppStorage**.
......
en/application-dev/ui/ui-js-animate-background-position-style.md
浏览文件 @ 3fd5e73b
......@@ -27,6 +27,7 @@ By changing the **background-position** attribute (where the first value is the
.content{
width: 400px;
height: 400px;
/* The aspect ratio 1:1 is not recommended. */
background-image: url('common/images/bg-tv.jpg');
background-size: 100%;
background-repeat: no-repeat;
......
en/application-dev/ui/ui-js-components-canvasrenderingcontext2d.md
浏览文件 @ 3fd5e73b
......@@ -228,6 +228,8 @@ Globally define the canvas (**el**) and brush (**ctx**), and create a rectangle
```css
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-content: center;
align-items: center;
......@@ -251,7 +253,6 @@ select{
```js
// xxx.js
import prompt from '@system.prompt';
export default {
data:{
el: null,
......@@ -596,7 +597,6 @@ After creating an image object, use the **drawImage** attribute to draw the imag
/* xxx.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
align-items: center;
......
en/application-dev/ui/ui-ts-layout-flex.md
浏览文件 @ 3fd5e73b
......@@ -356,7 +356,7 @@ Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // The it
}.width('90%').height(220).backgroundColor(0xAFEEEE)
```
![](figures/alignself.png)
![alignself](figures/alignself.png)
In the preceding example, both **alignItems** of the **\<Flex>** component and the **alignSelf** attribute of the child component are set. In this case, the **alignSelf** settings take effect.
......@@ -452,7 +452,7 @@ Use the **alignContent** parameter to set how space is distributed between and a
- **FlexAlign.SpaceEvenly**: The items are evenly distributed in the container along the cross axis. The spacing between each two adjacent items, the spacing between the start edge and the first item, and the spacing between the end edge and the last item, are the same.
```ts
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceAround }) {
Flex({ justifyContent: FlexAlign.SpaceBetween, wrap: FlexWrap.Wrap, alignContent: FlexAlign.SpaceEvenly }) {
Text('1').width('30%').height(20).backgroundColor(0xF5DEB3)
Text('2').width('60%').height(20).backgroundColor(0xD2B48C)
Text('3').width('40%').height(20).backgroundColor(0xD2B48C)
......@@ -496,7 +496,7 @@ When the size of the container in the flex layout is not large enough, the follo
}.width('90%').height(120).padding(10).backgroundColor(0xAFEEEE)
```
![](figures/flexbasis.png)
![flexbasis](figures/flexbasis.png)
- **flexGrow**: percentage of the flex layout's remaining space that is allocated to the child component. In other words, it is the grow factor of the child component.
......@@ -521,7 +521,7 @@ When the size of the container in the flex layout is not large enough, the follo
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
```
![](figures/flexgrow.png)
![flexgrow](figures/flexgrow.png)
In the preceding figure, the width of the parent container is 400 vp, the original width of the three child components is 100 vp, which adds up to the total width of 300 vp. The remaining space 100 vp is allocated to the child components based on their **flexGrow** settings. Child components that do not have **flexGrow** set are not involved in the allocation of remaining space.
The first child component and the second child component receive their share of remaining space at the 2:3 ratio. The width of the first child component is 100 vp + 100 vp x 2/5 = 140 vp, and the width of the second child component is 100 vp + 100 vp x 3/5 = 160 vp.
......@@ -549,7 +549,7 @@ The first child component and the second child component receive their share of
}.width(400).height(120).padding(10).backgroundColor(0xAFEEEE)
```
![](figures/flexshrink.png)
![flexshrink](figures/flexshrink.png)
## Example Scenario
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或