@@ -435,9 +435,9 @@ Sets a specified source as the wallpaper of a specified type. This API uses an a
| callback | AsyncCallback<void> | Yes | Callback used to return the result. If the operation is successful, the setting result is returned. Otherwise, error information is returned. |
The custom font can be loaded from the font file in a project. The font file must be in .ttf or .otf format.
> **NOTE**
>
> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
## Defining @font-face
```
@font-face {
font-family: HWfont;
src: url('/common/HWfont.ttf');
font-family: font;
src: url('/common/font.ttf');
}
```
...
...
@@ -19,9 +24,9 @@ Customize a font.
**src**
Supported sources of customized fonts:
Supported sources of custom fonts:
- Font file in the project: Specify the path of the font file in the project through **url**. (You can use absolute paths only. For details, see [Resources and File Access Rules](https://gitee.com/openharmony/docs/blob/master/en/application-dev/ui/js-framework-file.md#section6620355202117).)
- Font file in the project: Specify the absolute path of the font file in the project through **url**. For details, see [File Access Rules](../../ui/js-framework-file.md).
| 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. If this attribute is **true**, the navigation dots indicator does not take effect.<br>Default value: **false** |
| 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** |
| 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** |
| itemSpace | number \| string | Space between child components.<br>Default value: **0** |
| displayMode | SwiperDisplayMode | Mode in which child components are displayed.<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** |
| displayCount<sup>8+</sup>| number\|string | Number of child components to display per page. The value **auto** is equivalent to **SwiperDisplayMode.AutoLinear**.<br>Default value: **1** |
| 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. If this attribute is **true**, the navigation dots indicator does not take effect.<br>Default value: **false** |
| 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** |
| 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** |
| itemSpace | number \| string | Space between child components.<br>Default value: **0** |
| displayMode | SwiperDisplayMode | Mode in which child components are displayed.<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** |
| displayCount<sup>8+</sup> | number\|string | Number of child components to display per page. The value **auto** is equivalent to **SwiperDisplayMode.AutoLinear**.<br>Default value: **1** |
| 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](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation 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#resourcecolor8),<br>selectedColor?: [ResourceColor](ts-types.md#resourcecolor8)<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.|
**@Prop** and **@State** have the same semantics but different initialization modes. A **@Prop** decorated variable in a component must be initialized using the **@State** decorated variable in its parent component. The **@Prop** decorated variable can be modified in the component, but the modification is not updated to the parent component; the modification to the **@State** decorated variable is synchronized to the **@Prop** decorated variable. That is, **@Prop** establishes one-way data binding.
@Prop and @State have the same semantics but different initialization modes. Variables decorated by @Prop must be initialized using the @State decorated variable provided by their parent components. The @Prop decorated variable can be modified in the component, but the modification is not updated to the parent component; that is, @Prop uses one-way data binding.
The @Prop state data has the following features:
The **@Prop** decorated state variable has the following features:
- Support for simple types: The number, string, and boolean types are supported.
- Private: Data is accessed only within the component.
- Support for multiple instances: A component can have multiple attributes decorated by @Prop.
- Support for multiple instances: A component can have multiple attributes decorated by **@Prop**.
- Support for initialization with a value passed to the @Prop decorated variable: When a new instance of the component is created, all @Prop decorated variables must be initialized. Initialization inside the component is not supported.
- Support for initialization with a value passed to the **@Prop** decorated variable: When a new instance of the component is created, all **@Prop** decorated variables must be initialized. Initialization inside the component is not supported.
## Example
```
@Entry
@Component
...
...
@@ -66,7 +65,8 @@ struct CountDownComponent {
}
```
In the preceding example, when you press +1 or -1, the status of the parent component changes and the build method is executed again. In this case, a new CountDownComponent is created. The countDownStartValue property of the parent component is used to initialize the @Prop decorated variable of the child component. When you tap the Try again button of the child component, the value of the @Prop decorated variable count is changed. As a result, the CountDownComponent is rendered again. However, the change of the count value does not affect the countDownStartValue value of the parent component.
In the preceding example, when the user presses **+1** or **-1**, the status of the parent component changes and the **build** method is executed again. In this case, a new **CountDownComponent** instance is created. The **countDownStartValue** attribute of the parent component is used to initialize the **@Prop** decorated variable of the child component. When the **Try again** button of the child component is touched, the value of the **@Prop** decorated variable **count** is changed. As a result, the **CountDownComponent** is rendered again. However, the change of the **count** value does not affect the **countDownStartValue** value of the parent component.
