From 356f99eba570e60f5dbbf63b1e4530b47c14a24d Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Fri, 10 Mar 2023 13:19:02 -0600 Subject: [PATCH 1/5] update React docs --- docs/react/slides.md | 39 +++++++++------------- versioned_docs/version-v6/react/slides.md | 40 ++++++++++------------- 2 files changed, 33 insertions(+), 46 deletions(-) diff --git a/docs/react/slides.md b/docs/react/slides.md index 158e9933fe7..3a34591e4d0 100644 --- a/docs/react/slides.md +++ b/docs/react/slides.md @@ -1,5 +1,5 @@ --- -title: Slides +title: Migrating From IonSlides to Swiper.js --- @@ -16,12 +16,13 @@ title: Slides ::: -:::note -This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon! -::: +We recommend Swiper.js 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. +:::note +Swiper's React component is set to be removed in a future release of Swiper, with Swiper Element 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 custom elements yet. -We recommend Swiper.js 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. +Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework. +::: ## Getting Started @@ -34,7 +35,7 @@ npm install @ionic/react@latest @ionic/react-router@latest Once that is done, install the Swiper dependency in your project: ```shell -npm install swiper@8 +npm install swiper@latest ``` :::note @@ -43,7 +44,7 @@ Create React App does not support pure ESM packages yet. Developers can still us ## Swiping with Style -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`. +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`. We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed: @@ -64,13 +65,11 @@ export default Home; ``` :::note -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. +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. ::: :::note - Not using Create React App? You can import the Swiper CSS from `swiper/css` instead. - ::: ### Updating Selectors @@ -153,16 +152,14 @@ export default Home; ``` :::note - Not using Create React App? You can import the Swiper components from `swiper/react` instead. - ::: ## Using Modules 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. -`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. +`IonSlides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules. To begin, we need to import the modules and their corresponding CSS files from the `swiper` package: @@ -197,9 +194,7 @@ export default Home; ``` :::note - Not using Create React App? You can import these modules from `swiper/css/[MODULE NAME]` instead (i.e. `swiper/css/autoplay`). - ::: From here, we need to provide these modules to Swiper by using the `modules` property on the `Swiper` component: @@ -279,7 +274,7 @@ See https://swiperjs.com/react#swiper-events. +All events available in Swiper can be found at https://swiperjs.com/swiper-api#events. ::: ## Methods @@ -460,7 +455,7 @@ From here, if you wanted to access a property on the Swiper instance you would a Below is a full list of method changes when going from `IonSlides` to Swiper React: -| ion-slides Method | Notes | +| IonSlides Method | Notes | | ------------------ | ------------------------------------------------------------------------------------ | | getActiveIndex() | Use the `activeIndex` property instead. | | getPreviousIndex() | Use the `previousIndex` property instead. | @@ -491,7 +486,7 @@ const Home: React.FC = () => { return ( - + Slide 1 Slide 2 Slide 3 @@ -519,7 +514,7 @@ const Home: React.FC = () => { return ( - + Slide 1 Slide 2 Slide 3 @@ -532,9 +527,7 @@ export default Home; ``` :::note - Not using Create React App? You can import these effects from `swiper/css/[EFFECT NAME]` instead (i.e. `swiper/css/effect-fade`). - ::: After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`: @@ -553,7 +546,7 @@ const Home: React.FC = () => { return ( - + Slide 1 Slide 2 Slide 3 diff --git a/versioned_docs/version-v6/react/slides.md b/versioned_docs/version-v6/react/slides.md index 19d2b709458..28637e3a651 100644 --- a/versioned_docs/version-v6/react/slides.md +++ b/versioned_docs/version-v6/react/slides.md @@ -1,5 +1,5 @@ --- -title: Slides +title: Migrating From IonSlides to Swiper.js --- @@ -10,14 +10,16 @@ title: Slides /> -:::note -This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon! -::: - We recommend Swiper.js if you need a modern touch slider component. It powers our `IonSlides` component, but we now recommend that developers use Swiper for React directly. 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. +:::note +Swiper's React component is set to be removed in a future release of Swiper, with Swiper Element 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 custom elements yet. + +Using Swiper's React component is **not** required to use Swiper.js with Ionic Framework. +::: + ## Getting Started First, update to the latest version of Ionic: @@ -29,7 +31,7 @@ npm install @ionic/react@latest @ionic/react-router@latest Once that is done, install the Swiper dependency in your project: ```shell -npm install swiper@8 +npm install swiper@latest ``` :::note @@ -38,7 +40,7 @@ Create React App does not support pure ESM packages yet. Developers can still us ## Swiping with Style -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`. +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`. We recommend importing the styles in the component in which Swiper is being used. This ensures that the styles are only loaded when needed: @@ -59,13 +61,11 @@ export default Home; ``` :::note -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. +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. ::: :::note - Not using Create React App? You can import the Swiper CSS from `swiper/css` instead. - ::: ### Updating Selectors @@ -148,16 +148,14 @@ export default Home; ``` :::note - Not using Create React App? You can import the Swiper components from `swiper/react` instead. - ::: ## Using Modules 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. -`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. +`IonSlides` automatically included the Pagination, Scrollbar, Autoplay, Keyboard, and Zoom modules. This part of the guide will show you how to install these modules. To begin, we need to import the modules and their corresponding CSS files from the `swiper` package: @@ -192,9 +190,7 @@ export default Home; ``` :::note - Not using Create React App? You can import these modules from `swiper/css/[MODULE NAME]` instead (i.e. `swiper/css/autoplay`). - ::: From here, we need to provide these modules to Swiper by using the `modules` property on the `Swiper` component: @@ -274,7 +270,7 @@ See https://swiperjs.com/react#swiper-events. +All events available in Swiper can be found at https://swiperjs.com/swiper-api#events. ::: ## Methods @@ -455,7 +451,7 @@ From here, if you wanted to access a property on the Swiper instance you would a Below is a full list of method changes when going from `IonSlides` to Swiper React: -| ion-slides Method | Notes | +| IonSlides Method | Notes | | ------------------ | ------------------------------------------------------------------------------------ | | getActiveIndex() | Use the `activeIndex` property instead. | | getPreviousIndex() | Use the `previousIndex` property instead. | @@ -486,7 +482,7 @@ const Home: React.FC = () => { return ( - + Slide 1 Slide 2 Slide 3 @@ -514,7 +510,7 @@ const Home: React.FC = () => { return ( - + Slide 1 Slide 2 Slide 3 @@ -527,9 +523,7 @@ export default Home; ``` :::note - Not using Create React App? You can import these effects from `swiper/css/[EFFECT NAME]` instead (i.e. `swiper/css/effect-fade`). - ::: After that, we can activate it by setting the `effect` property on `swiper` to `"fade"`: @@ -548,7 +542,7 @@ const Home: React.FC = () => { return ( - + Slide 1 Slide 2 Slide 3 From 100d3dc7b7d9c2bab27692eb166cb4435cb96fed Mon Sep 17 00:00:00 2001 From: amandaesmith333 Date: Mon, 13 Mar 2023 12:57:33 -0500 Subject: [PATCH 2/5] update Vue docs --- docs/vue/slides.md | 97 ++++++++++++------------- versioned_docs/version-v6/vue/slides.md | 96 ++++++++++++------------ 2 files changed, 97 insertions(+), 96 deletions(-) diff --git a/docs/vue/slides.md b/docs/vue/slides.md index 6cda1c938de..75f2f7c909b 100644 --- a/docs/vue/slides.md +++ b/docs/vue/slides.md @@ -1,5 +1,5 @@ --- -title: Slides +title: Migrating From ion-slides to Swiper.js --- @@ -11,17 +11,16 @@ title: Slides :::caution Looking for `ion-slides`? - `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. - ::: -:::note -This migration guide is compatible with Swiper 8. An updated guide for Swiper 9 is coming soon! -::: +We recommend Swiper.js 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. +:::note +Swiper's Vue component is set to be removed in a future release of Swiper, with Swiper Element 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. -We recommend Swiper.js 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. +Using Swiper's Vue component is **not** required to use Swiper.js with Ionic Framework. +::: ## Getting Started @@ -40,7 +39,7 @@ vue upgrade --next Once that is done, install the Swiper dependency in your project: ```shell -npm install swiper@8 +npm install swiper@latest ``` ## Swiping with Style @@ -53,7 +52,7 @@ We recommend importing the styles in the component in which Swiper is being used