You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/react/slides.md
+16-23Lines changed: 16 additions & 23 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Slides
2
+
title: Migrating From IonSlides to Swiper.js
3
3
---
4
4
5
5
<head>
@@ -16,12 +16,13 @@ title: Slides
16
16
17
17
:::
18
18
19
-
:::note
20
-
This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
21
-
:::
19
+
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration.
22
20
21
+
:::note
22
+
Swiper's React component is set to be removed in a future release of Swiper, with <ahref="https://swiperjs.com/element"target="_blank"rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the React component because it provides the most stable experience at the time of writing. Notably, React does not have strong support for Web Components yet.
23
23
24
-
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for React set up in your Ionic Framework application. It will also go over any migration information you may need to move from `IonSlides` to the official Swiper React integration.
24
+
Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework.
Once that is done, install the Swiper dependency in your project:
35
36
36
37
```shell
37
-
npm install swiper@8
38
+
npm install swiper@latest
38
39
```
39
40
40
41
:::note
@@ -43,7 +44,7 @@ Create React App does not support pure ESM packages yet. Developers can still us
43
44
44
45
## Swiping with Style
45
46
46
-
Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `ion-slides`.
47
+
Next, we need to import the base Swiper styles. We are also going to import the styles that Ionic provides which will let us customize the Swiper styles using the same CSS Variables that we used with `IonSlides`.
47
48
48
49
We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed:
49
50
@@ -64,13 +65,11 @@ export default Home;
64
65
```
65
66
66
67
:::note
67
-
Importing `@ionic/react/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
68
+
Importing `@ionic/react/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `IonSlides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
68
69
:::
69
70
70
71
:::note
71
-
72
72
Not using Create React App? You can import the Swiper CSS from `swiper/css` instead.
73
-
74
73
:::
75
74
76
75
### Updating Selectors
@@ -153,16 +152,14 @@ export default Home;
153
152
```
154
153
155
154
:::note
156
-
157
155
Not using Create React App? You can import the Swiper components from `swiper/react` instead.
158
-
159
156
:::
160
157
161
158
## Using Modules
162
159
163
160
By default, Swiper for React does not import any additional modules. To use modules such as Navigation or Pagination, you need to import them first.
164
161
165
-
`ion-slides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
162
+
`IonSlides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules.
166
163
167
164
To begin, we need to import the modules and their corresponding CSS files from the `swiper` package:
168
165
@@ -197,9 +194,7 @@ export default Home;
197
194
```
198
195
199
196
:::note
200
-
201
197
Not using Create React App? You can import these modules from `swiper/css/[MODULE NAME]` instead (i.e. `swiper/css/autoplay`).
202
-
203
198
:::
204
199
205
200
From here, we need to provide these modules to Swiper by using the `modules` property on the `Swiper` component:
@@ -279,7 +274,7 @@ See <a href="https://swiperjs.com/react#usage" target="_blank" rel="noopener nor
279
274
280
275
## The IonicSlides Module
281
276
282
-
With `ion-slides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
277
+
With `IonSlides`, Ionic automatically customized dozens of Swiper properties. This resulted in an experience that felt smooth when swiping on mobile devices. We recommend using the `IonicSlides` module to ensure that these properties are also set when using Swiper directly. However, using this module is **not** required to use Swiper.js in Ionic.
283
278
284
279
We can install the `IonicSlides` module by importing it from `@ionic/react` and passing it in as the last item in the `modules` array:
285
280
@@ -428,7 +423,7 @@ Below is a full list of event name changes when going from `IonSlides` to Swiper
428
423
| onIonSlidesDidLoad | onInit |
429
424
430
425
:::note
431
-
All events available in Swiper React can be found at <ahref="https://swiperjs.com/react#swiper-events"target="_blank"rel="noopener noreferrer">https://swiperjs.com/react#swiper-events</a>.
426
+
All events available in Swiper can be found at <ahref="https://swiperjs.com/swiper-api#events"target="_blank"rel="noopener noreferrer">https://swiperjs.com/swiper-api#events</a>.
432
427
:::
433
428
434
429
## Methods
@@ -460,7 +455,7 @@ From here, if you wanted to access a property on the Swiper instance you would a
460
455
461
456
Below is a full list of method changes when going from `IonSlides` to Swiper React:
Copy file name to clipboardExpand all lines: docs/utilities/animations.md
+34-23Lines changed: 34 additions & 23 deletions
Original file line number
Diff line number
Diff line change
@@ -16,11 +16,11 @@ import TabItem from '@theme/TabItem';
16
16
17
17
## Overview
18
18
19
-
Ionic Animations is a utility that allows developers to build complex animations in a platformagnostic manner. Developers do not need to be using a particular framework such as React or Angular, nor do they even need to be building an Ionic app. As long as developers have access to v5.0 or greater of Ionic Framework, they will have access to all of Ionic Animations.
19
+
Ionic Animations is a tool that enables developers to create complex animations in a platform-agnostic manner, without requiring a specific framework or an Ionic app.
20
20
21
-
Building efficient animations can be tricky. Developers are often limited by the libraries available to them as well as the hardware that their apps run on. On top of that, many animation libraries use a JavaScript-driven approach to running animations where they handle the calculation of your animation's values at every step in a `requestAnimationFrame` loop. This reduces the scalability of your animations as the library is constantly computing values and using up CPU time.
21
+
Creating efficient animations can be challenging, as developers are limited by the available libraries and hardware resources of the device. Moreover, many animation libraries use a JavaScript-driven approach, which can reduce the scalability of animations and use up CPU time.
22
22
23
-
Ionic Animationsuses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) to build and run your animations. In doing this, we offload all work required to compute and run your animations to the browser. As a result, this allows the browser to make any optimizations it needs and ensures your animations run as smoothly as possible. While most browsers support a basic implementation of Web Animations, we fallback to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) for browsers that do not support Web Animations. The performance difference in switching between these two should typically be negligible.
23
+
Ionic Animations, on the other hand, uses the [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API), which offloads all the computation and running of animations to the browser. This approach allows the browser to optimize the animations and ensure their smooth execution. In cases where Web Animations are not supported, Ionic Animations will fall back to [CSS Animations](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations), which should have a negligible difference in performance.
Due to a bug in Safari versions 9-11, stepping through animations via `progressStep` is not supported. This is supported on Safari 12+.
1552
-
:::
1553
1563
1554
-
## Types
1564
+
`opts` are additional options that are specific to the custom animation. For example, the sheet modal enter animation includes information for the current breakpoint.
Copy file name to clipboardExpand all lines: docs/vue/slides.md
+8-9Lines changed: 8 additions & 9 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,5 @@
1
1
---
2
-
title: Slides
2
+
title: Migrating From ion-slides to Swiper.js
3
3
---
4
4
5
5
<head>
@@ -11,17 +11,16 @@ title: Slides
11
11
</head>
12
12
13
13
:::caution Looking for `ion-slides`?
14
-
15
14
`ion-slides` was deprecated in v6.0.0 and removed in v7.0.0. We recommend using the Swiper.js library directly. The migration process is detailed below.
16
-
17
15
:::
18
16
19
-
:::note
20
-
This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon!
21
-
:::
17
+
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration.
22
18
19
+
:::note
20
+
Swiper's Vue component is set to be removed in a future release of Swiper, with <ahref="https://swiperjs.com/element"target="_blank"rel="noopener noreferrer">Swiper Element</a> as the replacement. However, this guide shows how to migrate to the Vue component because it provides the most stable experience at the time of writing.
23
21
24
-
We recommend <ahref="http://swiperjs.com/"target="_blank"rel="noopener noreferrer">Swiper.js</a> if you need a modern touch slider component. This guide will go over how to get Swiper for Vue set up in your Ionic Framework application. It will also go over any migration information you may need to move from `ion-slides` to the official Swiper Vue integration.
22
+
Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework.
23
+
:::
25
24
26
25
## Getting Started
27
26
@@ -40,7 +39,7 @@ vue upgrade --next
40
39
Once that is done, install the Swiper dependency in your project:
41
40
42
41
```shell
43
-
npm install swiper@8
42
+
npm install swiper@latest
44
43
```
45
44
46
45
## Swiping with Style
@@ -63,7 +62,7 @@ We recommend importing the styles in the component in which Swiper is being used
63
62
```
64
63
65
64
:::note
66
-
Importing `@ionic/vue/css/ionic-swiper.css'` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
65
+
Importing `@ionic/vue/css/ionic-swiper.css` is **not** required to use Swiper.js with Ionic. This files is used for backward-compatibility with the `ion-slides` component and can be safely omitted if you prefer not to use the CSS Variables provided in the stylesheet.
0 commit comments