diff --git a/en/application-dev/reference/arkui-ts/Readme-EN.md b/en/application-dev/reference/arkui-ts/Readme-EN.md index 5e5e1e6e82959ae4b6b56f23c354720f02fbf700..1d668f270f754d5a5c5a64b2d1bd1c4291081a20 100644 --- a/en/application-dev/reference/arkui-ts/Readme-EN.md +++ b/en/application-dev/reference/arkui-ts/Readme-EN.md @@ -10,7 +10,6 @@ - [Focus Event](ts-universal-focus-event.md) - [Mouse Event](ts-universal-mouse-key.md) - [Component Area Change Event](ts-universal-component-area-change-event.md) - - [Visible Area Change Event](ts-universal-component-visible-area-change-event.md) - Universal Attributes - [Size](ts-universal-attributes-size.md) - [Location](ts-universal-attributes-location.md) diff --git a/en/application-dev/reference/arkui-ts/ts-container-swiper.md b/en/application-dev/reference/arkui-ts/ts-container-swiper.md index b25c576613e6c228df9320f0a6b6048847aa4e85..161e30cef3b73797b6e14be707306f38eb80b175 100644 --- a/en/application-dev/reference/arkui-ts/ts-container-swiper.md +++ b/en/application-dev/reference/arkui-ts/ts-container-swiper.md @@ -1,8 +1,7 @@ # Swiper -The **** component provides a container that allows users to switch among child components through swiping. - +The **\** component provides a container that allows users to switch among child components using swipe gestures. > **NOTE** > @@ -23,49 +22,94 @@ This component can contain child components. Swiper(value:{controller?: SwiperController}) -- Parameters - | Name | Type | Mandatory | Default Value | Description | - | -------- | -------- | -------- | -------- | -------- | - | controller | [SwiperController](#swipercontroller) | No | null | Controller bound to the component to control the page switching. | +**Parameters** +| Name | Type | Mandatory | Description | +| ---------- | ------------------------------------- | ---- | -------------------- | +| controller | [SwiperController](#swipercontroller) | No | Controller bound to the component to control the page switching.
Default value: **null** | -## Attributes -| Name | Type | Default Value | Description | -| -------- | -------- | -------- | -------- | -| index | number | 0 | Index of the child component currently displayed in the container. | -| autoPlay | boolean | false | Whether to enable automatic playback for child component switching. If this attribute is **true**, the indicator dots do not take effect. | -| interval | number | 3000 | Interval for automatic playback, in ms. | -| indicator | boolean | true | Whether to enable the navigation dots. | -| loop | boolean | true | Whether to enable loop playback.
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. | -| duration | number | 400 | Duration of the animation for switching child components, in ms. | -| vertical | boolean | false | Whether vertical swiping is used. | -| itemSpace | Length | 0 | Space between child components. | -| cachedCount8+ | number | 1 | Number of child components to be cached. | -| disableSwipe8+ | boolean | false | Whether to disable the swipe feature. | -| curve8+ | [Curve](ts-animatorproperty.md) \| Curves | Curve.Ease | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using APIs provided by the interpolation calculation module. | -| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
color?: Color,
selectedColor?: Color
} | - | Style of the navigation dots indicator.
- **left**: distance between the navigation dots indicator and the left edge of the **\** component.
- **top**: distance between the navigation dots indicator and the top edge of the **\** component.
- **right**: distance between the navigation dots indicator and the right edge of the **\** component.
- **bottom**: distance between the navigation dots indicator and the right edge of the **\** component.
- **size**: diameter of the navigation dots indicator.
- **color**: color of the navigation dots indicator.
- **selectedColor**: color of the selected navigation dot. | +## Attributes +[Menu control](ts-universal-attributes-menu.md) is not supported. + +| Name | Type | Description | +| --------------------------- | ---------------------------------------- | ---------------------------------------- | +| index | number | Index of the child component currently displayed in the container.
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.
Default value: **false** | +| interval | number | Interval for automatic playback, in ms.
Default value: **3000** | +| indicator | boolean | Whether to enable the navigation dots indicator.
Default value: **true** | +| loop | boolean | Whether to enable loop playback.
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.
Default value: **true**| +| duration | number | Duration of the animation for switching child components, in ms.
Default value: **400** | +| vertical | boolean | Whether vertical swiping is used.
Default value: **false** | +| itemSpace | Length | Space between child components.
Default value: **0** | +| displayMode | SwiperDisplayMode | Mode in which elements are displayed along the main axis. This attribute takes effect only when **displayCount** is not set.
Default value: **SwiperDisplayMode.Stretch**| +| cachedCount8+ | number | Number of child components to be cached.
Default value: **1** | +| disableSwipe8+ | boolean | Whether to disable the swipe feature.
Default value: **false** | +| curve8+ | [Curve](ts-animatorproperty.md#Curve) \| string | Animation curve. The ease-in/ease-out curve is used by default. For details about common curves, see [Curve enums](ts-animatorproperty.md#curve-enums). You can also create custom curves ([interpolation curve objects](ts-interpolation-calculation.md)) by using the API provided by the interpolation calculation module.
Default value: **Curve.Ease**| +| indicatorStyle8+ | {
left?: Length,
top?: Length,
right?: Length,
bottom?: Length,
size?: Length,
color?: Color,
selectedColor?: Color
} | Style of the navigation dots indicator.
- **left**: distance between the navigation dots indicator and the left edge of the **\** component.
- **top**: distance between the navigation dots indicator and the top edge of the **\** component.
- **right**: distance between the navigation dots indicator and the right edge of the **\** component.
- **bottom**: distance between the navigation dots indicator and the bottom edge of the **\** component.
- **size**: diameter of the navigation dots indicator.
- **color**: color of the navigation dots indicator.
- **selectedColor**: color of the selected navigation dot.| +| displayCount8+ | number\|string | Number of elements to display.
Default value: **1** | +| effectMode8+ | EdgeEffect | Swipe effect. For details, see **EdgeEffect**.
Default value: **EdgeEffect.Spring**| + +## SwiperDisplayMode + +| Name| Description| +| ----------- | ------------------------------------------ | +| Stretch | The slide width of the **\** component is equal to the width of the component.| +| AutoLinear | The slide width of the **\** component is equal to the maximum width of the child components.| + +## EdgeEffect + +| Name | Description | +| ------ | ------------------------------------------------------------------------- | +| Spring | Spring effect. When at one of the edges, the component can move beyond the bounds through touches, and produce a bounce effect when the user releases their finger. | +| Fade | Fade effect. When at one of the edges, the component can move beyond the bounds through touches, and produce a fade effect along the way; when the user releases their finger, the fade changes. | +| None | No effect. When at one of the edges, the component cannot move beyond the bounds. | ## SwiperController -Controller of the **** component. You can bind this object to the **** component and use it to control page switching. +Controller of the **\** component. You can bind this object to the **** component and use it to control page switching. + +### showNext + +showNext(): void + +Turns to the next page. + +### showPrevious + +showPrevious(): void + +Turns to the previous page. -| Name | Description | -| -------- | -------- | -| showNext():void | Turns to the next page. | -| showPrevious():void | Turns to the previous page. | +### finishAnimation +finishAnimation(callback?: () => void): void + +Stops this animation. + +**Parameters** + +| Name | Type | Mandatory.| Description| +| --------- | ---------- | ------ | -------- | +| callback | () => void | Yes | Callback invoked when the animation stops.| ## Events -| Name | Description | -| -------- | -------- | -| onChange( index: number) => void | Triggered when the index of the currently displayed component changes. | +### onChange +onChange( index: number) => void -## Example +Triggered when the index of the currently displayed component changes. +**Parameters** + +| Name | Type | Mandatory.| Description| +| --------- | ---------- | ------ | -------- | +| index | number | Yes | Index of the currently displayed element.| + + +## Example ```ts // xxx.ets @@ -123,7 +167,7 @@ struct SwiperExample { .duration(1000) .vertical(false) // Horizontal swiping is enabled by default. .itemSpace(0) - .curve(Curve.Linear) // Animation curve + .curve(Curve.Linear) // Animation curve. .onChange((index: number) => { console.info(index.toString()) }) diff --git a/en/application-dev/ui/figures/create-resource-file-1.png b/en/application-dev/ui/figures/create-resource-file-1.png new file mode 100644 index 0000000000000000000000000000000000000000..a6d82caac558cd58b78aba3014b6ac60148f6bc8 Binary files /dev/null and b/en/application-dev/ui/figures/create-resource-file-1.png differ diff --git a/en/application-dev/ui/figures/create-resource-file-2.png b/en/application-dev/ui/figures/create-resource-file-2.png new file mode 100644 index 0000000000000000000000000000000000000000..b4d23e8dc15bafbb08ca691575ce2ea9fe989e91 Binary files /dev/null and b/en/application-dev/ui/figures/create-resource-file-2.png differ diff --git a/en/application-dev/ui/figures/create-resource-file-3.png b/en/application-dev/ui/figures/create-resource-file-3.png new file mode 100644 index 0000000000000000000000000000000000000000..566653c5e49753e1f04d0d6b5b5c3e931f4354b5 Binary files /dev/null and b/en/application-dev/ui/figures/create-resource-file-3.png differ