From 9bc2371f466d04f39d096b9a7ea3c98243fa4ac2 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 12 Nov 2025 15:59:09 -0500 Subject: [PATCH 1/7] docs(javascript): update the quickstart to fix npm run preview --- docs/javascript/quickstart.md | 42 ++++++++++++++++------------------- 1 file changed, 19 insertions(+), 23 deletions(-) diff --git a/docs/javascript/quickstart.md b/docs/javascript/quickstart.md index 7d958bc4a9..a8167cb370 100644 --- a/docs/javascript/quickstart.md +++ b/docs/javascript/quickstart.md @@ -87,7 +87,7 @@ npm install vite-plugin-static-copy --save-dev Add a `vite.config.js` file at the project root with the following: -```js +```js title="vite.config.js" import { defineConfig } from 'vite'; import { viteStaticCopy } from 'vite-plugin-static-copy'; @@ -122,18 +122,14 @@ This copies the necessary Ionic files that Capacitor will need to work with lazy Replace the contents of `src/main.js` with the following: -```js -// Determine if the app is running in Capacitor -const isCapacitor = location.protocol === 'capacitor:' || (window.Capacitor && window.Capacitor.platform !== 'web'); - +```js title="src/main.js" // Load Ionic -if (isCapacitor) { - // In Capacitor, import Ionic directly from copied dist files - import(/* @vite-ignore */ location.origin + '/ionic.esm.js'); -} else { - // In the browser, use the normal loader - import('@ionic/core/loader').then((m) => m.defineCustomElements(window)); -} +(async () => { + // Set the path to a variable to + // prevent Vite from analyzing in dev + const ionicPath = '/ionic.esm.js'; + await import(/* @vite-ignore */ ionicPath); +})(); // Core CSS required for Ionic components to work properly import '@ionic/core/css/core.css'; @@ -158,7 +154,7 @@ This initializes Ionic based on the environment and then imports all of the avai Update your `index.html` to configure the metadata and use Ionic components: -```html +```html title="index.html" @@ -190,7 +186,7 @@ This sets up the root of your application, using Ionic's `ion-app`, `ion-router` Routes are defined in the `index.html` using `ion-route` components inside the `ion-router`: -```html +```html title="index.html" @@ -203,7 +199,7 @@ When you visit the root URL (`/`), the `home-page` component will be loaded. Whe Create a new directory called `pages` inside the `src` folder, then add a file called `HomePage.js` in that directory with the following content: -```js +```js title="src/pages/HomePage.js" class HomePage extends HTMLElement { connectedCallback() { this.innerHTML = ` @@ -236,7 +232,7 @@ For detailed information about Ionic layout components, see the [Header](/docs/a Next, add a ` @@ -252,7 +248,7 @@ At this point your browser should be displaying the Home page. You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) to navigate to another page. Update the `HomePage` component in `src/pages/HomePage.js`: -```js +```js title="src/pages/HomePage.js" class HomePage extends HTMLElement { connectedCallback() { this.innerHTML = ` @@ -283,7 +279,7 @@ customElements.define('home-page', HomePage); Add a new file named `NewPage.js` to `src/pages` with the following content: -```js +```js title="src/pages/NewPage.js" class NewPage extends HTMLElement { connectedCallback() { this.innerHTML = ` @@ -309,7 +305,7 @@ This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar] Next, update the ` @@ -187,9 +188,9 @@ Then, import the `IonButton` component in the ` @@ -187,9 +188,9 @@ Then, import the `IonButton` component in the ` @@ -187,9 +188,9 @@ Then, import the `IonButton` component in the ` @@ -182,7 +182,7 @@ Then, import the `IonButton` component in the ` ``` @@ -213,7 +213,7 @@ Create a new page at `src/views/NewPage.vue`: ``` @@ -270,8 +270,8 @@ Update the imports in `src/views/NewPage.vue` to import `IonIcon` and the `heart ```vue title="src/views/NewPage.vue" ``` @@ -307,27 +307,27 @@ In the script section, add the new component imports and define the `scrollToBot ```vue title="src/views/NewPage.vue" ``` diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md index b76a245ea5..0b82e191a1 100644 --- a/versioned_docs/version-v6/vue/quickstart.md +++ b/versioned_docs/version-v6/vue/quickstart.md @@ -154,7 +154,7 @@ The Home page component, defined in `src/views/HomePage.vue`, imports the Ionic @@ -182,7 +182,7 @@ Then, import the `IonButton` component in the ` ``` @@ -213,7 +213,7 @@ Create a new page at `src/views/NewPage.vue`: ``` @@ -270,8 +270,8 @@ Update the imports in `src/views/NewPage.vue` to import `IonIcon` and the `heart ```vue title="src/views/NewPage.vue" ``` @@ -307,27 +307,27 @@ In the script section, add the new component imports and define the `scrollToBot ```vue title="src/views/NewPage.vue" ``` diff --git a/versioned_docs/version-v7/vue/quickstart.md b/versioned_docs/version-v7/vue/quickstart.md index b76a245ea5..0b82e191a1 100644 --- a/versioned_docs/version-v7/vue/quickstart.md +++ b/versioned_docs/version-v7/vue/quickstart.md @@ -154,7 +154,7 @@ The Home page component, defined in `src/views/HomePage.vue`, imports the Ionic @@ -182,7 +182,7 @@ Then, import the `IonButton` component in the ` ``` @@ -213,7 +213,7 @@ Create a new page at `src/views/NewPage.vue`: ``` @@ -270,8 +270,8 @@ Update the imports in `src/views/NewPage.vue` to import `IonIcon` and the `heart ```vue title="src/views/NewPage.vue" ``` @@ -307,27 +307,27 @@ In the script section, add the new component imports and define the `scrollToBot ```vue title="src/views/NewPage.vue" ``` From 329a1d5e5aae83c25dc28ead3f08d315b2db873f Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Thu, 13 Nov 2025 16:40:53 -0500 Subject: [PATCH 6/7] docs(quickstart): only use full file path in the code title --- docs/angular/quickstart.md | 30 +++++++++---------- docs/javascript/quickstart.md | 14 ++++----- docs/react/quickstart.md | 18 +++++------ docs/vue/quickstart.md | 16 +++++----- versioned_docs/version-v6/react/quickstart.md | 18 +++++------ versioned_docs/version-v6/vue/quickstart.md | 16 +++++----- .../version-v7/angular/quickstart.md | 30 +++++++++---------- versioned_docs/version-v7/react/quickstart.md | 18 +++++------ versioned_docs/version-v7/vue/quickstart.md | 16 +++++----- 9 files changed, 88 insertions(+), 88 deletions(-) diff --git a/docs/angular/quickstart.md b/docs/angular/quickstart.md index bba7eb3a03..8760db73c0 100644 --- a/docs/angular/quickstart.md +++ b/docs/angular/quickstart.md @@ -79,7 +79,7 @@ Let's walk through these files to understand the app's structure. ## View the App Component -The root of your app is defined in `src/app/app.component.ts`: +The root of your app is defined in `app.component.ts`: ```ts title="src/app/app.component.ts" import { Component } from '@angular/core'; @@ -95,7 +95,7 @@ export class AppComponent { } ``` -And its template in `src/app/app.component.html`: +And its template in `app.component.html`: ```html title="src/app/app.component.html" @@ -107,7 +107,7 @@ This sets up the root of your application, using Ionic's `ion-app` and `ion-rout ## View Routes -Routes are defined in `src/app/app.routes.ts`: +Routes are defined in `app.routes.ts`: ```ts title="src/app/app.routes.ts" import { Routes } from '@angular/router'; @@ -129,7 +129,7 @@ When you visit the root URL (`/`), the `HomePage` component will be loaded. ## View the Home Page -The Home page component, defined in `src/app/home/home.page.ts`, imports the Ionic components it uses: +The Home page component, defined in `home.page.ts`, imports the Ionic components it uses: ```ts title="src/app/home/home.page.ts" import { Component } from '@angular/core'; @@ -146,7 +146,7 @@ export class HomePage { } ``` -And the template, in the `src/app/home/home.page.html` file, uses those components: +And the template, in the `home.page.html` file, uses those components: ```html title="src/app/home/home.page.html" @@ -190,7 +190,7 @@ You can enhance your Home page with more Ionic UI components. For example, add a ``` -Then, import the `IonButton` component in `src/app/home/home.page.ts`: +Then, import the `IonButton` component in `home.page.ts`: ```ts title="src/app/home/home.page.ts" import { IonButton, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @@ -209,9 +209,9 @@ To add a new page, generate it with the CLI: ionic generate page new ``` -A route will be automatically added to `src/app/app.routes.ts`. +A route will be automatically added to `app.routes.ts`. -In `src/app/new/new.page.html`, you can add a [Back Button](/docs/api/back-button) to the [Toolbar](/docs/api/toolbar): +In `new.page.html`, you can add a [Back Button](/docs/api/back-button) to the [Toolbar](/docs/api/toolbar): ```html title="src/app/new/new.page.html" @@ -224,7 +224,7 @@ In `src/app/new/new.page.html`, you can add a [Back Button](/docs/api/back-butto ``` -And import `IonBackButton` and `IonButtons` in `src/app/new/new.page.ts`: +And import `IonBackButton` and `IonButtons` in `new.page.ts`: ```ts title="src/app/new/new.page.ts" import { IonBackButton, IonButtons, IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/angular/standalone'; @@ -239,13 +239,13 @@ The `ion-back-button` will automatically handle navigation back to the previous ## Navigate to the New Page -To navigate to the new page, update the button in `src/app/home/home.page.html`: +To navigate to the new page, update the button in `home.page.html`: ```html title="src/app/home/home.page.html" Navigate ``` -Then, import `RouterLink` in `src/app/home/home.page.ts`: +Then, import `RouterLink` in `home.page.ts`: ```ts title="src/app/home/home.page.ts" import { RouterLink } from '@angular/router'; @@ -262,7 +262,7 @@ Navigating can also be performed using Angular's Router service. See the [Angula ## Add Icons to the New Page -Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `src/app/new/new.page.html`: +Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. You can use any icon by setting the `name` property on the `ion-icon` component. Add the following icons to `new.page.html`: ```html title="src/app/new/new.page.html" @@ -273,7 +273,7 @@ Ionic Angular comes with [Ionicons](https://ionic.io/ionicons/) pre-installed. Y ``` -You'll also need to import and register these icons in `src/app/new/new.page.ts`: +You'll also need to import and register these icons in `new.page.ts`: ```ts title="src/app/new/new.page.ts" // ...existing imports... @@ -299,7 +299,7 @@ export class NewPage implements OnInit { } ``` -Alternatively, you can register icons in `src/app/app.component.ts` to use them throughout your app. +Alternatively, you can register icons in `app.component.ts` to use them throughout your app. For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/). @@ -307,7 +307,7 @@ For more information, see the [Icon documentation](/docs/api/icon) and the [Ioni Let's add a button that can scroll the content area to the bottom. -Update the `ion-content` in your `src/app/new/new.page.html` to include a button and some items after the existing icons: +Update the `ion-content` in your `new.page.html` to include a button and some items after the existing icons: ```html title="src/app/new/new.page.html" diff --git a/docs/javascript/quickstart.md b/docs/javascript/quickstart.md index a8167cb370..de6f88b73e 100644 --- a/docs/javascript/quickstart.md +++ b/docs/javascript/quickstart.md @@ -120,7 +120,7 @@ This copies the necessary Ionic files that Capacitor will need to work with lazy ## Initialize Ionic -Replace the contents of `src/main.js` with the following: +Replace the contents of `main.js` with the following: ```js title="src/main.js" // Load Ionic @@ -230,7 +230,7 @@ This creates a custom element called `home-page` that contains the layout for yo For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation. ::: -Next, add a ` ``` -This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. +This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. :::warning When creating your own pages, always use `ion-page` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app. @@ -259,7 +259,7 @@ Once that is done, update the button in `HomePage.vue`: ``` :::info -Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation) for more information. +Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation.md) for more information. ::: ## Add Icons to the New Page @@ -284,7 +284,7 @@ Then, include them inside of the `ion-content`: Note that we are passing the imported SVG reference, **not** the icon name as a string. -For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/). ## Call Component Methods @@ -339,7 +339,7 @@ To call methods on Ionic components: This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined. -You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation. ## Run on a Device diff --git a/versioned_docs/version-v6/react/quickstart.md b/versioned_docs/version-v6/react/quickstart.md index ebaca5775f..220dc01058 100644 --- a/versioned_docs/version-v6/react/quickstart.md +++ b/versioned_docs/version-v6/react/quickstart.md @@ -156,15 +156,15 @@ const Home: React.FC = () => { export default Home; ``` -This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. :::tip Learn More -For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation. +For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `Home.tsx`: +You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.md) at the end of the `IonContent` in `Home.tsx`: ```tsx title="src/pages/Home.tsx" import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; @@ -222,7 +222,7 @@ const New: React.FC = () => { export default New; ``` -This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. +This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. :::warning When creating your own pages, always use `IonPage` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app. @@ -259,7 +259,7 @@ Once that is done, update the button in `Home.tsx`: ``` :::info -Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation#navigating-using-history) for more information. +Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation.md#navigating-using-history) for more information. ::: ## Add Icons to the New Page @@ -282,7 +282,7 @@ Then, include them inside of the `IonContent`: Note that we are passing the imported SVG reference, **not** the icon name as a string. -For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/). ## Call Component Methods @@ -335,7 +335,7 @@ To call methods on Ionic components: This pattern is necessary because React refs store the component instance in the `.current` property. -You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation. ## Run on a Device diff --git a/versioned_docs/version-v6/vue/quickstart.md b/versioned_docs/version-v6/vue/quickstart.md index b1b296c98a..b1bb31141a 100644 --- a/versioned_docs/version-v6/vue/quickstart.md +++ b/versioned_docs/version-v6/vue/quickstart.md @@ -160,15 +160,15 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. :::tip Learn More -For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation. +For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`: +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`: ```vue title="src/views/HomePage.vue" @@ -217,7 +217,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, Io ``` -This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. +This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. :::warning When creating your own pages, always use `ion-page` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app. @@ -259,7 +259,7 @@ Once that is done, update the button in `HomePage.vue`: ``` :::info -Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation) for more information. +Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation.md) for more information. ::: ## Add Icons to the New Page @@ -284,7 +284,7 @@ Then, include them inside of the `ion-content`: Note that we are passing the imported SVG reference, **not** the icon name as a string. -For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/). ## Call Component Methods @@ -339,7 +339,7 @@ To call methods on Ionic components: This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined. -You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation. ## Run on a Device diff --git a/versioned_docs/version-v7/angular/quickstart.md b/versioned_docs/version-v7/angular/quickstart.md index 8760db73c0..e2d7b1436f 100644 --- a/versioned_docs/version-v7/angular/quickstart.md +++ b/versioned_docs/version-v7/angular/quickstart.md @@ -172,15 +172,15 @@ And the template, in the `home.page.html` file, uses those components: ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. :::tip Learn More -For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation. +For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`: +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`: ```html title="src/app/home/home.page.html" @@ -211,7 +211,7 @@ ionic generate page new A route will be automatically added to `app.routes.ts`. -In `new.page.html`, you can add a [Back Button](/docs/api/back-button) to the [Toolbar](/docs/api/toolbar): +In `new.page.html`, you can add a [Back Button](/docs/api/back-button.md) to the [Toolbar](/docs/api/toolbar.md): ```html title="src/app/new/new.page.html" @@ -257,7 +257,7 @@ import { RouterLink } from '@angular/router'; ``` :::info -Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/docs/angular/navigation#navigating-to-different-routes) for more information. +Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/docs/angular/navigation.md#navigating-to-different-routes) for more information. ::: ## Add Icons to the New Page @@ -301,7 +301,7 @@ export class NewPage implements OnInit { Alternatively, you can register icons in `app.component.ts` to use them throughout your app. -For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/). ## Call Component Methods @@ -387,7 +387,7 @@ To call methods on Ionic components: 1. Create a `ViewChild` reference for the component 2. Call the method directly on the component instance -You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation. ## Run on a Device diff --git a/versioned_docs/version-v7/react/quickstart.md b/versioned_docs/version-v7/react/quickstart.md index ebaca5775f..220dc01058 100644 --- a/versioned_docs/version-v7/react/quickstart.md +++ b/versioned_docs/version-v7/react/quickstart.md @@ -156,15 +156,15 @@ const Home: React.FC = () => { export default Home; ``` -This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The `IonPage` component provides the basic page structure and must be used on every page. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. :::tip Learn More -For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation. +For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button) at the end of the `IonContent` in `Home.tsx`: +You can enhance your Home page with more Ionic UI components. For example, import and add a [Button](/docs/api/button.md) at the end of the `IonContent` in `Home.tsx`: ```tsx title="src/pages/Home.tsx" import { IonButton, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; @@ -222,7 +222,7 @@ const New: React.FC = () => { export default New; ``` -This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. +This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. :::warning When creating your own pages, always use `IonPage` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app. @@ -259,7 +259,7 @@ Once that is done, update the button in `Home.tsx`: ``` :::info -Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation#navigating-using-history) for more information. +Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/docs/react/navigation.md#navigating-using-history) for more information. ::: ## Add Icons to the New Page @@ -282,7 +282,7 @@ Then, include them inside of the `IonContent`: Note that we are passing the imported SVG reference, **not** the icon name as a string. -For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/). ## Call Component Methods @@ -335,7 +335,7 @@ To call methods on Ionic components: This pattern is necessary because React refs store the component instance in the `.current` property. -You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation. ## Run on a Device diff --git a/versioned_docs/version-v7/vue/quickstart.md b/versioned_docs/version-v7/vue/quickstart.md index b1b296c98a..b1bb31141a 100644 --- a/versioned_docs/version-v7/vue/quickstart.md +++ b/versioned_docs/version-v7/vue/quickstart.md @@ -160,15 +160,15 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue ``` -This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. +This creates a page with a header and scrollable content area. The second header shows a [collapsible large title](/docs/api/title.md#collapsible-large-titles) that displays when at the top of the content, then condenses to show the smaller title in the first header when scrolling down. :::tip Learn More -For detailed information about Ionic layout components, see the [Header](/docs/api/header), [Toolbar](/docs/api/toolbar), [Title](/docs/api/title), and [Content](/docs/api/content) documentation. +For detailed information about Ionic layout components, see the [Header](/docs/api/header.md), [Toolbar](/docs/api/toolbar.md), [Title](/docs/api/title.md), and [Content](/docs/api/content.md) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button) at the end of the `ion-content`: +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.md) at the end of the `ion-content`: ```vue title="src/views/HomePage.vue" @@ -217,7 +217,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, Io ``` -This creates a page with a [Back Button](/docs/api/back-button) in the [Toolbar](/docs/api/toolbar). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. +This creates a page with a [Back Button](/docs/api/back-button.md) in the [Toolbar](/docs/api/toolbar.md). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. :::warning When creating your own pages, always use `ion-page` as the root component. This is essential for proper transitions between pages, base CSS styling that Ionic components depend on, and consistent layout behavior across your app. @@ -259,7 +259,7 @@ Once that is done, update the button in `HomePage.vue`: ``` :::info -Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation) for more information. +Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. See the [Vue Navigation documentation](/docs/vue/navigation.md) for more information. ::: ## Add Icons to the New Page @@ -284,7 +284,7 @@ Then, include them inside of the `ion-content`: Note that we are passing the imported SVG reference, **not** the icon name as a string. -For more information, see the [Icon documentation](/docs/api/icon) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/docs/api/icon.md) and the [Ionicons documentation](https://ionic.io/ionicons/). ## Call Component Methods @@ -339,7 +339,7 @@ To call methods on Ionic components: This pattern is necessary because Ionic components are built as Web Components. The `$el` property gives you access to the actual Web Component instance where the methods are defined. -You can find available methods for each component in the [Methods](/docs/api/content#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/docs/api/content.md#methods) section of their API documentation. ## Run on a Device