diff --git a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md index e6e19c44e7387dfb6682a9a296a461df72566b21..63f0e8300b8530cc0e7404cfb881ba3eff5d5d03 100644 --- a/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md +++ b/en/application-dev/reference/arkui-ts/ts-methods-action-sheet.md @@ -28,10 +28,10 @@ Defines and shows the action sheet. | confirm | {
value: string \| [Resource](ts-types.md#resource),
action: () => void
} | No | Text content of the confirm button and callback upon button clicking.
Default value:
**value**: button text.
**action**: callback upon button clicking.| | 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.
Default value: **DialogAlignment.Default**| -| offset | {
dx: Length,
dy: Length
} | No | Offset of the dialog box relative to the alignment position.{
dx: 0,
dy: 0
} | +| offset | {
dx: Length,
dy: Length
} | No | Offset of the dialog box relative to the alignment position.
Default value: **{
dx: 0,
dy: 0
}** | | sheets | Array<SheetInfo> | Yes | Options in the dialog box. Each option supports the image, text, and callback.| -## SheetInfo parameters +## SheetInfo | Name| Type | Mandatory| Description | | ------ | ------------------------------------------------------------ | ---- | ----------------- | diff --git a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md index c35cfd163fc86189bfb52182513ce2202d17e398..c393bf5812f9508448891111012d6c839cf6fb5c 100644 --- a/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md +++ b/en/application-dev/reference/arkui-ts/ts-transition-animation-shared-elements.md @@ -17,7 +17,7 @@ Shared element transition can be used for transition between pages, for 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. ```ts // xxx.ets diff --git a/en/application-dev/ui/Readme-EN.md b/en/application-dev/ui/Readme-EN.md index 20d4a865e9ed33c9b7413adb2498d4826518ccb0..2b4efca72f4786729d4f11234febd406778bc266 100644 --- a/en/application-dev/ui/Readme-EN.md +++ b/en/application-dev/ui/Readme-EN.md @@ -1,26 +1,24 @@ # UI Development - [ArkUI Overview](arkui-overview.md) -- TypeScript-based Declarative Development Paradigm +- UI Development with eTS-based Declarative Development Paradigm - [Overview](ui-ts-overview.md) - Framework Overview - File Organization - [Directory Structure](ts-framework-directory.md) - [Rules for Accessing Application Code Files](ts-framework-file-access-rules.md) - - ["js" Tag](ts-framework-js-tag.md) - Resource Management - [Resource File Categories](ui-ts-basic-resource-file-categories.md) - - [Accessing Resources](ts-resource-access.md) + - [Resource Access](ts-resource-access.md) - [Pixel Units](ts-pixel-units.md) - Declarative Syntax - - [Overview](ts-syntax-intro.md) - - General UI Description Specifications + - [About Usage of UI Description Specifications](ts-syntax-intro.md) + - About General UI Description Specifications - [Basic Concepts](ts-general-ui-concepts.md) - Declarative UI Description Specifications - [Configuration Without Parameters](ts-parameterless-configuration.md) - [Configuration with Mandatory Parameters](ts-configuration-with-mandatory-parameters.md) - - - [Attribute Configuration](ts-attribution-configuration.md) + - [Attribute Configuration](ts-attribution-configuration.md) - [Event Configuration](ts-event-configuration.md) - [Child Component Configuration](ts-child-component-configuration.md) - Componentization @@ -46,21 +44,21 @@ - [@Observed and @ObjectLink](ts-other-states-observed-objectlink.md) - [@Consume and @Provide](ts-other-states-consume-provide.md) - [@Watch](ts-other-states-watch.md) - - About Rendering Control Syntax - - [if/else](ts-rending-control-syntax-if-else.md) - - [ForEach](ts-rending-control-syntax-foreach.md) - - [LazyForEach](ts-rending-control-syntax-lazyforeach.md) - - About @Component + - Rendering Control Syntax + - [if/else](ts-rending-control-syntax-if-else.md) + - [ForEach](ts-rending-control-syntax-foreach.md) + - [LazyForEach](ts-rending-control-syntax-lazyforeach.md) + - About Componentization - [build Function](ts-function-build.md) - [Initialization of Custom Components' Member Variables](ts-custom-component-initialization.md) - [Custom Component Lifecycle Callbacks](ts-custom-component-lifecycle-callbacks.md) - - [Component Creation and Re-initialization](ts-component-creation-re-initialization.md) + - [Examples: Component Creation and Re-initialization](ts-component-creation-re-initialization.md) - [About Syntactic Sugar](ts-syntactic-sugar.md) - Common Component Development Guidelines - [Button](ui-ts-basic-components-button.md) - [Web](ui-ts-components-web.md) - Common Layout Development Guidelines - - [Flex Layout](ui-ts-layout-flex.md) + - [Flexible Layout](ui-ts-layout-flex.md) - [Grid Layout](ui-ts-layout-grid-container.md) - [Media Query](ui-ts-layout-mediaquery.md) - Experiencing the Declarative UI @@ -74,9 +72,9 @@ - [Implementing Page Redirection and Data Transmission](ui-ts-page-redirection-data-transmission.md) - [Recommendations for Improving Performance](ts-performance-improvement-recommendation.md) -- JavaScript-based Web-like Development Paradigm +- UI Development with JavaScript-compatible Web-like Development Paradigm - [Overview](ui-js-overview.md) - - Framework + - Framework Overview - [File Organization](js-framework-file.md) - ["js" Tag](js-framework-js-tag.md) - [app.js](js-framework-js-file.md) @@ -100,14 +98,14 @@ - [Defining Gesture Events](ui-js-building-ui-event.md) - [Defining Page Routes](ui-js-building-ui-routes.md) - Common Component Development Guidelines - - Container Components + - Container Component Development - [List Development](ui-js-components-list.md) - [Dialog Development](ui-js-components-dialog.md) - [Form Development](ui-js-components-form.md) - [Stepper Development](ui-js-components-stepper.md) - [Tabs Development](ui-js-component-tabs.md) - [Swiper Development](ui-js-components-swiper.md) - - Basic Components + - Basic Component Development - [Text Development](ui-js-components-text.md) - [Input Development](ui-js-components-input.md) - [Button Development](ui-js-components-button.md) @@ -128,8 +126,8 @@ - [CanvasRenderingContext2D](ui-js-components-canvasrenderingcontext2d.md) - [Path2D](ui-js-components-path2d.md) - [OffscreenCanvas](ui-js-components-offscreencanvas.md) - - [Grid-container Development](ui-js-components-grid.md) - - Svg + - [Grid Container Development](ui-js-components-grid.md) + - SVG Development - [Basics](ui-js-components-svg-overview.md) - [Graph Drawing](ui-js-components-svg-graphics.md) - [Path Drawing](ui-js-components-svg-path.md) diff --git a/en/application-dev/ui/ts-framework-directory.md b/en/application-dev/ui/ts-framework-directory.md index 1e788f32305a7be845f4dbc95631dac2c42bb764..5d2704f3f9647df9c90ead125e723e9a46d8dea6 100644 --- a/en/application-dev/ui/ts-framework-directory.md +++ b/en/application-dev/ui/ts-framework-directory.md @@ -1,30 +1,38 @@ # Directory Structure -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). ![en-us_image_0000001222967752](figures/en-us_image_0000001222967752.png) -Functions of the files are as follows: +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: - - 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** > -> - 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). diff --git a/en/application-dev/ui/ts-framework-js-tag.md b/en/application-dev/ui/ts-framework-js-tag.md deleted file mode 100644 index f13461a7e8c8844cfc85586412a52319125f8fd4..0000000000000000000000000000000000000000 --- a/en/application-dev/ui/ts-framework-js-tag.md +++ /dev/null @@ -1,102 +0,0 @@ -# "js" 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:
- pageAbility: Run the JS component in ability mode.
- form: Run the JS component as a service widget. | -| syntax | - | Syntax type of the JS component. The options are as follows:
- hml: compiled in the .hml, .css, or .js style.
- ets: compiled in the declarative syntax style. | - -> **NOTE** -> If type is set to form, syntax cannot be ets. - - -## Example - -config.json: - -```json -{ - "app": { - "bundleName": "com.example.player", - "version": { - "code": 1, - "name": "1.0" - }, - "vendor": "example" - }, - "module": { - "js": [{ - "name": "default", - "pages": [ - "pages/index", - "pages/detail" - ], - "window": { - "designWidth": 720 - }, - "mode": { - "type": "pageAbility", - "syntax": "ets" - }, - }], - "abilities": [{ - ... - }] - } -} -``` diff --git a/en/application-dev/ui/ts-resource-access.md b/en/application-dev/ui/ts-resource-access.md index f6c6d7e96bd4bd5f9e9e35e9205a0d84069b0d7f..271aaef3ca39ae9db50f9e3b410351dbc202928c 100644 --- a/en/application-dev/ui/ts-resource-access.md +++ b/en/application-dev/ui/ts-resource-access.md @@ -1,4 +1,4 @@ -# Accessing Application Resources +# Resource Access ## Accessing Application Resources