@@ -28,10 +28,10 @@ Defines and shows the action sheet.
...
@@ -28,10 +28,10 @@ Defines and shows the action sheet.
| confirm | {<br>value: string \|[Resource](ts-types.md#resource),<br>action: () => 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.|
| confirm | {<br>value: string \|[Resource](ts-types.md#resource),<br>action: () => 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 | () => void | No | Callback invoked when the dialog box is closed after the overlay is clicked. |
| cancel | () => 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.Default**|
| alignment | [DialogAlignment](ts-methods-custom-dialog-box.md#dialogalignment) | No | Alignment mode of the dialog box in the vertical direction.<br>Default value: **DialogAlignment.Default**|
| offset | {<br>dx: Length,<br>dy: Length<br>} | No | Offset of the dialog box relative to the alignment position.{<br>dx: 0,<br>dy: 0<br>} |
| 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<SheetInfo> | Yes | Options in the dialog box. Each option supports the image, text, and callback.|
| sheets | Array<SheetInfo> | Yes | Options in the dialog box. Each option supports the image, text, and callback.|
@@ -17,7 +17,7 @@ Shared element transition can be used for transition between pages, for example,
...
@@ -17,7 +17,7 @@ Shared element transition can be used for transition between pages, for example,
## Example
## Example
The example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image.
The example implements the custom transition of a shared image during redirection from one page to another, which is triggered by a click on the image.
The following figure shows the typical directory structure of the eTS module (entry/src/main) for an application with feature abilities (FAs).
The following figure shows the typical directory structure of the **ets** module (in **entry/src/main**) for an application with feature abilities (FAs).
The **ets** directory contains the following files:
- The Extended TypeScript (eTS) files that end with the .ets extension describe the UI layouts, styles, event interactions, and page logics.
**.ets** files: Extended TypeScript (eTS) files that describe the UI layouts, styles, event interactions, and page logics.
Functions of the folders and files are as follows:
Functions of the folders and files are as follows:
- The **app.ets** file manages global application logics and lifecycles.
- The **app.ets** file manages global application logics and lifecycles.
- The **pages** directory stores all component pages.
- The **pages** directory stores all pages.
- The **common** directory stores common code files, such as files of custom components and public methods.
> **NOTE**
>
> - For details about the **resources** directory in **src/main**, see [Resource File Categories](ui-ts-basic-resource-file-categories.md).
>- TypeScript and JavaScript files can be imported as page files.
"js" tag configuration:
- The **common** directory stores common code files, such as custom components and public methods.
Configure the **"js"** tag in the configuration file of your application. The **"js"** tag contains the instance name, page route, and window configuration information.
> **NOTE**
> **NOTE**
>
>
> - The **resources** directory is located in **src/main**. For details about this directory, see [Resource File Categories](ui-ts-basic-resource-file-categories.md).
> For details about the **"js"** tag in the FA model, see [Table 22 Internal structure of the js attribute](../quick-start/package-structure.md#internal-structure-of-the-js-attribute).
>
>
> - TypeScript and JavaScript files can be imported as page files.
> For details about the **"js"** tag in the stage model, see [Table 3 Internal structure of the module tag](../quick-start/stage-structure.md#internal-structure-of-the-module-tag).
Configure the "js" tag in the **config.json** file of your application. The "js" tag contains the instance name, page route, and window configuration information.
| Tag | Type | Default Value | Mandatory | Description |
| name | string | default | Yes | Name of the eTS instance. |
| pages | Array | - | Yes | Page route information. For details, see ["pages"](#pages). |
| window | Object | - | No | Window configuration information. For details, see ["window"](#window). |
| mode | Object | - | No | Running type and syntax style of the JS component. For details, see ["mode"](#mode). |
## pages
The "pages" defines the route information of each page's entry component. Each page consists of the page path and page name. The following is an example:
```json
{
"pages":[
"pages/index",
"pages/detail"
]
}
```
> **NOTE**
> - The first page in the "pages" list is the home page of the application.
>
> - The page name must not be a component name, for example, Text.ets or Button.ets.
>
> - Each page file must contain the [page entry component](../ui/ts-component-based-entry.md) (with the @Entry decoration).
## window
The "window" configures the view window. The following attributes can be configured:
| Type | Default Value | Description |
| -------- | -------- | -------- |
| designWidth | - | Logical width of the view. The default value is 720. (The default value is 454 for wearables.) The logical width of the view determines the unit size of lpx. For example, if designWidth is 720 and the view width is 1440 physical pixels, 1 lpx is 2 physical pixels. For details, see [lpx](../ui/ts-pixel-units.md). |
```json
{
...
"window":{
"designWidth":720
}
...
}
```
## mode
The "mode" configures the running type and syntax style of a JS component. The following attributes are supported:
| Type | Default Value | Description |
| -------- | -------- | -------- |
| type | - | Running type of the JS component. The options are as follows:<br/>- pageAbility: Run the JS component in ability mode.<br/>- form: Run the JS component as a service widget. |
| syntax | - | Syntax type of the JS component. The options are as follows:<br/>- hml: compiled in the .hml, .css, or .js style.<br/>- ets: compiled in the declarative syntax style. |
