Skip to content

D
Docs

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

通知 161
Star 293
Fork 28
D
Docs
“f1143f0cdbab985d1d3878ff27a47409d237e932”上不存在“paddle/phi/kernels/gpu/reduce_max_grad_kernel.cu”
未验证 提交 8e820396 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!11358 翻译完成 9947/10693/10382 

Merge pull request !11358 from ester.zhou/C1-1108
上级 fa155e13 62e0baeb
隐藏空白更改
内联 并排
Showing with 126 addition and 123 deletion
en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
浏览文件 @ 8e820396
......@@ -21,19 +21,21 @@ Gauge(options:{value: number, min?: number, max?: number})
| Name| Type| Mandatory| Description|
| -------- | -------- | -------- | -------- |
| value | number | Yes| Current data value.|
| value | number | Yes| Current value of the chart, that is, the position to which the pointer points in the chart. It is used as the initial value of the chart when the component is created.|
| min | number | No| Minimum value of the current data segment.<br>Default value: **0**|
| max | number | No| Maximum value of the current data segment.<br>Default value: **100**|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name| Type| Description|
| -------- | -------- | -------- |
| value | number | Value of the chart.<br>Default value: **0**|
| startAngle | number | Start angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **-150**|
| endAngle | number | End angle of the chart. The value 0 indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **150**|
| colors | Array&lt;ColorStop&gt; | Colors of the chart. Colors can be set for individual segments.|
| strokeWidth | [Length](ts-types.md#length) | Stroke width of the chart.|
| value | number | Value of the chart. It can be dynamically changed.<br>Default value: **0**|
| startAngle | number | Start angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**|
| endAngle | number | End angle of the chart. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**|
| colors | Array&lt;[ColorStop](#colorstop)&gt; | Colors of the chart. Colors can be set for individual segments.|
| strokeWidth | Length | Stroke width of the chart.|
## ColorStop
......@@ -41,7 +43,7 @@ Describes a gradient stop.
| Name | Type | Description |
| --------- | -------------------- | ------------------------------------------------------------ |
| ColorStop | [[ResourceColor](ts-types.md#resourcecolor8), number] | Type of the gradient stop. The first parameter specifies the color, and the second parameter specifies the offset, which ranges from 0 to 1.|
| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | Type of the gradient stop. The first parameter indicates the color value. If it is set to a non-color value, the black color is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0, which means that the color is not displayed.|
## Example
......@@ -53,15 +55,30 @@ Describes a gradient stop.
@Component
struct GaugeExample {
build() {
Column() {
Gauge({ value: 50, min: 0, max: 100 })
.startAngle(210).endAngle(150)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1], [0xD94838, 1]])
.strokeWidth(20)
Column({ space: 20 }) {
// Use the default value of min and max, which is 0-100, and the default values of startAngle and endAngle, which are 0 and 360, respectively.
// Set the current value to 75.
Gauge({ value: 75 })
.width(200).height(200)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
// Set the value parameter to 75 and the value attribute to 25. The attribute setting is used.
Gauge({ value: 75 })
.value(25) // If both the attribute and parameter are set, the parameter setting is used.
.width(200).height(200)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
// A ring chart of 210 to 150 degrees
Gauge({ value: 30, min: 0, max: 100 })
.startAngle(210)
.endAngle(150)
.colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]])
.strokeWidth(20)
.width(200)
.height(200)
}.width('100%').margin({ top: 5 })
}
}
```
![en-us_image_0000001174422916](figures/en-us_image_0000001174422916.png)
![gauge](figures/gauge-image.png)
en/application-dev/reference/arkui-ts/ts-basic-components-image.md
浏览文件 @ 8e820396
......@@ -25,27 +25,29 @@ Obtains an image from the specified source for subsequent rendering and display.
**Parameters**
| Name| Type | Mandatory| Description |
| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7) \| [Resource](ts-types.md#resource) | Yes | Image source. Both local and online images are supported.<br>When using an image referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability. |
| Name| Type | Mandatory| Default Value| Description |
| ------ | ------------------------------------------------------------ | ---- | ------ | ------------------------------------------------------------ |
| src | string\| [PixelMap](../apis/js-apis-image.md#pixelmap7)\| [Resource](ts-types.md#resource) | Yes | - | Image source. Both local and online images are supported.<br>When using resources referenced using a relative path, for example, `Image("common/test.jpg")`, the **\<Image>** component cannot be called across bundles or modules. Therefore, you are advised to use `$r` to reference image resources that need to be used globally.<br>- The following image formats are supported: PNG, JPG, BMP, SVG, GIF.<br>\- Base64 strings are supported. The value format is `data:image/[png\|jpeg\|bmp\|webp];base64,[base64 data]`, where `[base64 data]` is a Base64 string.<br/>\- The value can also be a path starting with `dataability://`, which is used to access the image path provided by a Data ability.<br>\- Strings with the `file:///data/storage` prefix are supported, which are used to read image resources in the` files` folder in the installation directory of the application. Using such strings requires the read permission on the files in the installation directory.|
## Attributes
In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
| Name | Type | Description |
| --------------------- | ------------------------------------------------------- | ------------------------------------------------------------ |
| alt | string \| [Resource](ts-types.md#resource)| Placeholder image displayed during loading. Both local and Internet URIs are supported. |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Image scale mode.<br>Default value: **ImageFit.Cover** |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | Whether the image is repeated.<br>Default value: **NoRepeat**<br>**NOTE**<br>This attribute is not applicable to SVG images.|
| interpolation | ImageInterpolation | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>Default value: **ImageInterpolation.None**<br>**NOTE**<br>This attribute is not applicable to SVG images.<br>This attribute is not applicable to **PixelMap** objects.|
| renderMode | ImageRenderMode | Rendering mode of the image.<br>Default value: **ImageRenderMode.Original**<br>**NOTE**<br>This attribute is not applicable to SVG images.|
| sourceSize | {<br>width: number,<br>height: number<br>} | Size of the decoded image. The original image is decoded into a **pixelMap** of the specified size, in px.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects.|
| matchTextDirection | boolean | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context.<br>Default value: **false** |
| fitOriginalSize | boolean | Whether to fit the component to the original size of the image source when the component size is not set.<br>Default value: **true** |
| fillColor | [ResourceColor](ts-types.md#resourcecolor) | Fill color of the image. This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image.|
| autoResize | boolean | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.<br>Default value: **true**|
| syncLoad<sup>8+</sup> | boolean | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed.<br>Default value: **false**|
| Name | Type | Default Value | Description |
| --------------------- | ---------------------------------------- | -------- | ---------------------------------------- |
| alt | string \| [Resource](ts-types.md#resource) | - | Placeholder image displayed during loading. Only local images are supported. |
| objectFit | [ImageFit](ts-appendix-enums.md#imagefit) | Cover | Image scale mode. |
| objectRepeat | [ImageRepeat](ts-appendix-enums.md#imagerepeat) | NoRepeat | Whether the image is repeated.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| interpolation | ImageInterpolation | None | Interpolation effect of the image. This attribute is intended to alleviate aliasing that occurs when a low-definition image is zoomed in.<br>**NOTE**<br>This attribute is not applicable to SVG images or **PixelMap** objects. |
| renderMode | ImageRenderMode | Original | Rendering mode of the image.<br>**NOTE**<br>This attribute is not applicable to SVG images. |
| sourceSize | {<br>width: number,<br>height: number<br>} | - | Decoding size of the image. The original image is decoded into an image of the specified size. If the value is of the number type, the unit px is used.<br>**NOTE**<br>This attribute is not applicable to **PixelMap** objects. |
| matchTextDirection | boolean | false | Whether to display the image in the system language direction. When this parameter is set to true, the image is horizontally flipped in the right-to-left (RTL) language context. |
| fitOriginalSize | boolean | true | Whether to fit the component to the original size of the image source when the component size is not set. |
| fillColor | [ResourceColor](ts-types.md#resourcecolor8) | - | Fill color of the image. This attribute only applies to an SVG image. Once set, the fill color will replace that of the SVG image. |
| autoResize | boolean | true | Whether to resize the image source used for drawing based on the size of the display area during image decoding. This resizing can help reduce the memory usage.|
| syncLoad<sup>8+</sup> | boolean | false | Whether to load the image synchronously. By default, the image is loaded asynchronously. During synchronous loading, the UI thread is blocked and the placeholder diagram is not displayed. |
> **NOTE**
>
> For SVG images, only the following tags are included in the supported list: **svg**, **rect**, **circle**, **ellipse**, **path**, **line**, **polyline**, **polygon**, **animate**, **animateMotion**, and **animateTransform**.
## ImageInterpolation
......@@ -311,7 +313,7 @@ struct LoadImageExample {
this.path = EMPTY_PATH;
this.path += getContext(this.bundleCodeDir + '/entry/resource/base/media/icon.png');
})
Text(`Image path: ${this.path}`)
Text(`Image pth: ${this.path}`)
.fontSize(20)
.margin({ bottom: 10 })
Image(this.path)
......
en/application-dev/ui/js-framework-syntax-css.md
浏览文件 @ 8e820396
# CSS
Cascading Style Sheets (CSS) is a language used to describe the HML page structure. All HML components have default styles. You can customize styles for these components using CSS to design various pages. For details, see [Universal Styles](../reference/arkui-js/js-components-common-styles.md).
## Size Unit
- Logical px set by \<length>:
- The default logical screen width is 720 px (for details, see the "window" section in [config.json](js-framework-js-tag.md)). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
- If you set autoDesignWidth to true (for details, see the "window" section in [config.json](js-framework-js-tag.md)), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
- Logical px set by **\<length>**:
- The default logical screen width is 720 px (for details, see the **"window"** section in **[config.json](js-framework-js-tag.md)**). Your page will be scaled to fit the actual width of the screen. For example, on a screen with the actual width of 1440 physical px, 100 px is displayed on 200 physical px, with all sizes doubled from 720 px to 1440 px.
- If you set **autoDesignWidth** to **true** (for details, see the **"window"** section in **[config.json](js-framework-js-tag.md)**), the logical px are scaled based on the screen density. For example, if the screen density is 3x, 100 px will be rendered on 300 physical px. This approach is recommended when your application needs to adapt to multiple devices.
- Percentage set by &lt;percentage&gt;: The component size is represented by its percentage of the parent component size. For example, if the width &lt;percentage&gt; of a component is set to 50%, the width of the component is half of its parent component's width.
- Percentage set by **\<percentage>**: The component size is represented by its percentage of the parent component size. For example, if the width **\<percentage>** of a component is set to **50%**, the width of the component is half of its parent component's width.
## Style Import
CSS files can be imported using the @import statement. This facilitates module management and code reuse.
CSS files can be imported using the **@import** statement. This facilitates module management and code reuse.
## Style Declaration
The .css file with the same name as the .hml file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
The **.css** file with the same name as the **.hml** file in each page directory describes the styles of components on the HML page, determining how the components will be displayed.
1. Internal style: The style and class attributes can be used to specify the component style. Example:
1. Internal style: The **style** and **class** attributes can be used to specify the component style. Example:
```html
<!-- index.hml -->
<div class="container">
......@@ -30,7 +29,6 @@ The .css file with the same name as the .hml file in each page directory describ
</div>
```
```css
/* index.css */
.container {
......@@ -38,8 +36,7 @@ The .css file with the same name as the .hml file in each page directory describ
}
```
2. External style files: You need to import the files. For example, create a style.css file in the common directory and import the file at the beginning of index.css.
2. External style files: You need to import the files. For example, create a **style.css** file in the **common** directory and import the file at the beginning of **index.css**.
```css
/* style.css */
.title {
......@@ -47,7 +44,6 @@ The .css file with the same name as the .hml file in each page directory describ
}
```
```css
/* index.css */
@import '../../common/style.css';
......@@ -61,19 +57,18 @@ The .css file with the same name as the .hml file in each page directory describ
A CSS selector is used to select elements for which styles need to be added to. The following table lists the supported selectors.
| Selector | Example | Description |
| -------- | -------- | -------- |
| .class | .container | Selects all components whose class is container. |
| \#id | \#titleId | Selects all components whose id is titleId. |
| tag | text | Selects all &lt;text&gt; components. |
| , | .title, .content | Selects all components whose class is title or content. |
| \#id .class tag | \#containerId .content text | Selects all grandchild **\<text>** components whose grandparent components are identified as containerId and whose parent components are of the content class. To select child components, use > to replace the space between **\#id** and **.class**, for example, **\#containerId>.content**. |
The following is an example:
| Selector | Example | Description |
| ------------------------- | ------------------------------------- | ---------------------------------------- |
| .class | .container | Selects all components whose **class** is **container**. |
| \#id | \#titleId | Selects all components whose **id** is **titleId**. |
| tag | text | Selects all **\<text>** components. |
| , | .title, .content | Selects all components whose **class** is **title** or **content**. |
| \#id .class tag | \#containerId .content text | Selects all grandchild **\<text>** components whose grandparent components are identified as **containerId** and whose parent components are of the **content** class. To select child components, use **>** to replace the space between **\#id** and **.class**, for example, **\#containerId>.content**.|
Example:
```html
<!-- Page layoutxxx.hml -->
<!-- Pagelayoutexample.hml -->
<div id="containerId" class="container">
<text id="titleId" class="title">Title</text>
<div class="content">
......@@ -82,18 +77,17 @@ The following is an example:
</div>
```
```css
/* Page style xxx.css */
/* Pagestyleexample.css */
/* Set the style for all <div> components. */
div {
flex-direction: column;
}
/* Set the style for the component whose class is title.*/
/* Set the style for the components whose class is title. */
.title {
font-size: 30px;
}
/* Set the style for the component whose id is contentId. */
/* Set the style for the components whose id is contentId. */
#contentId {
font-size: 20px;
}
......@@ -101,11 +95,11 @@ div {
.title, .content {
padding: 5px;
}
/* Set the style for all texts of components whose class is container.*/
/* Set the style for all texts of components whose class is container. */
.container text {
color: \#007dff;
color: #007dff;
}
/* Set the style for direct descendant texts of components whose class is container.*/
/* Set the style for direct descendant texts of components whose class is container. */
.container &gt; text {
color: #fa2a2d;
}
......@@ -115,31 +109,29 @@ The above style works as follows:
![en-us_image_0000001267607889](figures/en-us_image_0000001267607889.png)
In the preceding example, .container text sets title and content to blue, and .container > text sets title to red. The two styles have the same priority, but .container > text declares the style later and overwrites the former style. (For details about the priority, see [Selector Specificity](#selector-specificity).)
In the preceding example, **.container text** sets title and content to blue, and **.container > text** sets title to red. The two styles have the same priority, but **.container > text** declares the style later and overwrites the former style. For details about the priority, see [Selector Specificity](#selector-specificity).
## Selector Specificity
The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, id, class, tag, grandchild components, and child components. (Inline styles are those declared in the style attribute.)
The specificity rule of the selectors complies with the W3C rule, which is only available for inline styles, **id**, **class**, **tag**, grandchild components, and child components. (Inline styles are those declared in the **style** attribute.)
When multiple selectors point to the same element, their priorities are as follows (in descending order): inline style > id > class > tag.
When multiple selectors point to the same element, their priorities are as follows (in descending order): inline style > **id** > **class** > **tag**.
## Pseudo-classes
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, :disabled can be used to select the element whose disabled attribute is true.
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, :focus:checked selects the element whose focus and checked attributes are both set to true. The following table lists the supported single pseudo-class in descending order of priority.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected elements. For example, **:disabled** can be used to select the element whose **disabled** attribute is **true**.
| Pseudo-class | Available Components | Description |
| -------- | -------- | -------- |
| :disabled | Components that support the disabled attribute | Selects the element whose disabled attribute is changed to true (unavailable for animation attributes). |
| :active | Components that support the click event | Selects the element activated by a user. For example, a pressed button or a selected tab-bar (unavailable for animation attributes). |
| :waiting | button | Selects the element whose waiting attribute is true (unavailable for animation attributes). |
| :checked | input[type="checkbox", type="radio"], and switch | Selects the element whose checked attribute is true (unavailable for animation attributes). |
In addition to a single pseudo-class, a combination of pseudo-classes is supported. For example, **:focus:checked** selects the element whose **focus** and **checked** attributes are both set to **true**. The following table lists the supported single pseudo-class in descending order of priority.
The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
| Pseudo-class | Available Components | Description |
| --------- | ---------------------------------------- | ---------------------------------------- |
| :disabled | Components that support the **disabled** attribute | Selects the element whose **disabled** attribute is changed to **true** (unavailable for animation attributes). |
| :active | Components that support the click event<br> | Selects the element activated by a user. For example, a pressed button or a selected **tab-bar** (unavailable for animation attributes).|
| :waiting | button | Selects the element whose **waiting** attribute is **true** (unavailable for animation attributes). |
| :checked | input[type="checkbox", type="radio"], switch| Selects the element whose **checked** attribute is **true** (unavailable for animation attributes). |
The following is an example for you to use the **:active** pseudo-class to control the style when a user presses the button.
```html
<!-- index.hml -->
......@@ -151,32 +143,30 @@ The following is an example for you to use the **:active** pseudo-class to contr
```css
/* index.css */
.button:active {
background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
background-color: #888888;/* After the button is activated, the background color is changed to #888888. */
}
```
> **NOTE**
>
> Pseudo-classes are not supported for the **\<popup>** component and its child components, including **\<popup>**, **\<dialog>**, **\<menu>**, **\<option>**, and **\<picker>**.
> Pseudo-classes are not supported for the **\<popup>** component and its child components, including, **\<dialog>**, **\<menu>**, **\<option>**, and **\<picker>**.
## Precompiled Styles
Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original .css file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
Precompilation is a program that uses specific syntax to generate CSS files. It provides variables and calculation, helping you define component styles more conveniently. Currently, Less, Sass, and Scss are supported. To use precompiled styles, change the suffix of the original **.css** file. For example, change **index.css** to **index.less**, **index.sass**, or **index.scss**.
- The following index.less file is changed from index.css.
- The following **index.less** file is changed from **index.css**.
```less
/* index.less */
/* Define a variable. */
@colorBackground: #000000;
.container {
background-color: @colorBackground; /* Use the variable defined in the .less file. */
background-color: @colorBackground; /* Use the variable defined in the .less file. */
}
```
- Reference a precompiled style file. For example, if the **style.scss** file is located in the common directory, change the original index.css file to **index.scss** and import **style.scss**.
- Reference a precompiled style file. For example, if the **style.scss** file is located in the **common** directory, change the original **index.css** file to **index.scss** and import **style.scss**.
```scss
/* style.scss */
/* Define a variable. */
......@@ -185,20 +175,18 @@ Precompilation is a program that uses specific syntax to generate CSS files. It
Reference the precompiled style file in **index.scss**:
```scss
/* index.scss */
/* Import style.scss. */
@import '../../common/style.scss';
.container {
background-color: $colorBackground; /* Use the variable defined in style.scss. */
background-color: $colorBackground; /* Use the variable defined in style.scss. */
}
```
> **NOTE**
>
> Place precompiled style files in the common directory.
> Place precompiled style files in the **common** directory.
## CSS Style Inheritance<sup>6+</sup>
......
en/application-dev/ui/ts-general-ui-concepts.md
浏览文件 @ 8e820396
# Basic Concepts
The TypeScript-based declarative development paradigm provides a wide array of basic components, which can be combined and extended in a declarative manner to describe the UI of an application. It also provides basic data binding and event processing mechanisms to help you implement the application interaction logic.
The eTS-based declarative development paradigm provides a wide array of basic components, which can be combined and extended in a declarative manner to describe the UI of an application. It also provides basic data binding and event processing mechanisms to help you implement the application interaction logic.
## HelloWorld Example
......@@ -23,7 +23,7 @@ struct Hello {
Button() {
Text('Click me')
.fontColor(Color.Red)
}.onClick(() =&gt; {
}.onClick(() => {
this.myText = 'UI'
})
.width(500)
......@@ -38,14 +38,14 @@ struct Hello {
The preceding sample code shows the structure of a simple page. It involves the following basic concepts:
- Decorator: a special kind of declaration that can be applied to classes, structures, methods, and variables. In the sample code, @Entry, @Component, and @State are decorators.
- Decorator: a special kind of declaration that can be applied to classes, structures, methods, and variables. In the sample code, **@Entry**, **@Component**, and **@State** are decorators.
- Custom component: a reusable UI unit, which can be combined with other components. In the sample code, struct Hello decorated by @Component is a custom component.
- Custom component: a reusable UI unit, which can be combined with other components. In the sample code, struct Hello decorated by **@Component** is a custom component.
- UI description: declaratively describes the UI structure. In the sample code, the block of code in the build() method provides the UI description.
- Built-in component: the default basic or layout component preset in the framework. You can directly invoke these components, such as &lt;Column&gt;, &lt;Text&gt;, &lt;Divider&gt;, and &lt;Button&gt; components in the sample code.
- Built-in component: the default basic or layout component preset in the framework. You can directly invoke these components, such as **\<Column>**, **\<Text>**, **\<Divider>**, and **\<Button>** components in the sample code.
- Attribute method: a method used to configure component attributes, such as fontSize(), width(), height(), and color().
- Attribute method: a method used to configure component attributes, such as **fontSize()**, **width()**, **height()**, and **color()**.
- Event method: a method used to add the component response logic to an event. In the sample code, the onClick method is added for the Button component for defining the click response logic.
- Event method: a method used to add the component response logic to an event. In the sample code, the **onClick** method is added for the Button component for defining the click response logic.
en/application-dev/ui/ui-js-custom-components.md
浏览文件 @ 8e820396
# Custom Components
The ArkUI that uses the JavaScript-based web-like development paradigm supports custom components for you to extend existing components. You can encapsulate custom private attributes and events into new components to reuse them multiple times in your project. This also improves code readability. The following is an example:
The ArkUI that uses the JavaScript-compatible web-like development paradigm supports custom components for you to extend existing components. You can encapsulate custom private attributes and events into new components to reuse them multiple times in your project. This also improves code readability. The following is an example:
- Building a custom component
```
```html
<!-- comp.hml -->
<div class="item">
<text class="title-style">{{title}}</text>
......@@ -15,8 +15,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
</div>
```
```
```css
/* comp.css */
.item {
width: 700px;
......@@ -40,8 +39,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
}
```
```
```js
// comp.js
export default {
props: {
......@@ -64,7 +62,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
- Introducing the custom component
```
```html
<!-- xxx.hml -->
<element name='comp' src='../../common/component/comp.hml'></element>
<div class="container">
......@@ -73,8 +71,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
</div>
```
```
```css
/* xxx.css */
.container {
background-color: #f8f8ff;
......@@ -84,8 +81,7 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
}
```
```
```js
// xxx.js
export default {
data: {
......@@ -101,6 +97,6 @@ The ArkUI that uses the JavaScript-based web-like development paradigm supports
In this example, the parent component passes the customized attribute through title to the child component, and the child component receives the attribute value in props. The child component passes text to the parent through the bound event, and the passed value is obtained via e.detail. To successfully bind the child component event to the parent component, ensure that the event name meet the requirements for event binding. For details, see [Basic Usage of Custom Components](../reference/arkui-js/js-components-custom-basic-usage.md). The following figures show how the custom component works.
figure1 Running effect
**Figure 1** Running effect
![en-us_image_0000001222807816](figures/en-us_image_0000001222807816.png)
![en-us_image_0000001222807816](figures/en-us_image_0000001222807816.png)
en/application-dev/ui/ui-ts-overview.md
浏览文件 @ 8e820396
# Overview
The TypeScript-based declarative development paradigm of ArkUI is a simplified, high-performance UI development framework for cross-device applications.
The eTS-based declarative development paradigm of ArkUI is a simplified, high-performance UI development framework for cross-device applications.
## Basic Capabilities
In ArkUI that uses the TypeScript-based declarative development paradigm, the programming mode is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. The UI capabilities are provided from three dimensions: component, animation, and state management. System capability APIs are also provided to allow for effortless invocation of system capabilities.
In ArkUI that uses the eTS-based declarative development paradigm, the programming mode is closer to natural semantics. You can intuitively describe the UI without caring about how the framework implements UI drawing and rendering, leading to simplified and efficient development. The UI capabilities are provided from three dimensions: component, animation, and state management. System capability APIs are also provided to allow for effortless invocation of system capabilities.
For details about the UI components, see [Component Reference (TypeScript-based Declarative Development Paradigm)](../reference/arkui-ts/ts-universal-events-click.md).
For details about the UI components, see [Component Reference (eTS-based Declarative Development Paradigm)](../reference/arkui-ts/ts-universal-events-click.md).
- Out-of-the-box components
......@@ -39,20 +39,20 @@ For details about the UI components, see [Component Reference (TypeScript-based
- Declarative UI frontend
Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
Provides basic language specifications of the UI development paradigm, built-in UI components, layouts, and animations, and multiple state management mechanisms, with a wide array of APIs for you to call as required.
- Language runtime
Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance running environment of the TS language.
Provides the parsing capability for the UI paradigm syntax and allows for cross-language API calls for a high-performance running environment of the eTS language.
- Declarative UI backend engine
Provides UI rendering pipelines that are compatible with different development paradigms, multiple basic components, layout calculation, dynamic effects, and interaction events, with state management and drawing capabilities.
Provides UI rendering pipelines that are compatible with different development paradigms, multiple basic components, layout calculation, dynamic effects, and interaction events, with state management and drawing capabilities.
- Render engine
Provides efficient drawing capabilities, which enable rendering instructions collected by the rendering pipeline to be drawn to the screen.
Provides efficient drawing capabilities, which enable rendering instructions collected by the rendering pipeline to be drawn to the screen.
- Porting layer
Provides abstract APIs to connect to different systems, such as system rendering pipelines and lifecycle scheduling.
Provides abstract APIs to connect to different systems, such as system rendering pipelines and lifecycle scheduling.
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或