diff --git a/cspell-wordlist.txt b/cspell-wordlist.txt index 13a8a710581..bf433d7615a 100644 --- a/cspell-wordlist.txt +++ b/cspell-wordlist.txt @@ -39,6 +39,7 @@ flexbox frontmatter fullscreen geolocation +iconset interactives isopen jank diff --git a/docs/intro/cdn.md b/docs/intro/cdn.md index a90c4a6b250..5a230b5c939 100644 --- a/docs/intro/cdn.md +++ b/docs/intro/cdn.md @@ -1,156 +1,122 @@ --- -title: Ionic Packages +title: Ionic Packages & CDN sidebar_label: Packages & CDN --- - Ionic Framework Packages: CDN, Angular, Vue, and React + Ionic Framework Packages: CDN, Angular, Vue, React, and JavaScript -Ionic provides different packages that can be used to quickly get started using Ionic Framework or Ionicons in a test environment, Angular, any other framework, or none at all. +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; -## Ionic Framework CDN +Ionic Framework offers npm packages for Angular, React, Vue, and JavaScript, plus CDN links for quick prototyping. Choose your framework below to get started, or use the CDN to test Ionic Framework components in the browser. -Ionic Framework can be included from a CDN for quick testing in a [Plunker](https://plnkr.co/), [Codepen](https://codepen.io), or any other online code editor! +## Ionic Angular -It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Framework from a CDN. To get the latest version, add the following inside the `` element in an HTML file, or where external assets are included in the online code editor: +Start a new Ionic Angular app or add Ionic to your existing Angular project. -```html - - - -``` + -With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets). + +

Create a new Ionic Angular app using the Ionic CLI.

+ -:::note -This does not install Angular or any other frameworks. This allows use of the Ionic Framework core components without a framework. -::: + +

Add Ionic Angular to an existing Angular project.

+ -## Ionic + Angular + -When using Ionic Framework in an Angular project, install the latest `@ionic/angular` package from [npm](../reference/glossary.md#npm). This comes with all of the Ionic Framework components and Angular specific services and features. +## Ionic React -```shell -npm install @ionic/angular@latest --save -``` +Start a new Ionic React app or add Ionic to your existing React project. -Each time there is a new Ionic Framework release, this [version](../reference/versioning.md) will need to be updated to get the latest features and fixes. The version can be [updated using npm](../developing/tips.md#updating-dependencies), as well. + -For adding Ionic to an already existing Angular project, use the Angular CLI's `ng add` feature. + +

Create a new Ionic React app using the Ionic CLI.

+ -```shell -ng add @ionic/angular -``` + +

Add Ionic React to an existing React project.

+ -This will add the necessary imports to the `@ionic/angular` package as well as add the styles needed. + -## Ionic + React +## Ionic Vue -To add Ionic Framework to an already existing React project, install the `@ionic/react` and `@ionic/react-router` package. +Start a new Ionic Vue app or add Ionic to your existing Vue project. -```shell -$ npm install @ionic/react -$ npm install @ionic/react-router -``` - -### CSS + -To include the necessary CSS in a React project, add the following to the root App component. + +

Create a new Ionic Vue app using the Ionic CLI.

+ -```javascript -/* Core CSS required for Ionic components to work properly */ -import '@ionic/react/css/core.css'; + +

Add Ionic Vue to an existing Vue project.

+ -/* Basic CSS for apps built with Ionic */ -import '@ionic/react/css/normalize.css'; -import '@ionic/react/css/structure.css'; -import '@ionic/react/css/typography.css'; + -/* Optional CSS utils that can be commented out */ -import '@ionic/react/css/padding.css'; -import '@ionic/react/css/float-elements.css'; -import '@ionic/react/css/text-alignment.css'; -import '@ionic/react/css/text-transformation.css'; -import '@ionic/react/css/flex-utils.css'; -import '@ionic/react/css/display.css'; -``` +## Ionic JavaScript -## Ionic + Vue +Start a new Ionic JavaScript app. -To add Ionic Framework to an existing Vue project, install the `@ionic/vue` and `@ionic/vue-router` packages. - -```shell -npm install @ionic/vue @ionic/vue-router -``` + -After that, you will need to install the `IonicVue` plugin in your Vue app. + +

