Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
提交 7d48e48c 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (17455) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 0180927f
隐藏空白更改
内联 并排
Showing with 619 addition and 416 deletion
en/application-dev/reference/arkui-js/js-components-basic-picker-view.md
浏览文件 @ 7d48e48c
# picker-view
> **NOTE**
>
> 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.
......@@ -121,228 +120,232 @@ Not supported
## Example
1. Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected value: {{value}} Selected index: {{index}}
</text>
<picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
options: ['Option 1','Option 2','Option 3'],
value: "Option 1",
index: 0
},
handleChange(data) {
this.value = data.newValue;
this.index = data.newSelected;
},
}
```
![picker-view0](figures/picker-view0.gif)
2. Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
```
![picker-view1](figures/picker-view1.gif)
3. Date Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{date}}
</text>
<picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
date: "",
},
handleChange(data) {
this.date = data.year + "/" + data.month + "/" + data.day + "";
},
}
```
![picker-view2](figures/picker-view2.gif)
4. Date and Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{datetime}}
</text>
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
datetime: "",
},
handleChange(data) {
this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + "";
},
}
```
![picker-view3](figures/picker-view3.gif)
5. Multi-Column Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{ value }}
</text>
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
multitext: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
],
value: ""
},
handleChange(data) {
this.value = "Selected: " + data.column + "," + "value: " + data.newValue + ", index:" + data.newSelected;
},
}
```
![picker-view4](figures/picker-view4.gif)
### Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected value: {{value}} Selected index: {{index}}
</text>
<picker-view class="text-picker" type="text" range="{{options}}" selected="0" indicatorprefix="prefix" indicatorsuffix="suffix" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 30px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
options: ['Option 1','Option 2','Option 3'],
value: "Option 1",
index: 0
},
handleChange(data) {
this.value = data.newValue;
this.index = data.newSelected;
},
}
```
![picker-view0](figures/picker-view0.gif)
### Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{time}}
</text>
<picker-view class="time-picker" type="time" selected="{{defaultTime}}" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
defaultTime: "",
time: "",
},
onInit() {
this.defaultTime = this.now();
},
handleChange(data) {
this.time = this.concat(data.hour, data.minute);
},
now() {
const date = new Date();
const hours = date.getHours();
const minutes = date.getMinutes();
return this.concat(hours, minutes);
},
fill(value) {
return (value > 9 ? "" : "0") + value;
},
concat(hours, minutes) {
return `${this.fill(hours)}:${this.fill(minutes)}`;
},
}
```
![picker-view1](figures/picker-view1.gif)
### Date Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{date}}
</text>
<picker-view class="time-picker" type="date" selected="{{defaultTime}}" @change="handleChange" lunarswitch="true"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
date: "",
},
handleChange(data) {
this.date = data.year + "/" + data.month + "/" + data.day + "";
},
}
```
![picker-view2](figures/picker-view2.gif)
### Date and Time Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{datetime}}
</text>
<picker-view class="date-picker" type="datetime" hours="24" lunarswitch="true" @change="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
datetime: "",
},
handleChange(data) {
this.datetime = data.year + "/" + data.month + "/" + data.day + "" + data.hour + ":" + data.minute + "";
},
}
```
![picker-view3](figures/picker-view3.gif)
### Multi-Column Text Selector
```html
<!-- xxx.hml -->
<div class="container">
<text class="title">
Selected: {{ value }}
</text>
<picker-view class="multitype-picker" type="multi-text" columns="3" range="{{ multitext }}" @columnchange="handleChange"></picker-view>
</div>
```
```css
/* xxx.css */
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 50%;
}
.title {
font-size: 31px;
text-align: center;
margin-top: 50%;
}
```
```js
/* xxx.js */
export default {
data: {
multitext: [
[1, 2, 3],
[4, 5, 6],
[7, 8, 9],
],
value: ""
},
handleChange(data) {
this.value = "Column: " + data.column + "," + "Value: " + data.newValue + ", Index:" + data.newSelected;
},
}
```
![picker-view4](figures/picker-view4.gif)
en/application-dev/reference/arkui-js/js-components-basic-text.md
浏览文件 @ 7d48e48c
......@@ -137,4 +137,4 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
```
![en-us_image_0000001167823076](figures/text.png)
![en-us_image_0000001167823076](figures/js-text.png)
en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
浏览文件 @ 7d48e48c
......@@ -43,7 +43,7 @@
- Anti-aliasing enabled
![screenshot-8](figures/screenshot-8.png)
![en-us_image_0000001127125162](figures/en-us_image_0000001127125162.png)
## Attributes
......@@ -558,7 +558,7 @@ export default {
}
```
![smoothoff](figures/smoothoff.png)
![en-us_image_0000001167952236](figures/en-us_image_0000001167952236.png)
......@@ -863,10 +863,10 @@ Moves a drawing path to a target position on the canvas.
**Parameters**
| Name | Type | Description |
| ---- | ------ | --------- |
| x | number | X-coordinate of the target position.|
| y | number | Y-coordinate of the target position.|
| Name | Type | Description |
| ---- | ------ | ------------------ |
| x | number | X-coordinate of the target position.<br>Unit: vp|
| y | number | Y-coordinate of the target position.<br>Unit: vp|
**Example**
```html
......@@ -902,8 +902,8 @@ Connects the current point to a target position using a straight line.
| Name | Type | Description |
| ---- | ------ | --------- |
| x | number | X-coordinate of the target position.|
| y | number | Y-coordinate of the target position.|
| x | number | X-coordinate of the target position.<br>Unit: vp|
| y | number | Y-coordinate of the target position.<br>Unit: vp|
**Example**
```html
......@@ -1026,7 +1026,7 @@ Draws a cubic bezier curve on the canvas.
```html
<!-- xxx.hml -->
<div>
<canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
<canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
</div>
```
......@@ -1204,7 +1204,7 @@ Draws an ellipse in the specified rectangular region on the canvas.
}
```
![ellipse](figures/ellipse.png)
![en-us_image_0000001214823665](figures/en-us_image_0000001214823665.png)
### rect
......
en/application-dev/reference/arkui-js/js-components-container-list-item-group.md
浏览文件 @ 7d48e48c
......@@ -18,7 +18,7 @@ None
## Child Components
Only the **[\<list-item>](../arkui-js/js-components-container-list-item.md)** component is supported.
Only the [\<list-item>](../arkui-js/js-components-container-list-item.md) child component is supported.
## Attributes
......@@ -31,7 +31,7 @@ In addition to the [universal attributes](../arkui-js/js-components-common-attri
> **NOTE**
>
> **id** in the universal attributes is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group.
> The universal attribute **id** is used to identify a group. The input parameters of related functions and event information in the list also use **id** to uniquely identify a group.
## Styles
......@@ -126,48 +126,55 @@ The [universal methods](../arkui-js/js-components-common-methods.md) are support
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
data: {
direction: 'column',
list: [],
listAdd: []
},
onInit() {
this.list = []
this.listAdd = []
for (var i = 1; i <= 3; i++) {
var dataItem = {
value: 'GROUP' + i,
};
this.list.push(dataItem);
data: {
direction: 'column',
list: [],
listAdd: []
},
onInit() {
this.list = []
this.listAdd = []
for (var i = 1; i <= 3; i++) {
var dataItem = {
value: 'GROUP' + i,
};
this.list.push(dataItem);
}
},
collapseOne(e) {
this.$element('mylist').collapseGroup({
groupid: 'GROUP1'
})
},
expandOne(e) {
this.$element('mylist').expandGroup({
groupid: 'GROUP1'
})
},
collapseAll(e) {
this.$element('mylist').collapseGroup({
groupid: ''
})
},
expandAll(e) {
this.$element('mylist').expandGroup({
groupid: ''
})
},
collapse(e) {
promptAction.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
promptAction.showToast({
message: 'Open ' + e.groupid
})
}
},
collapseOne(e) {
this.$element('mylist').collapseGroup({
groupid: 'GROUP1'
})
},
expandOne(e) {
this.$element('mylist').expandGroup({
groupid: 'GROUP1'
})
},
collapseAll(e) {
this.$element('mylist').collapseGroup()
},
expandAll(e) {
this.$element('mylist').expandGroup()
},
collapse(e) {
promptAction.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
promptAction.showToast({
message: 'Open ' + e.groupid
})
}
}
```
![list6](figures/list6.gif)
en/application-dev/reference/arkui-ts/ts-combined-gestures.md
浏览文件 @ 7d48e48c
......@@ -2,9 +2,9 @@
Continuous recognition, parallel recognition, and exclusive recognition are supported for a group of gestures.
> **NOTE**
> **NOTE**
>
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
......@@ -12,24 +12,24 @@ GestureGroup(mode: GestureMode, ...gesture: GestureType[])
**Parameters**
| Name| Type| Mandatory| Default Value| Description|
| -------- | -------- | -------- | -------- | -------- |
| mode | [GestureMode](#gesturemode) | Yes| - | Recognition mode of combined gestures.|
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes| - | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
| Name | Type | Mandatory | Description |
| ------- | ---------------------------------------- | ---- | ------------------------------ |
| mode | [GestureMode](#gesturemode) | Yes | Recognition mode of combined gestures. |
| gesture | [TapGesture](ts-basic-gestures-tapgesture.md)<br>\| [LongPressGesture](ts-basic-gestures-longpressgesture.md)<br>\| [PanGesture](ts-basic-gestures-pangesture.md)<br>\| [PinchGesture](ts-basic-gestures-pinchgesture.md)<br>\| [RotationGesture](ts-basic-gestures-rotationgesture.md) | Yes | Variable-length parameter, indicating one or more basic gesture types. These gestures are recognized in combination.|
## GestureMode
| Name| Description|
| -------- | -------- |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other.|
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends.|
| Name | Description |
| --------- | ---------------------------------------- |
| Sequence | Sequential recognition: Gestures are recognized in the registration sequence until all gestures are recognized successfully. When one gesture fails to be recognized, all gestures fail to be recognized.|
| Parallel | Parallel recognition. Registered gestures are recognized concurrently until all gestures are recognized. The recognition result of each gesture does not affect each other. |
| Exclusive | Exclusive recognition. Registered gestures are identified concurrently. If one gesture is successfully recognized, gesture recognition ends. |
## Events
| Name| Description|
| -------- | -------- |
| Name | Description |
| ---------------------------------------- | ------------------------------------ |
| onCancel(event: () =&gt; void) | Callback for the GestureMode.Sequence cancellation event.|
......@@ -50,6 +50,7 @@ struct GestureGroupExample {
build() {
Column() {
Text('sequence gesture\n' + 'LongPress onAction:' + this.count + '\nPanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
.fontSize(15)
}
.translate({ x: this.offsetX, y: this.offsetY, z: 0 })
.height(150)
......
en/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md
浏览文件 @ 7d48e48c
......@@ -32,8 +32,7 @@ In addition to the [universal events](ts-universal-events-click.md), the followi
| Name | Parameter | Description |
| ----------------------------- | ---- | -------------------- |
| onReady(event: () => void) | - | Triggered when a canvas is ready. When this event is triggered, the width and height of the canvas can be obtained, and you can use the canvas APIs to draw images.<br>Since API version 9, this API is supported in ArkTS widgets.|
| onReady(event: () => void) | - | Triggered when a canvas is ready or its size changes. When this event is triggered, the canvas is cleared. The width and height of the canvas can then be obtained, and you can use the canvas APIs to draw images. If the canvas is merely relocated, the **onAreaChange** event is triggered, but the **onReady** event is not.<br>Since API version 9, this API is supported in ArkTS widgets.|
**Example**
......
en/application-dev/reference/arkui-ts/ts-container-grid.md
浏览文件 @ 7d48e48c
......@@ -48,7 +48,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| rowsTemplate | string | Number of rows in the current grid layout. If this attribute is not set, one row is used by default.<br>For example, **'1fr 1fr 2fr'** indicates three rows, with the first row taking up 1/4 of the parent component's full height, the second row 1/4, and the third row 2/4.<br>**NOTE**<br>If this attribute is set to **'0fr'**, the row width is 0, and grid item in the row is not displayed. If this attribute is set to any other invalid value, the grid item is displayed as one row.|
| columnsGap | [Length](ts-types.md#length) | Gap between columns.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| rowsGap | [Length](ts-types.md#length) | Gap between rows.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.|
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off** |
| scrollBar | [BarState](ts-appendix-enums.md#barstate) | Scrollbar status.<br>Default value: **BarState.Off**<br>**NOTE**<br>In API version 9 and earlier versions, the default value is **BarState.Off**. In API version 10, the default value is **BarState.Auto**.|
| scrollBarColor | string \| number \| [Color](ts-appendix-enums.md#color) | Color of the scrollbar.|
| scrollBarWidth | string \| number | Width of the scrollbar. After the width is set, the scrollbar is displayed with the set width in normal state and pressed state.<br>Default value: **4**<br>Unit: vp|
| cachedCount | number | Number of grid items to be preloaded (cached). It works only in [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md). For details, see [Minimizing White Blocks During Swiping](../../ui/arkts-performance-improvement-recommendation.md#minimizing-white-blocks-during-swiping).<br>Default value: **1**<br>**NOTE**<br>The number of the grid items to be cached before and after the currently displayed one equals the value of **cachedCount** multiplied by the number of columns.<br>Grid items that exceed the display and cache range are released.<br>A value less than 0 evaluates to the default value.|
......@@ -59,6 +59,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| cellLength<sup>8+</sup> | number | When **layoutDirection** is **Row** or **RowReverse**: fixed height per row.<br>When **layoutDirection** is **Column** or **ColumnReverse**: fixed width per column.<br>Default value: size of the first element|
| multiSelectable<sup>8+</sup> | boolean | Whether to enable mouse frame selection.<br>Default value: **false**<br>- **false**: The mouse frame selection is disabled.<br>- **true**: The mouse frame selection is enabled.|
| supportAnimation<sup>8+</sup> | boolean | Whether to enable animation. Currently, the grid item drag animation is supported.<br>Default value: **false**|
| edgeEffect<sup>10+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Scroll effect. The spring effect and shadow effect are supported.<br>Default value: **EdgeEffect.None**<br>|
Depending on the settings of the **rowsTemplate** and **columnsTemplate** attributes, the **\<Grid>** component supports the following layout modes:
......@@ -181,6 +182,7 @@ struct GridExample {
.columnsTemplate('1fr 1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.edgeEffect(EdgeEffect.Spring)
.onScrollIndex((first: number) => {
console.info(first.toString())
})
......
en/application-dev/reference/arkui-ts/ts-container-list.md
浏览文件 @ 7d48e48c
......@@ -118,7 +118,7 @@ Since API version 9, this API is supported in ArkTS widgets.
> **NOTE**
>
> To enable the editable mode for a list, the following conditions must be met:
> To enable the editable mode for a list, the following conditions must be met: (This feature is deprecated since API version 9.)
>
> - **editMode** is set to **true**.
>
......@@ -128,7 +128,7 @@ Since API version 9, this API is supported in ArkTS widgets.
>
> To enable dragging for a list item, the following conditions must be met:
>
> - **editMode** is set to **true**.
> - **editMode** is set to **true**. (This is not required since API version 9.)
>
> - The list item is bound to the **onDragStart** event and the event returns a floating UI during event callback.
......
en/application-dev/reference/arkui-ts/ts-container-panel.md
浏览文件 @ 7d48e48c
......@@ -11,6 +11,10 @@ The **<Panel\>** component is a slidable panel that presents lightweight content
Supported
> **NOTE**
>
> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
## APIs
......@@ -20,19 +24,20 @@ Panel(show: boolean)
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| show | boolean | Yes| Whether the panel is shown.|
| show | boolean | Yes| Whether the panel is shown.<br>**NOTE**<br>The panel is hidden and does not take up space in the layout if this parameter is set to **false** or [Visible.None](ts-universal-attributes-visibility.md) is set.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| type | [PanelType](#paneltype)| Type of the panel.<br>Default value: **PanelType.Foldable**|
| mode | [PanelMode](#panelmode) | Initial status of the panel.|
| mode | [PanelMode](#panelmode) | Initial status of the panel.<br>Default value for the Minibar type: **PanelMode.Mini**<br/>Default value for other types: **PanelMode.Half**<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables. |
| dragBar | boolean | Whether to enable a drag bar. The value **true** means that the drag bar will be displayed, and **false** means the opposite.<br>Default value: **true**|
| fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.|
| halfHeight | string \| number | Panel height in the **PanelMode.Half** mode. The default value is half of the screen height.|
| miniHeight | string \| number | Panel height in the **PanelMode.Mini** mode.|
| fullHeight | string \| number | Panel height in the **PanelMode.Full** mode.<br>Default value: main axis height of the panel minus 8 vp<br>**NOTE**<br>This attribute cannot be set in percentage.|
| halfHeight | string \| number | Panel height in the **PanelMode.Half** mode.<br>Default value: half of the main axis height of the panel<br>**NOTE**<br>This attribute cannot be set in percentage.|
| miniHeight | string \| number | Panel height in the **PanelMode.Mini** mode.<br>Default value: **48**<br>Unit: vp<br>**NOTE**<br>This attribute cannot be set in percentage.|
| show | boolean | Whether to show the panel.|
| backgroundMask<sup>9+</sup>|[ResourceColor](ts-types.md#resourcecolor)|Background mask of the panel.|
......@@ -52,9 +57,10 @@ Panel(show: boolean)
| Half | Displays a **foldable** or **temporary** panel in a medium-sized (halfscreen-like) area. This attribute does not take effect for **minibar** panels.|
| Full | Displays a panel in a large (fullscreen-like) area.|
## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description|
| -------- | -------- |
| onChange(event: (width: number, height: number, mode: PanelMode) =&gt; void) | Triggered when the status of the panel changes. The returned height value is the height of the content area. When the value of **dragBar** is **true**, the panel height is the sum of the drag bar height and content area height.|
......
en/application-dev/reference/arkui-ts/ts-container-refresh.md
浏览文件 @ 7d48e48c
......@@ -18,32 +18,36 @@ Refresh\(value: \{ refreshing: boolean, offset?: number | string , friction?: n
**Parameters**
| Name| Value Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| refreshing | boolean | Yes| Whether the current component is being refreshed.<br>This parameter supports [$$](../../quick-start/arkts-restrictions-and-extensions.md#two-way-binding-of-variables) for two-way binding of variables.|
| offset | string \| number | No| Distance from the pull-down starting point to the top of the component.<br>Default value: **16**, in vp<br>**NOTE**<br>The value cannot be a percentage or a negative number.|
| friction | number \| string | No| Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>Default value: **62**<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.|
| builder | [CustomBuilder](ts-types.md#custombuilder8)<sup>10+</sup> | No| Component with the custom refresh style set for the pull-down gesture.|
| Name | Value Type | Mandatory | Description |
| ---------- | ---------------------------------------- | ---- | ---------------------------------------- |
| refreshing | boolean | Yes | Whether the current component is being refreshed.<br>This parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| offset | string \| number | No | Distance from the pull-down starting point to the top of the component.<br>Default value: **16**, in vp<br>**NOTE**<br>The value cannot be a percentage or a negative number.|
| friction | number \| string | No | Coefficient of friction, which indicates the **<Refresh\>** component's sensitivity to the pull-down gesture. The value ranges from 0 to 100.<br>Default value: **62**<br>- **0** indicates that the **\<Refresh>** component is not sensitive to the pull-down gesture.<br>- **100** indicates that the **\<Refresh>** component is highly sensitive to the pull-down gesture.<br>- A larger value indicates a more sensitive response of the **\<Refresh>** component to the pull-down gesture.|
| builder | [CustomBuilder](ts-types.md#custombuilder8)<sup>10+</sup> | No | Component with the custom refresh style set for the pull-down gesture. |
## Attributes
The [universal attributes](ts-universal-attributes-size.md) are supported.
## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description|
| -------- | -------- |
| Name | Description |
| ---------------------------------------- | -------------------------------------- |
| onStateChange(callback: (state: [RefreshStatus](#refreshstatus)) => void)| Triggered when the refresh status changes.<br>- **state**: refresh status.|
| onRefreshing(callback: () => void)| Triggered when the component enters the refresh state.|
| onRefreshing(callback: () => void) | Triggered when the component enters the refresh state. |
## RefreshStatus
| Name| Description|
| -------- | -------- |
| Inactive | The component is not pulled down. This is the default value.|
| Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh.|
| OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh.|
| Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.|
| Done | The refresh is complete, and the component returns to the initial state (top).|
| Name | Description |
| -------- | -------------------- |
| Inactive | The component is not pulled down. This is the default value. |
| Drag | The component is being pulled down, but the pulled distance is shorter than the minimum length required to trigger the refresh. |
| OverDrag | The component is being pulled down, and the pulled distance exceeds the minimum length required to trigger the refresh. |
| Refresh | The pull-down ends, and the component rebounds to the minimum length required to trigger the refresh and enters the refresh state.|
| Done | The refresh is complete, and the component returns to the initial state (top). |
## Example
......
en/application-dev/reference/arkui-ts/ts-container-sidebarcontainer.md
浏览文件 @ 7d48e48c
......@@ -11,6 +11,12 @@ The **\<SideBarContainer>** component contains a sidebar and content area as its
Supported
> **NOTE**
>
> - Built-in components and custom components are allowed, without support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
> - This component must contain two child components.
> - If there are three or more child components, only the first and second child components are displayed. If there is only one child component, the sidebar is displayed, and the content area is blank.
## APIs
......@@ -31,27 +37,29 @@ SideBarContainer( type?: SideBarContainerType )
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| showSideBar | boolean | Whether to display the sidebar.<br>Default value: **true**|
| controlButton | ButtonStyle | Attributes of the sidebar control button.|
| showSideBar | boolean | Whether to display the sidebar.<br>Default value: **true**<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| controlButton | [ButtonStyle](#buttonstyle) | Attributes of the sidebar control button.|
| showControlButton | boolean | Whether to display the sidebar control button.<br>Default value: **true**|
| sideBarWidth | number \| Length<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**, in vp|
| minSideBarWidth | number \| Length<sup>9+</sup> | Minimum width of the sidebar.<br>Default value: **200**, in vp|
| maxSideBarWidth | number \| Length<sup>9+</sup> | Maximum width of the sidebar.<br>Default value: **280**, in vp|
| autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**|
| sideBarPosition<sup>9+</sup> | SideBarPosition | Position of the sidebar.<br>Default value: **SideBarPosition.Start**|
| sideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Width of the sidebar.<br>Default value: **200**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value must comply with the width constraints. If it is not within the valid range, the value closest to the set one is used.<br>When set, the width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the width of the sidebar child component takes precedence.|
| minSideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Minimum width of the sidebar.<br>Default value: **200**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the minimum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the minimum width of the sidebar child component takes precedence.|
| maxSideBarWidth | number \| [Length](ts-types.md#length)<sup>9+</sup> | Maximum width of the sidebar.<br>Default value: **280**, in vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value cannot exceed the width of the sidebar container itself. Otherwise, the width of the sidebar container itself is used.<br>When set, the maximum width of the sidebar takes precedence over that of the sidebar child components. If it is not set, however, the maximum width of the sidebar child component takes precedence.|
| autoHide<sup>9+</sup> | boolean | Whether to automatically hide the sidebar when it is dragged to be smaller than the minimum width.<br>Default value: **true**<br>**NOTE**<br>The value is subject to the **minSideBarWidth** attribute method. If it is not set in **minSideBarWidth**, the default value is used.<br>Whether the sidebar should be hidden is determined when it is being dragged. When its width is less than the minimum width, the damping effect is required to trigger hiding (a distance out of range).|
| sideBarPosition<sup>9+</sup> | [SideBarPosition](#sidebarposition9) | Position of the sidebar.<br>Default value: **SideBarPosition.Start**|
| divider<sup>10+</sup> | [DividerStyle](#dividerstyle10) \| null | Divider style.<br>- **DividerStyle** (default): The divider is displayed.<br>- **null**: The divider is not displayed.|
## ButtonStyle
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| left | number | No| Spacing between the sidebar control button and the left of the container.<br>Default value: **16**, in vp|
| top | number | No| Spacing between the sidebar control button and the top of the container.<br>Default value: **48**, in vp|
| width | number | No| Width of the sidebar control button.<br>Default value: **32**, in vp|
| height | number | No| Height of the sidebar control button.<br>Default value: **32**, in vp|
| icons | {<br>shown: string \| PixelMap \| [Resource](ts-types.md) ,<br>hidden: string \| PixelMap \| [Resource](ts-types.md) ,<br>switching?: string \| PixelMap \| [Resource](ts-types.md) <br>} | No| Icons of the sidebar control button.<br> </p> - **shown**: icon of the control button when the sidebar is shown.<br>- **hidden**: icon of the control button when the sidebar is hidden.<br>- **switching**: icon of the control button when the sidebar is switching between the shown and hidden states.|
| left | number | No| Spacing between the sidebar control button and the left of the container.<br>Default value: **16**<br>Unit: vp|
| top | number | No| Spacing between the sidebar control button and the top of the container.<br>Default value: **48**<br>Unit: vp|
| width | number | No| Width of the sidebar control button.<br>Default value: **32**<br>Unit: vp|
| height | number | No| Height of the sidebar control button.<br>Default value: **32**<br>Unit: vp|
| icons | {<br>shown: string \| PixelMap \| [Resource](ts-types.md) ,<br>hidden: string \| PixelMap \| [Resource](ts-types.md) ,<br>switching?: string \| PixelMap \| [Resource](ts-types.md) <br>} | No| Icons of the sidebar control button.<br> </p> - **shown**: icon of the control button when the sidebar is shown.<br>**NOTE**<br>When an error occurs during resource obtaining, the default icon is used.<br>- **hidden**: icon of the control button when the sidebar is hidden.<br>- **switching**: icon of the control button when the sidebar is switching between the shown and hidden states.|
## SideBarPosition<sup>9+</sup>
......@@ -64,16 +72,29 @@ SideBarContainer( type?: SideBarContainerType )
| Name | Type | Mandatory| Description |
| ----------- | ------------- | ---- | ---------------------------------------- |
| strokeWidth | [Length](ts-types.md#length) | Yes | Stroke width of the divider.<br>Default value: **1**, in vp |
| strokeWidth | [Length](ts-types.md#length) | Yes | Stroke width of the divider.<br>Default value: **1**<br>Unit: vp|
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the divider.<br>Default value: **#000000, 3%** |
| startMargin | [Length](ts-types.md#length) | No | Distance between the divider and the top of the sidebar.<br>Default value: **0**|
| endMargin | [Length](ts-types.md#length) | No | Distance between the divider and the bottom of the sidebar.<br>Default value: **0**|
> **NOTE**
>
> When the universal attributes [width and height](ts-universal-attributes-size.md) are set for the sidebar, the **width** setting takes effect only when the sidebar container width is not set, and the **height** settings does not take effect.
> The settings of the universal attributes **width** and **height** do not take effect for the sidebar content area. By default, sidebar content area takes up the remaining space of the sidebar container.
>
> If the attribute method is not used, the sidebar is displayed depending on the size.
>
> - If the size is less than 520 vp, the sidebar is not displayed by default.
> - If the size is greater than or equal to 520 vp, the sidebar is displayed by default.
> -
> -
## Events
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name| Description|
| -------- | -------- |
| onChange(callback: (value: boolean) =&gt; void) | Triggered when the status of the sidebar switches between shown and hidden. <p>The value **true** means that the sidebar is shown, and **false** means the opposite.|
| onChange(callback: (value: boolean) =&gt; void) | Triggered when the status of the sidebar switches between shown and hidden. The value **true** means that the sidebar is displayed, and **false** means the opposite.<br>This event is triggered when any of the following conditions is met:<br>1. The value of **showSideBar** changes.<br>2. The **showSideBar** attribute adapts to behavior changes.<br>3. The **autoHide** API is triggered when the divider is dragged.|
## Example
......@@ -83,14 +104,13 @@ SideBarContainer( type?: SideBarContainerType )
@Entry
@Component
struct SideBarContainerExample {
normalIcon : Resource = $r("app.media.icon")
normalIcon: Resource = $r("app.media.icon")
selectedIcon: Resource = $r("app.media.icon")
@State arr: number[] = [1, 2, 3]
@State current: number = 1
build() {
SideBarContainer(SideBarContainerType.Embed)
{
SideBarContainer(SideBarContainerType.Embed) {
Column() {
ForEach(this.arr, (item, index) => {
Column({ space: 5 }) {
......@@ -115,6 +135,13 @@ struct SideBarContainerExample {
}
.margin({ top: 50, left: 20, right: 30 })
}
.controlButton({
icons: {
hidden: $r('app.media.drawer'),
shown: $r('app.media.drawer'),
switching: $r('app.media.drawer')
}
})
.sideBarWidth(150)
.minSideBarWidth(50)
.maxSideBarWidth(300)
......
en/application-dev/reference/arkui-ts/ts-container-swiper.md
浏览文件 @ 7d48e48c
......@@ -11,6 +11,10 @@
This component can contain child components.
> **NOTE**
>
> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
## APIs
......@@ -29,21 +33,23 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name | Type | Description |
| --------------------------- | ---------------------------------------- | ---------------------------------------- |
| index | number | Index of the child component currently displayed in the container.<br>Default value: **0** |
| autoPlay | boolean | Whether to enable automatic playback for child component switching.<br>Default value: **false** |
| index | number | Index of the child component currently displayed in the container.<br>Default value: **0**<br>**NOTE**<br>If the value is less than 0 or greater than or equal to the number of child components, the default value **0** is used.<br>Since API version 10, this attribute supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| autoPlay | boolean | Whether to enable automatic playback for child component switching.<br>Default value: **false**<br>**NOTE**<br>If **loop** is set to **false**, the playback stops when the last page is displayed. The playback continues when the page is not the last page after a swipe gesture.|
| interval | number | Interval for automatic playback, in ms.<br>Default value: **3000** |
| indicator | boolean | Whether to enable the navigation dots indicator.<br>Default value: **true** |
| indicator<sup>10+</sup> | [DotIndicator](#dotindicator) \| [DigitIndicator](#digitindicator) \| boolean | Style of the navigation point indicator.<br> \- **DotIndicator**: dot style.<br> \- **DigitIndicator**: digit style.<br> \- **boolean**: whether to enable the navigation point indicator.<br> Default value: **true**<br> Default type: **DotIndicator**|
| loop | boolean | Whether to enable loop playback.<br>The value **true** means to enable loop playback. When LazyForEach is used, it is recommended that the number of the components to load exceed 5.<br>Default value: **true**|
| duration | number | Duration of the animation for switching child components, in ms.<br>Default value: **400** |
| vertical | boolean | Whether vertical swiping is used.<br>Default value: **false** |
| itemSpace | number \| string | Space between child components.<br>Default value: **0** |
| itemSpace | number \| string | Space between child components.<br>Default value: **0**<br>**NOTE**<br>This parameter cannot be set in percentage.|
| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.<br>Default value: **SwiperDisplayMode.Stretch**|
| cachedCount<sup>8+</sup> | number | Number of child components to be cached.<br>Default value: **1** |
| disableSwipe<sup>8+</sup> | boolean | Whether to disable the swipe feature.<br>Default value: **false** |
| curve<sup>8+</sup> | [Curve](ts-appendix-enums.md#curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve](ts-appendix-enums.md#curve). You can also create custom curves (interpolation curve objects) by using the API provided by the [interpolation calculation](../apis/js-apis-curve.md) module.<br>Default value: **Curve.Ease**|
| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation dots indicator.<br>\- **left**: distance between the navigation dots indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation dots indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation dots indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation dots indicator.<br>\- **mask**: whether to enable the mask for the navigation dots indicator.<br>\- **color**: color of the navigation dots indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number\|string | Number of elements to display per page.<br>Default value: **1** |
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**|
| indicatorStyle<sup>8+</sup> | {<br>left?: [Length](ts-types.md#length),<br>top?: [Length](ts-types.md#length),<br>right?: [Length](ts-types.md#length),<br>bottom?: [Length](ts-types.md#length),<br>size?: [Length](ts-types.md#length),<br>mask?: boolean,<br>color?: [ResourceColor](ts-types.md),<br>selectedColor?: [ResourceColor](ts-types.md)<br>} | Style of the navigation point indicator.<br>\- **left**: distance between the navigation point indicator and the left edge of the **\<Swiper>** component.<br>\- **top**: distance between the navigation point indicator and the top edge of the **\<Swiper>** component.<br>\- **right**: distance between the navigation point indicator and the right edge of the **\<Swiper>** component.<br>\- **bottom**: distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.<br>\- **size**: diameter of the navigation point indicator.<br>\- **mask**: whether to enable the mask for the navigation point indicator.<br>\- **color**: color of the navigation point indicator.<br>\- **selectedColor**: color of the selected navigation dot.|
| displayCount<sup>8+</sup> | number\|string | Number of elements to display per page.<br>Default value: **1**<br>**NOTE**<br>If the value is of the string type, it can only be **'auto'**, whose display effect is the same as that of **SwiperDisplayMode.AutoLinear**.<br>If the value is of the number type, child components stretch (shrink) on the main axis after the swiper width [deducting the result of itemSpace x (displayCount – 1)] is evenly distributed among them on the main axis.|
| effectMode<sup>8+</sup> | [EdgeEffect](ts-appendix-enums.md#edgeeffect) | Swipe effect. For details, see **EdgeEffect**.<br>Default value: **EdgeEffect.Spring**<br>**NOTE**<br>The spring effect does not take effect when the controller API is called.|
| nextMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Next margin, used to reveal a small part of the next item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the next item is displayed, but child components cannot be loaded. |
| prevMargin<sup>10+</sup> | <br>[Length](ts-types.md#length)<br>| Previous margin, used to reveal a small part of the previous item.<br>Default value: **0**<br>**NOTE**<br>This parameter is valid only when **SwiperDisplayMode** is set to **STRETCH**. If **cachedCount** is set to a value less than or equal to 0, a small part of the previous item is displayed, but child components cannot be loaded. |
## SwiperDisplayMode
......@@ -60,13 +66,13 @@ Controller of the **\<Swiper>** component. You can bind this object to the **\<S
showNext(): void
Turns to the next page.
Turns to the next page. Page turning occurs with the animation, whose duration is specified by **duration**.
### showPrevious
showPrevious(): void
Turns to the previous page.
Turns to the previous page. Page turning occurs with the animation, whose duration is specified by **duration**.
### finishAnimation
......@@ -76,28 +82,55 @@ Stops an animation.
**Parameters**
| Name | Type | Mandatory | Description|
| Name | Type | Mandatory.| Description|
| --------- | ---------- | ------ | -------- |
| callback | () => void | No | Callback invoked when the animation stops.|
## Events
## Indicator<sup>10+</sup>
### onChange
Sets the distance between the navigation point indicator and the **\<Swiper>** component.
onChange(event: (index: number) => void)
| Name| Type| Mandatory.| Description |
| ------ | -------- | ------ | ------------------------------------ |
| left | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the left edge of the **\<Swiper>** component.|
| top | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the top edge of the **\<Swiper>** component.|
| right | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the right edge of the **\<Swiper>** component.|
| bottom | [Length](ts-types.md#length) | No | Distance between the navigation point indicator and the bottom edge of the **\<Swiper>** component.|
Triggered when the index of the currently displayed child component changes.
### DotIndicator
> **NOTE**
>
> When the **\<Swiper>** component is used together with **LazyForEach**, the subpage UI cannot be refreshed in the **onChange** event.
Defines the navigation point indicator of the dot style, which inherits attributes and features from **Indicator**.
| Name | Type | Mandatory.| Description |
| ------------------ | ------------- | ------ | ------------------------------------------------------ |
| itemWidth | [Length](ts-types.md#length) | No | Width of the navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp|
| itemHeight | [Length](ts-types.md#length) | No | Height of the navigation point indicator of the dot style.<br>Default value: **6**<br>Unit: vp|
| selectedItemWidth | [Length](ts-types.md#length) | No | Width of the selected indicator dot.<br>Default value: **6**<br>Unit: vp|
| selectedItemHeight | [Length](ts-types.md#length) | No | Height of the selected indicator dot.<br>Default value: **6**<br>Unit: vp|
| mask | boolean | No | Whether to enable the mask for the navigation point indicator of the dot style.<br>Default value: **false**|
| color | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the navigation point indicator of the dot style.<br>Default value: **'\#007DFF'**|
| selectedColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the selected indicator dot.<br>Default value: **'\#182431'** (10% opacity)|
**Return value**
### DigitIndicator
Defines the navigation point indicator of the digit style, which inherits attributes and features from **Indicator**.
| Name | Type | Mandatory.| Description |
| ----------------- | ------------------------------------------------------------ | ------ | ------------------------------------------------------------ |
| fontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the navigation point indicator of the digit style.<br>Default value: **'\#ff182431'**|
| selectedFontColor | [ResourceColor](ts-types.md#resourcecolor) | No | Font color of the selected indicator digit.<br>Default value: **'\#ff182431'**|
| digitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the navigation point indicator of the digit style.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
| selectedDigitFont | {<br>size?:[Length](ts-types.md#length)<br>weight?:number \| [FontWeight](ts-appendix-enums.md#fontweight) \| string<br>} | No | Font style of the selected indicator digit.<br>\- **size**: font size.<br>Default value: **14vp**<br>\- **weight**: font weight.|
## Events
| Name | Type | Description|
| --------- | ---------- | -------- |
| index | number | Index of the currently displayed element.|
In addition to the [universal events](ts-universal-events-click.md), the following events are supported.
| Name | Description |
| ------------------------------------------------------------ | ------------------------------------------------------------ |
| onChange(event: (index: number) => void) | Triggered when the index of the currently displayed child component changes.<br>- **index**: index of the currently displayed element.<br>**NOTE**<br>When the **\<Swiper>** component is used together with **LazyForEach**, the subpage UI update cannot be triggered in the **onChange** event.|
| onAnimationStart<sup>9+</sup>(event: (index: number) => void) | Triggered when the switching animation starts.<br>- **index**: index of the currently displayed element.<br>**NOTE**<br>The **index** parameter indicates the index before the animation starts (not the one after). When the **\<Swiper>** component contains multiple columns, the index is of the leftmost element.|
| onAnimationEnd<sup>9+</sup>(event: (index: number) => void) | Triggered when the switching animation ends.<br>- **index**: index of the currently displayed element.<br>**NOTE**<br>This event is triggered when the animation ends regardless of whether it is due to a user gesture or invocation of **finishAnimation** through **SwiperController**. The **index** parameter indicates the index after the animation ends. When the **\<Swiper>** component contains multiple columns, the index is of the leftmost element.|
## Example
......
en/application-dev/reference/arkui-ts/ts-container-tabcontent.md
浏览文件 @ 7d48e48c
......@@ -13,7 +13,7 @@ This component supports only one child component.
> **NOTE**
>
> System components and custom components can be built in, and rendering control types ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) are supported.
> Built-in components and custom components are allowed, with support for ([if/else](../../quick-start/arkts-rendering-control-ifelse.md), [ForEach](../../quick-start/arkts-rendering-control-foreach.md), and [LazyForEach](../../quick-start/arkts-rendering-control-lazyforeach.md)) rendering control.
## APIs
......@@ -28,7 +28,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| Name| Type| Description|
| -------- | -------- | -------- |
| tabBar | string \| Resource \| {<br>icon?: string \| Resource,<br>text?: string \| Resource<br>}<br>\| [CustomBuilder](ts-types.md)<sup>8+</sup> | Content displayed on the tab bar.<br>**CustomBuilder**: builder, to which components can be passed (applicable to API version 8 and later versions).<br>**NOTE**<br>If an icon uses an SVG image, the width and height attributes of the SVG image must be deleted. Otherwise, the icon size will be determined by the width and height attributes of the SVG image.<br>If the content set exceeds the space provided by the tab bar, it will be clipped.|
| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle9) \| [BottomTabBarStyle](#bottomtabbarstyle9) | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style. It takes text as its input parameter.<br>**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.<br>**NOTE**<br>The bottom tab style does not include an underline.<br>When an icon display error occurs, a gray blank block is displayed.|
| tabBar<sup>9+</sup> | [SubTabBarStyle](#subtabbarstyle) \| [BottomTabBarStyle](#bottomtabbarstyle) | Content displayed on the tab bar.<br>**SubTabBarStyle**: subtab style. It takes text as its input parameter.<br>**BottomTabBarStyle**: bottom and side tab style. It takes text and images as its input parameters.<br>**NOTE**<br>The bottom tab style does not include an underline.<br>When an icon display error occurs, a gray blank block is displayed.|
> **NOTE**
>
......
en/application-dev/reference/arkui-ts/ts-container-tabs.md
浏览文件 @ 7d48e48c
......@@ -18,11 +18,11 @@ Tabs(value?: {barPosition?: BarPosition, index?: number, controller?: [TabsContr
**Parameters**
| Name | Type | Mandatory | Description |
| ----------- | --------------------------------- | ---- | ---------------------------------------- |
| barPosition | BarPosition | No | Position of the **\<Tabs>** component.<br>Default value: **BarPosition.Start** |
| index | number | No | Initial tab index.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value ranges from 0 to the number of **\<TabContent>** subnodes minus 1.<br>When this parameter is set to different values, the slide animation for tab switching is enabled by default. To disable the animation, set **animationDuration** to **0**. |
| controller | [TabsController](#tabscontroller) | No | Tab controller. |
| Name | Type | Mandatory| Description |
| ----------- | --------------------------------- | ---- | ------------------------------------------------------------ |
| barPosition | BarPosition | No | Position of the **\<Tabs>** component.<br>Default value: **BarPosition.Start** |
| index | number | No | Initial tab index.<br>Default value: **0**<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>The value ranges from 0 to the number of **\<TabContent>** subnodes minus 1.<br>When this parameter is set to different values, the slide animation for tab switching is enabled by default. To disable the animation, set **animationDuration** to **0**.<br>Since API version 10, this parameter supports [$$](../../quick-start/arkts-two-way-sync.md) for two-way binding of variables.|
| controller | [TabsController](#tabscontroller) | No | Tab controller. |
## BarPosition
......@@ -42,7 +42,7 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
| scrollable | boolean | Whether the tabs are scrollable. The value **true** means that the tabs are scrollable, and **false** means the opposite.<br>Default value: **true**|
| barMode | BarMode | Tab bar layout mode. For details, see **BarMode**.<br>Default value: **BarMode.Fixed**|
| barWidth | number \| Length<sup>8+</sup> | Width of the tab bar.<br>**NOTE**<br><br>A value less than 0 or greater than the width of the **\<Tabs>** component evaluates to the default value.|
| barHeight | number \| Length<sup>8+</sup> | Height of the tab bar.<br>**NOTE**<br><br>A value less than 0 or greater than the width of the **\<Tabs>** component evaluates to the default value.|
| barHeight | number \| Length<sup>8+</sup> | Height of the tab bar.<br>**NOTE**<br>A value less than 0 or greater than the width of the **\<Tabs>** component evaluates to the default value. |
| animationDuration | number | Duration of the slide animation for tab switching. If this parameter is set, the tab switching animation is played when the user switches between tabs by sliding or clicking. If this parameter is not set, the tab switching animation is played only when the user switches between tabs by sliding.<br>Default value: **300**<br>**NOTE**<br>A value less than 0 or in percentage evaluates to the default value.|
| divider<sup>10+</sup> | [DividerStyle](#dividerstyle10) \| null | Whether the divider is displayed for the **\<TabBar>** and **\<TabContent>** components and the divider style. By default, the divider is not displayed.<br> **DividerStyle**: divider style.<br> **null**: The divider is not displayed.|
| fadingEdge<sup>10+</sup> | boolean | Whether the tab fades out when it exceeds the container width.<br>Default value: **true** |
......@@ -158,4 +158,3 @@ struct TabsExample {
```
![tabs2](figures/tabs2.gif)
<!--no_check-->
\ No newline at end of file
en/application-dev/reference/arkui-ts/ts-methods-custom-dialog-box.md
浏览文件 @ 7d48e48c
......@@ -16,19 +16,19 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
**Parameters**
| Name | Type | Mandatory | Description |
| ---------------------- | ---------------------------------------- | ------------------------- | ---------------------- |
| builder | [CustomDialog](../../quick-start/arkts-dynamic-ui-elememt-building.md#customdialog) | Yes | Constructor of the custom dialog box content. |
| cancel | () =&gt; void | No | Callback invoked when the dialog box is closed after the overlay exits. |
| autoCancel | boolean | No | Whether to allow users to click the overlay to exit.<br>Default value: **true** |
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default** |
| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position.|
| customStyle | boolean | No | Whether to use a custom style for the dialog box.<br>Default value: **false**, which means that the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height; the rounded corner is 24 vp. |
| gridCount<sup>8+</sup> | number | No | Number of [grid columns](../../ui/ui-ts-layout-grid-container-new.md) occupied by the dialog box.<br>The default value is 4, and the maximum value is the maximum number of columns supported by the system. If this parameter is set to an invalid value, the default value is used.|
| maskColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Custom mask color.<br>Default value: **0x33000000** |
| openAnimation<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the open animation of the dialog box.<br>**NOTE**<br>If **iterations** is set to an odd number and **playMode** is set to **Reverse**, the dialog box will not be displayed when the animation ends. |
| closeAniamtion<sup>10+</sup>| [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the close animation of the dialog box. |
| showInSubWindow<sup>10+</sup>| boolean | No | Whether to display a dialog box in a subwindow.<br>Default value: **false**, indicating that the dialog box is not displayed in the subwindow<br>**NOTE**<br>A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**. |
| Name | Type | Mandatory | Description |
| ----------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| builder | CustomDialog | Yes | Constructor of the custom dialog box content. |
| cancel | () =&gt; void | No | Callback invoked when the dialog box is closed after the overlay exits. |
| autoCancel | boolean | No | Whether to allow users to click the overlay to exit.<br>Default value: **true** |
| alignment | [DialogAlignment](ts-methods-alert-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**|
| offset | [Offset](ts-types.md#offset) | No | Offset of the dialog box relative to the alignment position. |
| customStyle | boolean | No | Whether to use a custom style for the dialog box.<br>Default value: **false**, which means that the dialog box automatically adapts its width to the grid system and its height to the child components; the maximum height is 90% of the container height; the rounded corner is 24 vp.|
| gridCount<sup>8+</sup> | number | No | Number of [grid columns](../../ui/arkts-layout-development-grid-layout.md) occupied by the dialog box.<br>The default value is 4, and the maximum value is the maximum number of columns supported by the system. If this parameter is set to an invalid value, the default value is used.|
| maskColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | No | Custom mask color.<br>Default value: **0x33000000** |
| openAnimation<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the open animation of the dialog box.<br>**NOTE**<br>If **iterations** is set to an odd number and **playMode** is set to **Reverse**, the dialog box will not be displayed when the animation ends.|
| closeAniamtion<sup>10+</sup> | [AnimateParam](ts-explicit-animation.md#animateparam) | No | Parameters for defining the close animation of the dialog box. |
| showInSubWindow<sup>10+</sup> | boolean | No | Whether to display a dialog box in a subwindow.<br>Default value: **false**, indicating that the dialog box is not displayed in the subwindow<br>**NOTE**<br>A dialog box whose **showInSubWindow** attribute is **true** cannot trigger the display of another dialog box whose **showInSubWindow** attribute is also **true**.|
## CustomDialogController
......@@ -38,7 +38,7 @@ CustomDialogController(value:{builder: CustomDialog, cancel?: () =&gt; void, aut
dialogController : CustomDialogController = new CustomDialogController(value:{builder: CustomDialog, cancel?: () => void, autoCancel?: boolean})
```
> **NOTE**
>
>
> **CustomDialogController** is valid only when it is a member variable of the **@CustomDialog** and **@Component** decorated struct and is defined in the **@Component** decorated struct. For details, see the following example.
### open()
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
浏览文件 @ 7d48e48c
......@@ -10,45 +10,46 @@ You can bind a popup to a component, specifying its content, interaction logic,
## APIs
| Name | Type | Description |
| ---------- | ------------------------------------- | --------------------------------------- |
| bindPopup | show: boolean,<br>popup: [PopupOptions](#popupoptions) \| [CustomPopupOptions](#custompopupoptions8)<sup>8+</sup> | Binds a popup to the component.<br>**show**: whether to show the popup. The default value is **false**, indicating that the popup is hidden.<br>**popup**: parameters of the popup.|
| Name | Type | Description |
| --------- | ---------------------------------------- | ---------------------------------------- |
| bindPopup | show: boolean,<br>popup: [PopupOptions](#popupoptions) \| [CustomPopupOptions](#custompopupoptions8)<sup>8+</sup> | Binds a popup to the component.<br>**show**: whether to show the popup. The default value is **false**, indicating that the popup is hidden.<br>**popup**: parameters of the popup.|
## PopupOptions
| Name | Type | Mandatory | Description |
| -------------------------| ------------------------------------------------| -----| ----------------------------------------- |
| message | string | Yes | Content of the popup message. |
| placementOnTop | boolean | No | Whether to display the popup above the component.<br/>Default value: **false** |
| primaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.|
| secondaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.|
| onStateChange | (event: { isVisible: boolean }) =&gt; void | No | Callback for the popup status change event.<br/>**isVisible**: whether the popup is visible. |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup. <br>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default. <br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default. <br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. <br/>Default value: **false** |
| mask<sup>10+</sup> | boolean \| [ResourceColor](ts-types.md#resourcecolor) | No | Whether to apply a mask to the popup. The value **true** means to apply a transparent mask to the popup, **false** means not to apply a mask to the popup, and a color value means to apply a mask in the corresponding color to the popup.|
| messageOptions<sup>10+</sup> | [PopupMessageOptions](#popupmessageoptions10) | No | Parameters of the popup message.|
| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No | Space between the popup and the target.|
| Name | Type | Mandatory| Description |
| ------------------------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| message | string | Yes | Content of the popup message. |
| placementOnTop<sup>(deprecated)</sup> | boolean | No | Whether to display the popup above the component.<br/>Default value: **false**<br>**NOTE**<br>This API is deprecated since API version 10. You are advised to use **placement** instead. |
| primaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Primary button.<br>**value**: text of the primary button in the popup.<br>**action**: callback for clicking the primary button.|
| secondaryButton | {<br>value: string,<br>action: () =&gt; void<br>} | No | Secondary button.<br>**value**: text of the secondary button in the popup.<br>**action**: callback for clicking the secondary button.|
| onStateChange | (event: { isVisible: boolean }) =&gt; void | No | Callback for the popup status change event.<br>**isVisible**: whether the popup is visible. |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup.<br>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default.<br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default.<br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow.<br/>Default value: **false** |
| mask<sup>10+</sup> | boolean \| [ResourceColor](ts-types.md#resourcecolor) | No | Whether to apply a mask to the popup. The value **true** means to apply a transparent mask to the popup, **false** means not to apply a mask to the popup, and a color value means to apply a mask in the corresponding color to the popup.|
| messageOptions<sup>10+</sup> | [PopupMessageOptions](#popupmessageoptions10) | No | Parameters of the popup message. |
| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No | Space between the popup and the target. |
| placement<sup>10+</sup> | [Placement](ts-appendix-enums.md#placement8) | No | Position of the popup relative to the target. The default value is **Placement.Bottom**.<br>If both **placementOnTop** and **placement** are set, the latter prevails.|
## PopupMessageOptions<sup>10+</sup>
| Name | Type | Mandatory| Description |
| --------- | ------------------------------------------ | ---- | ---------------------- |
| textColor | [ResourceColor](ts-types.md#resourcecolor) | No | Text color of the popup message.|
| font | [Font](ts-types.md#Font) | No | Font attributes of the popup message.|
| Name | Type | Mandatory | Description |
| --------- | ---------------------------------------- | ---- | ----------- |
| textColor | [ResourceColor](ts-types.md#resourcecolor) | No | Text color of the popup message.|
| font | [Font](ts-types.md#Font) | No | Font attributes of the popup message.|
## CustomPopupOptions<sup>8+</sup>
| Name | Type | Mandatory | Description |
| -------------------------| ------------------------- | ---- | ---------------------------------------------------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.<br>Default value: **Placement.Bottom** |
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the popup. |
| enableArrow | boolean | No | Whether to display an arrow.<br>Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left**, but the popup height (80 vp) is less than the sum of the arrow width (32 vp) and diameter of popup rounded corner (48 vp), the arrow will not be displayed.<br>Default value: **true**|
| autoCancel | boolean | No | Whether to automatically close the popup when an operation is performed on the page.<br>Default value: **true** |
| onStateChange | (event: { isVisible: boolean }) =&gt; void | No | Callback for the popup status change event.<br>**isVisible**: whether the popup is visible. |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup. <br/>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default. <br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default. <br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow.<br/>Default value: **false** |
| mask<sup>10+</sup> | boolean \| [ResourceColor](ts-types.md#resourcecolor) | No| Whether to apply a mask to the popup. The value **true** means to apply a transparent mask to the popup, **false** means not to apply a mask to the popup, and a color value means to apply a mask in the corresponding color to the popup.|
| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No| Space between the popup and the target.|
| Name | Type | Mandatory | Description |
| ---------------------------- | ---------------------------------------- | ---- | ---------------------------------------- |
| builder | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Popup builder. |
| placement | [Placement](ts-appendix-enums.md#placement8) | No | Preferred position of the popup. If the set position is insufficient for holding the popup, it will be automatically adjusted.<br>Default value: **Placement.Bottom**|
| popupColor | [ResourceColor](ts-types.md#resourcecolor) | No | Color of the popup. |
| enableArrow | boolean | No | Whether to display an arrow.<br>Since API version 9, if the position set for the popup is not large enough, the arrow will not be displayed. For example, if **placement** is set to **Left**, but the popup height (80 vp) is less than the sum of the arrow width (32 vp) and diameter of popup rounded corner (48 vp), the arrow will not be displayed.<br>Default value: **true**|
| autoCancel | boolean | No | Whether to automatically close the popup when an operation is performed on the page.<br>Default value: **true** |
| onStateChange | (event: { isVisible: boolean }) =&gt; void | No | Callback for the popup status change event.<br/>**isVisible**: whether the popup is visible. |
| arrowOffset<sup>9+</sup> | [Length](ts-types.md#length) | No | Offset of the popup arrow relative to the popup.<br/>When the arrow is at the top or bottom of the popup: The value **0** indicates that the arrow is located on the leftmost, and any other value indicates the distance from the arrow to the leftmost; the arrow is centered by default.<br/>When the arrow is on the left or right side of the popup: The value indicates the distance from the arrow to the top; the arrow is centered by default.<br/>When the popup is displayed on either edge of the screen, it will automatically deviate leftward or rightward to stay within the safe area. When the value is **0**, the arrow always points to the bound component. |
| showInSubWindow<sup>9+</sup> | boolean | No | Whether to show the popup in the subwindow. The default value is **false**. |
| mask<sup>10+</sup> | boolean \| [ResourceColor](ts-types.md#resourcecolor) | No | Whether to apply a mask to the popup. The value **true** means to apply a transparent mask to the popup, **false** means not to apply a mask to the popup, and a color value means to apply a mask in the corresponding color to the popup.|
| targetSpace<sup>10+</sup> | [Length](ts-types.md#length) | No | Space between the popup and the target. |
## Example
```ts
......@@ -111,7 +112,7 @@ struct PopupExample {
.bindPopup(this.customPopup, {
builder: this.popupBuilder,
placement: Placement.Top,
mask: {color: 0x33000000},
maskColor: '0x33000000',
popupColor: Color.Yellow,
enableArrow: true,
showInSubWindow: false,
......
en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
浏览文件 @ 7d48e48c
......@@ -10,7 +10,7 @@ The visibility attribute controls whether a component is visible.
| Name | Type | Description |
| ---------- | ---------------------------- | ------------------------------------------ |
| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is invisible, it still needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../quick-start/arkts-rendering-control.md#conditional-rendering) instead under scenarios where consistently high performance is required.<br>Default value: **Visibility.Visible**<br>Since API version 9, this API is supported in ArkTS widgets.|
| visibility | [Visibility](ts-appendix-enums.md#visibility) | Whether the component is visible. Note that even if a component is invisible, it still needs to be re-created when the page is refreshed. Therefore, you are advised to use [conditional rendering](../../quick-start/arkts-rendering-control-ifelse.md) instead under scenarios where consistently high performance is required.<br>Default value: **Visibility.Visible**<br>Since API version 9, this API is supported in ArkTS widgets.|
## Example
......@@ -23,11 +23,11 @@ struct VisibilityExample {
build() {
Column() {
Column() {
// The component is hidden, and no placeholder is used.
// The component is hidden and does not take up space in the layout.
Text('None').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row().visibility(Visibility.None).width('90%').height(80).backgroundColor(0xAFEEEE)
// The component is hidden, and a placeholder is used for it in the layout.
// The component is hidden but takes up space in the layout.
Text('Hidden').fontSize(9).width('90%').fontColor(0xCCCCCC)
Row().visibility(Visibility.Hidden).width('90%').height(80).backgroundColor(0xAFEEEE)
......
en/application-dev/reference/arkui-ts/ts-universal-events-keyboardshortcut.md 0 → 100644
浏览文件 @ 7d48e48c
# Custom Keyboard Shortcuts
You can set one or more custom keyboard shortcuts for a component. The behavior of these keyboard shortcuts is the same as that of clicks. Components can respond to custom keyboard shortcuts even when they are not focused.
> **NOTE**
>
> The APIs of this module are supported since API version 10. Updates will be marked with a superscript to indicate their earliest API version.
## APIs
keyboardShortcut(value: string | [FunctionKey], keys: Array<[ModifierKey]>)
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------- | ---- | ------------------------------------------------------------ |
| value | string \| [FunctionKey](#functionkey) | Yes | Character key (which can be entered through the keyboard) or [function key](#functionkey).<br>|
| keys | Array<[ModifierKey](#modifierkey)> | Yes | Modifier keys.<br> |
## ModifierKey
| Name | Description |
| ----- | ------------------- |
| CTRL | Ctrl key on the keyboard. |
| SHIFT | Shift key on the keyboard.|
| ALT | Alt key on the keyboard. |
## FunctionKey
| Name| Description |
| ---- | --------------------- |
| ESC | Esc key on the keyboard.|
| F1 | F1 key on the keyboard. |
| F2 | F2 key on the keyboard. |
| F3 | F3 key on the keyboard. |
| F4 | F4 key on the keyboard. |
| F5 | F5 key on the keyboard. |
| F6 | F6 key on the keyboard. |
| F7 | F7 key on the keyboard. |
| F8 | F8 key on the keyboard. |
| F9 | F9 key on the keyboard. |
| F10 | F10 key on the keyboard.|
| F11 | F11 key on the keyboard.|
| F12 | F12 key on the keyboard.|
## Precautions for Using Keyboard Shortcuts
| Scenario | Processing Logic | Example |
| ------------------------------------------------------------ | -------------------------------------------------------- | ------------------------------------------------------------ |
| All components that support the **onClick** event | Custom keyboard shortcuts are supported. | – |
| Requirements for custom keyboard shortcuts | A custom keyboard shortcut consists of one or more modifier keys (**Ctrl**, **Shift**, **Alt**, or any combination thereof) and a character key or function key.| Button('button1').keyboardShortcut('a',[ModifierKey.CTRL]) |
| Setting one custom keyboard shortcut for multiple components | Only the first component in the component tree responds to the custom keyboard shortcut. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[ModifierKey.CTRL]) |
| When the component is focused or not | The component responds to the custom keyboard shortcut as long as the window is focused. | – |
| When a single keyboard shortcut is set, it can be canceled by setting the **value**, **keys**, or both of them to null in the **keyboardShortcut** API.<br>When multiple keyboard shortcuts are set, they cannot be canceled.| Canceling the custom keyboard shortcut settings | Button('button1').keyboardShortcut('',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('a',[l])<br>Button('button3').keyboardShortcut('',[]) |
| The independent pipeline sub-window and main window coexist | The focused window responds to the keyboard shortcut. | – |
| Ctrl, Shift, or Alt key in the **keys** parameter of the **keyboardShortcut** API | Both the keys on the left or right sides of the keyboard work. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL, ModifierKey.ALT]) |
| Character key in the **value** parameter of the **keyboardShortcut** API | The response is case-insensitive. | Button('button1').keyboardShortcut('a',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('A',[ModifierKey.CTRL]) |
| Response to keyboard shortcuts | The component responds continuously to the keyboard shortcut when all the set keys are pressed. | – |
| Hidden component<br> | The keyboard shortcut also works. | – |
| Components in the disable state | The keyboard shortcut does not work. | – |
| 1. The keyboard shortcut is the same as an existing one (including the system-defined ones).<br>2. The **value** parameter contains multiple character keys.<br>3. The **key** parameter has a duplicate modifier key.| In these cases, the keyboard shortcut is not added, and the previously added keyboard shortcuts still work. | Button('button1').keyboardShortcut('c',[ModifierKey.CTRL])<br>Button('button2').keyboardShortcut('ab',[ModifierKey.CTRL])<br>Button('button3').keyboardShortcut('ab',[ModifierKey.CTRL,ModifierKey.CTRL]) |
## System-defined Keyboard Shortcuts
| Keyboard Shortcut | Component |
| -------------- | ------------------------------------------------------------ |
| Ctrl + C | [Image](ts-basic-components-image.md), [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ A | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ V | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ X | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Shift + arrow keys| [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ Shift+ Z | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ Z | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Ctrl+ Y | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Arrow keys and Enter key| [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
| Tab key | [TextInput](ts-basic-components-textinput.md), [TextArea](ts-basic-components-textarea.md)|
## Example
Set a keyboard shortcut. You can then press the modifier key and accompanying key at the same time to trigger the component to respond to the shortcut and trigger the **onClick** event or other custom event.
```ts
// xxx.ets
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
build() {
Row() {
Column() {
Text(this.message)
Button("Test short cut 1").onClick((event) => {
this.message = "I clicked Button 1";
console.log("I clicked 1");
}).keyboardShortcut('.', [ModifierKey.SHIFT, ModifierKey.CTRL, ModifierKey.ALT])
.onKeyEvent((event)=>{
console.log("event.keyCode: " + JSON.stringify(event));
})
Button("Test short cut 2").onClick((event) => {
this.message = "I clicked Button 2";
console.log("I clicked 2");
}).keyboardShortcut('1', [ModifierKey.CTRL])
Button("Test short cut 3").onClick((event) => {
this.message = "I clicked Button 3";
console.log("I clicked 3");
}).keyboardShortcut('A', [ModifierKey.SHIFT])
Button("Test short cut 4").onClick((event) => {
this.message = "I clicked Button 4";
console.log("I clicked 4");
}).keyboardShortcut(FunctionKey.F5, [], () => {
this.message = "I clicked Button 4";
console.log("I clicked user callback.");
}).keyboardShortcut(FunctionKey.F3, [])
}
.width('100%')
}
.height('100%')
}
}
```
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或