Create a new Ionic JavaScript app using Vite.

+ -**main.js** + -```javascript -import { IonicVue } from '@ionic/vue'; - -import App from './App.vue'; -import router from './router'; - -const app = createApp(App).use(IonicVue).use(router); - -router.isReady().then(() => { - app.mount('#app'); -}); -``` - -Be sure to mount your app once `router.isReady()` has resolved. - -### Routing - -When setting up routing in your Vue app, you will need to import your dependencies from `@ionic/vue-router` instead of `vue-router`. - -**router/index.js** - -```javascript -import { createRouter, createWebHistory } from '@ionic/vue-router'; - -const routes = [ - // routes go here -]; - -const router = createRouter({ - history: createWebHistory(process.env.BASE_URL), - routes, -}); - -export default router; -``` - -### CSS - -To include the necessary CSS in a Vue project, add the following to your `main.js` file. +## Ionic Framework CDN -```javascript -/* Core CSS required for Ionic components to work properly */ -import '@ionic/vue/css/core.css'; +Ionic Framework can be included from a CDN for quick testing in a [StackBlitz](https://stackblitz.com/), [Plunker](https://plnkr.co/), [Codepen](https://codepen.io), or any other online code editor! -/* Basic CSS for apps built with Ionic */ -import '@ionic/vue/css/normalize.css'; -import '@ionic/vue/css/structure.css'; -import '@ionic/vue/css/typography.css'; +It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Framework from a CDN. To get the latest version, add the following inside the `` element in an HTML file, or where external assets are included in the online code editor: -/* Optional CSS utils that can be commented out */ -import '@ionic/vue/css/padding.css'; -import '@ionic/vue/css/float-elements.css'; -import '@ionic/vue/css/text-alignment.css'; -import '@ionic/vue/css/text-transformation.css'; -import '@ionic/vue/css/flex-utils.css'; -import '@ionic/vue/css/display.css'; +```html + + + ``` -From here, you can learn about how to develop with Ionic Framework in our [Ionic Vue Quickstart Guide](https://ionicframework.com/docs/vue/quickstart). +With this it's possible to use all of the Ionic Framework core components without having to install a framework. The CSS bundle will include all of the Ionic [Global Stylesheets](../layout/global-stylesheets). ## Ionicons CDN @@ -161,6 +127,4 @@ Ionicons is packaged by default with the Ionic Framework, so no installation is ``` -:::note -See [Ionicons usage](https://ionic.io/ionicons/usage) for more information on using Ionicons. -::: +For more information on using Ionicons, visit the [Ionicons documentation](https://ionic.io/ionicons/usage). diff --git a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md b/docs/react/add-to-existing.md similarity index 90% rename from versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md rename to docs/react/add-to-existing.md index 20bf7b3fcb7..8f975e5b736 100644 --- a/versioned_docs/version-v7/react/adding-ionic-react-to-an-existing-react-project.md +++ b/docs/react/add-to-existing.md @@ -1,6 +1,17 @@ -# Adding To An Existing React App - -This post has been forked from [Ely Lucas' blog post](https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib) and updated to the latest version of Ionic. +--- +title: Add to Existing React App +sidebar_label: Add to Existing React App +--- + + + Add Ionic React to Existing Project: Integration Guide + + + +This guide covers how to add Ionic React to an existing React project. ### Using Individual Ionic Components diff --git a/sidebars.js b/sidebars.js index a04b7796f10..b48905e10e7 100644 --- a/sidebars.js +++ b/sidebars.js @@ -123,7 +123,7 @@ module.exports = { 'react/your-first-app/distribute', ], }, - 'react/adding-ionic-react-to-an-existing-react-project', + 'react/add-to-existing', 'react/lifecycle', 'react/navigation', 'react/virtual-scroll', diff --git a/src/components/global/DocsCard/index.tsx b/src/components/global/DocsCard/index.tsx index a8991dd4799..0ca705cd4c0 100644 --- a/src/components/global/DocsCard/index.tsx +++ b/src/components/global/DocsCard/index.tsx @@ -34,14 +34,16 @@ function DocsCard(props: Props): JSX.Element { )} {props.ionicon && } {props.iconset && ( -
- {props.iconset.split(',').map((icon, index) => ( - +
+ {props.iconset.split(',').map((icon, index, array) => ( + + + {index < array.length - 1 && ( +
+ + +
+ )} + ))}
)} diff --git a/src/components/global/DocsCard/styles.module.scss b/src/components/global/DocsCard/styles.module.scss index 8b3955f0fe9..a57e862b16c 100644 --- a/src/components/global/DocsCard/styles.module.scss +++ b/src/components/global/DocsCard/styles.module.scss @@ -116,20 +116,19 @@ docs-card[disabled]::after { .Card-icon-row { position: relative; + display: flex; + gap: 8px; } - .Card-iconset__container { - position: relative; - } - - .Card-iconset__container .Card-icon { - position: absolute; - opacity: 0; - transition: 0.8s opacity; - } - - .Card-iconset__container .Card-icon--active { - opacity: 1; + .Card-plus-icon { + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 48px; + color: var(--docs-card-border-c); + font-size: 22px; + font-weight: 600; } .Card-ionicon { diff --git a/src/components/global/DocsCards/cards.css b/src/components/global/DocsCards/cards.css index eadaa0350b0..b77622963f7 100644 --- a/src/components/global/DocsCards/cards.css +++ b/src/components/global/DocsCards/cards.css @@ -2,7 +2,11 @@ docs-cards { display: grid; font-size: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - grid-gap: 1.35rem; + gap: 1.35rem; +} + +docs-cards:has(docs-card:only-child) { + grid-template-columns: 1fr 1fr; } docs-cards > docs-card { diff --git a/vercel.json b/vercel.json index 5ab15d8df22..8c7509aaf63 100644 --- a/vercel.json +++ b/vercel.json @@ -94,7 +94,15 @@ "destination": "/docs/vue/your-first-app/deploying-mobile" }, { "source": "/docs/vue/your-first-app/7-live-reload", "destination": "/docs/vue/your-first-app/live-reload" }, - { "source": "/docs/react/testing", "destination": "/docs/react/testing/introduction" } + { "source": "/docs/react/testing", "destination": "/docs/react/testing/introduction" }, + { + "source": "/docs/react/adding-ionic-react-to-an-existing-react-project", + "destination": "/docs/react/add-to-existing" + }, + { + "source": "/docs/:version(v7)/react/adding-ionic-react-to-an-existing-react-project", + "destination": "/docs/:version/react/add-to-existing" + } ], "rewrites": [ { "source": "/docs", "destination": "/" }, diff --git a/docs/react/adding-ionic-react-to-an-existing-react-project.md b/versioned_docs/version-v7/react/add-to-existing.md similarity index 91% rename from docs/react/adding-ionic-react-to-an-existing-react-project.md rename to versioned_docs/version-v7/react/add-to-existing.md index 20bf7b3fcb7..e658a410697 100644 --- a/docs/react/adding-ionic-react-to-an-existing-react-project.md +++ b/versioned_docs/version-v7/react/add-to-existing.md @@ -1,6 +1,17 @@ -# Adding To An Existing React App - -This post has been forked from [Ely Lucas' blog post](https://dev.to/ionic/adding-ionic-react-to-an-existing-react-project-4kib) and updated to the latest version of Ionic. +--- +title: Add to Existing +sidebar_label: Add to Existing +--- + + + Add Ionic React to Existing Project: Integration Guide + + + +This guide covers how to add Ionic React to an existing React project. ### Using Individual Ionic Components diff --git a/versioned_sidebars/version-v7-sidebars.json b/versioned_sidebars/version-v7-sidebars.json index 3495cf3d822..0e3dc75dd63 100644 --- a/versioned_sidebars/version-v7-sidebars.json +++ b/versioned_sidebars/version-v7-sidebars.json @@ -127,7 +127,7 @@ "react/your-first-app/distribute" ] }, - "react/adding-ionic-react-to-an-existing-react-project", + "react/add-to-existing", "react/lifecycle", "react/navigation", "react/virtual-scroll",