diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index 308663ffe0a..c247a0a6a92 100644 --- a/.github/workflows/CI.yml +++ b/.github/workflows/CI.yml @@ -6,39 +6,86 @@ name: Validate Docs on: [pull_request] +# A new push supersedes the run before it. +concurrency: + group: ${{ github.workflow }}-${{ github.ref }} + cancel-in-progress: true + +env: + NODE_VERSION: 24 + jobs: - test: - name: Test on ${{ matrix.os }} - runs-on: ${{ matrix.os }} - strategy: - matrix: - # Build processes work differently across operating systems, so the - # checks run on each one to make sure anyone can contribute to the - # docs. - os: [windows-latest, macOS-latest] + # Needs no dependencies, so it reports in seconds rather than queueing behind + # npm ci and lint. + admonitions: + name: Check Admonitions + runs-on: ubuntu-latest + + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + with: + # The check diffs against the pull request base, so it needs history. + fetch-depth: 0 + - uses: ./.github/workflows/actions/check-admonitions + + # These produce the same verdict on any operating system, so they run once. + checks: + name: Checks + runs-on: ubuntu-latest steps: - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 - name: ⚙️ Use Node.js uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 with: - node-version: 24 + node-version: ${{ env.NODE_VERSION }} + cache: npm - name: 🕸️ Install Dependencies run: npm ci - - name: 🖌️ Lint - run: npm run lint - name: Test run: npm run test - name: 🧩 Typecheck run: npm run typecheck - name: 🔤 Spell Check run: npm run spellcheck - - uses: ./.github/workflows/actions/check-admonitions - uses: ./.github/workflows/actions/check-translations - # Lint and spell check changes should be pushed - # to the branch before the branch is merge eligible. - # - # The translation keys check should not produce any changes. + + cross-platform: + name: Cross-platform on ${{ matrix.os }} + runs-on: ${{ matrix.os }} + strategy: + matrix: + # Prettier rewrites line endings, so Lint is the one check whose + # verdict depends on the operating system. + os: [windows-latest, macOS-latest] + + steps: + - uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1 + - name: ⚙️ Use Node.js + uses: actions/setup-node@820762786026740c76f36085b0efc47a31fe5020 # v7.0.0 + with: + node-version: ${{ env.NODE_VERSION }} + cache: npm + - name: 🕸️ Install Dependencies + run: npm ci + - name: 🖌️ Lint + run: npm run lint + # Lint changes should be pushed to the branch before the branch is merge + # eligible. - name: 🔍 Check Diff run: git diff --exit-code shell: bash + + verify: + # The one required check on main and the feature branches, so the jobs + # above can change without touching the protection rules. Renaming this + # blocks merges until those rules are updated to match. + name: Verify + if: ${{ always() }} + needs: [admonitions, checks, cross-platform] + runs-on: ubuntu-latest + + steps: + - name: Check job status + if: ${{ contains(needs.*.result, 'failure') || contains(needs.*.result, 'cancelled') }} + run: exit 1 diff --git a/.github/workflows/actions/check-admonitions/action.yml b/.github/workflows/actions/check-admonitions/action.yml index e3f4bf6948c..8cd33474a5d 100644 --- a/.github/workflows/actions/check-admonitions/action.yml +++ b/.github/workflows/actions/check-admonitions/action.yml @@ -15,17 +15,14 @@ runs: # Only the files the pull request touches are checked, so an existing # page is never anyone else's problem to fix. # - # The event payload has no file list, so the changed files come from a - # diff. The checkout is shallow and the base commit is fetched here - # rather than through `fetch-depth` on the checkout, which would pull - # the full history for every step in the job just to serve this one. + # The caller has to check out with `fetch-depth: 0`, which a composite + # action cannot require for itself. - name: 🔎 Check Admonitions shell: bash env: BASE_SHA: ${{ github.event.pull_request.base.sha }} CHANGED_FILES: ${{ runner.temp }}/changed-files.txt run: | - git fetch --quiet --no-tags --depth=1 origin "$BASE_SHA" git diff --name-only --diff-filter=ACMR "$BASE_SHA" HEAD > "$CHANGED_FILES" node <<'JS' const { readFileSync } = require('fs'); diff --git a/docs/angular/add-to-existing.mdx b/docs/angular/add-to-existing.mdx index bf2ab3d2ef1..4b958cf5c34 100644 --- a/docs/angular/add-to-existing.mdx +++ b/docs/angular/add-to-existing.mdx @@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards'; /> -This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.mdx) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.mdx). +This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/angular/quickstart.mdx) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/angular/overview.mdx). :::tip @@ -76,7 +76,7 @@ Replace the existing `styles` array in `angular.json` with the following: :::info -While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/layout/global-stylesheets.mdx). ::: @@ -96,7 +96,7 @@ export const appConfig: ApplicationConfig = { }; ``` -This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/docs/angular/zoneless.mdx) for details. +This reflects the Angular 21 and 22 scaffold, which is zoneless by default. If your existing app is on Angular 18 through 20, it still has `provideZoneChangeDetection({ eventCoalescing: true })`; keep that provider and add `provideIonicAngular({})` alongside it. Refer to [Zoneless Change Detection](/angular/zoneless.mdx) for details. ## Using Individual Components @@ -123,7 +123,7 @@ import { IonButton, IonDatetime } from '@ionic/angular'; export class App {} ``` -Visit the [components](/docs/components.mdx) page for all of the available Ionic components. +Visit the [components](/components.mdx) page for all of the available Ionic components. ## Using Ionic Pages @@ -172,7 +172,7 @@ Replace the existing `styles` array in `angular.json` with the following: ] ``` -These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +These stylesheets set up the overall page structure and provide [CSS utilities](/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/layout/global-stylesheets.mdx). #### 2. Set up Theming @@ -191,7 +191,7 @@ Create a `src/theme/variables.css` file with the following content: @import '@ionic/angular/css/palettes/dark.system.css'; ``` -This file enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables. +This file enables [dark mode support](/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables. #### 3. Update the App Component @@ -326,11 +326,11 @@ Now that you have Ionic Angular integrated into your project, check out:

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

- +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/docs/angular/lifecycle.mdx b/docs/angular/lifecycle.mdx index 5ee03710850..44d9a3b86ed 100644 --- a/docs/angular/lifecycle.mdx +++ b/docs/angular/lifecycle.mdx @@ -32,7 +32,7 @@ If your pages keep state in plain fields rather than signals, the component host On **Angular 18 through 21** this only affects you if you set `OnPush` on those components yourself, because a component that does not declare a strategy is eager. -**Angular 22** makes `OnPush` the default for components that do not declare one, so refer to [Change detection on Angular 22](/docs/angular/zoneless.mdx#change-detection-on-angular-22) for what your app shell has to declare. +**Angular 22** makes `OnPush` the default for components that do not declare one, so refer to [Change detection on Angular 22](/angular/zoneless.mdx#change-detection-on-angular-22) for what your app shell has to declare. ::: diff --git a/docs/angular/navigation.mdx b/docs/angular/navigation.mdx index d6011d24ade..0ed73ae600d 100644 --- a/docs/angular/navigation.mdx +++ b/docs/angular/navigation.mdx @@ -227,7 +227,7 @@ The application history in this example has the following path: `Accessibility` --> `VoiceOver` --> `Speech` -When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategy). +When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategyhistorygo). The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play. diff --git a/docs/angular/your-first-app/2-taking-photos.mdx b/docs/angular/your-first-app/2-taking-photos.mdx index 86575f31f6b..f3f4332f734 100644 --- a/docs/angular/your-first-app/2-taking-photos.mdx +++ b/docs/angular/your-first-app/2-taking-photos.mdx @@ -11,7 +11,7 @@ sidebar_label: カメラ撮影 /> -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](/native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Service diff --git a/docs/angular/your-first-app/3-saving-photos.mdx b/docs/angular/your-first-app/3-saving-photos.mdx index 4df08e91606..9bc0c3efb32 100644 --- a/docs/angular/your-first-app/3-saving-photos.mdx +++ b/docs/angular/your-first-app/3-saving-photos.mdx @@ -86,7 +86,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](/native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/docs/angular/your-first-app/4-loading-photos.mdx b/docs/angular/your-first-app/4-loading-photos.mdx index f206052ca82..8d548aca077 100644 --- a/docs/angular/your-first-app/4-loading-photos.mdx +++ b/docs/angular/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: 写真の読み込み We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](/native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/docs/angular/zoneless.mdx b/docs/angular/zoneless.mdx index 0d961474817..90ad3c2bf98 100644 --- a/docs/angular/zoneless.mdx +++ b/docs/angular/zoneless.mdx @@ -28,7 +28,7 @@ You do not need to change these. Angular schedules change detection for them in :::note[Angular 22] -Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. Refer to [Change detection on Angular 22](#change-detection-on-angular-22) for what this means for your app shell, and to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/docs/updating/9-0.mdx#onpush-change-detection-on-angular-22) for the migration steps. +Angular 22 also makes `OnPush` the default change detection strategy. Under `OnPush`, synchronous state set as a plain field (including in the lifecycle hooks above) no longer re-renders on its own, even though Ionic notifies Angular. Signals still update the view. Refer to [Change detection on Angular 22](#change-detection-on-angular-22) for what this means for your app shell, and to the [OnPush Change Detection section of the Ionic 9 upgrade guide](/updating/9-0.mdx#onpush-change-detection-on-angular-22) for the migration steps. ::: @@ -174,4 +174,4 @@ Hosting an `ion-nav` is fine either way, because its pages are attached as root ## Staying on Zone.js -If you are not ready to adopt zoneless change detection, you can opt back into Zone.js with `provideZoneChangeDetection()`. Refer to the [Keeping Zone.js section of the Ionic 9 upgrade guide](/docs/updating/9-0.mdx#keeping-zonejs) for the exact configuration. +If you are not ready to adopt zoneless change detection, you can opt back into Zone.js with `provideZoneChangeDetection()`. Refer to the [Keeping Zone.js section of the Ionic 9 upgrade guide](/updating/9-0.mdx#keeping-zonejs) for the exact configuration. diff --git a/docs/api/input-password-toggle.mdx b/docs/api/input-password-toggle.mdx index b7f918cc635..095b96b876d 100644 --- a/docs/api/input-password-toggle.mdx +++ b/docs/api/input-password-toggle.mdx @@ -27,7 +27,7 @@ The InputPasswordToggle component is a companion component to [Input](./input). :::info -InputPasswordToggle must be used with an [Input](./input) that has its [`type`](./input/#type) property set to either `'text'` or `'password'`. +InputPasswordToggle must be used with an [Input](./input) that has its [`type`](./input.mdx#prop-type) property set to either `'text'` or `'password'`. Using any other `type` will cause a warning to be logged. diff --git a/docs/api/modal.mdx b/docs/api/modal.mdx index eee76448652..7af2d0b8ce6 100644 --- a/docs/api/modal.mdx +++ b/docs/api/modal.mdx @@ -122,7 +122,9 @@ import CardExample from '@site/static/usage/v9/modal/card/basic/index.mdx'; ## Sheet Modal :::info -[Content](./content) should be used inside of the sheet modal if you want your modal content to be scrollable. + +[Content](./content.mdx) should be used inside of the sheet modal if you want your modal content to be scrollable. + ::: 開発者は、マップアプリケーションで利用可能なドロワーコンポーネントに似たシートモーダルエフェクトを作成することができます。シートモーダルを作成するには、`ion-modal` の `breakpoints` プロパティと `initialBreakpoint` プロパティを設定する必要があります。 @@ -169,30 +171,58 @@ import SheetScrollingContentExample from '@site/static/usage/v9/modal/sheet/expa -## Styling +## Theming -モーダルはアプリケーションのルートで表示されるので、アプリ全体を覆うように表示されます。この動作は、インライン モーダルおよびコントローラから表示されるモーダルの両方に適用されます。その結果、カスタムのモーダルスタイルを特定のコンポーネントにスコープすることはできず、モーダルには適用されません。代わりに、スタイルはグローバルに適用する必要があります。ほとんどの開発者は、カスタムスタイルを `global.css` に配置すれば十分です。 +[Controller modals](#controller-modals) are appended to the root of your application, outside of the component that presented them. Component-scoped styles will not reach these modals, so their styles must be applied globally, from a stylesheet that is not scoped to a component. -:::note -IonicのAngularアプリを構築する場合、スタイルはグローバルなスタイルシートファイルに追加する必要があります。詳しくは、以下のAngularセクションの [Style Placement](#style-placement) をお読みください。 -::: +[Inline modals](#inline-modals-recommended) stay where they are declared in your template, so component-scoped styles do apply to them. -:::note -`ion-modal` は、積み重ねられたモーダルは同じサイズであるという前提で動作します。その結果、後続の各モーダルはボックスシャドウを持たず、背景の不透明度は `0` になります。これは、モーダルが追加されるたびに影や背景が濃くなるのを避けるためです。これは、CSS 変数 `--box-shadow` と `--backdrop-opacity` を設定することで変更することができます。 -::: +### Styling -``` +Modals expose [CSS Custom Properties](#css-custom-properties) and [CSS Shadow Parts](#css-shadow-parts) for customizing their appearance. + +import ThemeExample from '@site/static/usage/v9/modal/styling/theming/index.mdx'; + + + +### Stacked Modals + +`ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables: + +```css ion-modal.stack-modal { --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); --backdrop-opacity: var(--ion-backdrop-opacity, 0.32); } ``` -import ThemeExample from '@site/static/usage/v9/modal/styling/theming/index.mdx'; +### Sizing to Content - +A modal fills the height of its container by default. Setting the `--height` CSS variable to `auto`, `fit-content`, `min-content`, or `max-content` sizes the modal to the height of what it renders instead. + +:::warning + +The height must be set on the modal through the `--height` CSS variable. Setting `height` on the `content` [CSS Shadow Part](#css-shadow-parts) will still resize the modal, but any [Content](./content.mdx) inside of it will collapse to a height of `0`, leaving only the header visible. + +```css +/* DO NOT DO THIS */ +ion-modal::part(content) { + height: fit-content; +} + +/* Do this instead */ +ion-modal { + --height: fit-content; +} +``` + +::: + +import SizingToContentExample from '@site/static/usage/v9/modal/styling/sizing-to-content/index.mdx'; + + -### アニメーション +## Animations アニメーションビルダーを使用し、`enterAnimation` と `leaveAnimation` にアニメーションを割り当てることで、表示時、非表示時のアニメーションをカスタマイズすることができます。 @@ -210,8 +240,8 @@ import CustomDialogs from '@site/static/usage/v9/modal/custom-dialogs/index.mdx' カスタムダイアログを作成する際に注意すべき点がいくつかあります。 -- `ion-content` は、フルページモダル、カード、シートで使用することを意図しています。カスタムダイアログのサイズが動的であったり、不明であったりする場合は、 `ion-content` を使用するべきではありません。 -- カスタムダイアログを作成することは、デフォルトのモーダルエクスペリエンスから逃れる方法を提供します。そのため、カスタムダイアログは、カードやシートのモーダルでは使用しないでください。 +- `ion-content` can be used in a custom dialog, including one that is sized to its contents. The dialog's height must come from the `--height` CSS variable rather than from the dialog's children. See [Sizing to Content](#sizing-to-content). +- Creating custom dialogs provides a way of ejecting from the default modal experience. As a result, custom dialogs should not be used with card or sheet modals. ## Event Handling diff --git a/docs/javascript/overview.mdx b/docs/javascript/overview.mdx index b17335439f1..3c09bf8af3f 100644 --- a/docs/javascript/overview.mdx +++ b/docs/javascript/overview.mdx @@ -56,15 +56,15 @@ $ npm run dev █ 公式のJavaScriptドキュメントから、JavaScriptのコアコンセプト、ツール、ベストプラクティスについて詳しく学びましょう。 - +

Discover how to handle routing and navigation in Ionic JavaScript apps using the Ionic Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/docs/react/add-to-existing.mdx b/docs/react/add-to-existing.mdx index e9a9eb18fe9..95d08079546 100644 --- a/docs/react/add-to-existing.mdx +++ b/docs/react/add-to-existing.mdx @@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards'; /> -This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.mdx) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.mdx). +This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/react/quickstart.mdx) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/react/overview.mdx). :::tip @@ -64,7 +64,7 @@ setupIonicReact(); :::info -While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/layout/global-stylesheets.mdx). ::: @@ -98,7 +98,7 @@ const App: React.FC = () => ( export default App; ``` -Visit the [components](/docs/components.mdx) page for all of the available Ionic components. +Visit the [components](/components.mdx) page for all of the available Ionic components. :::tip @@ -132,7 +132,7 @@ import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; ``` -These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +These stylesheets set up the overall page structure and provide [CSS utilities](/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/layout/global-stylesheets.mdx). #### 2. Set up Theming @@ -169,7 +169,7 @@ setupIonicReact(); // ...existing app function and export... ``` -The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`. +The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`. #### 3. Update the App Component @@ -350,11 +350,11 @@ Now that you have Ionic React integrated into your project, check out:

Discover how to handle routing and navigation in Ionic React apps using the React Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/docs/react/your-first-app.mdx b/docs/react/your-first-app.mdx index 2eae140a853..8649119f212 100644 --- a/docs/react/your-first-app.mdx +++ b/docs/react/your-first-app.mdx @@ -32,7 +32,7 @@ Highlights include: - One React-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](/native/camera.mdx), [Filesystem](/native/filesystem.mdx), and [Preferences](/native/preferences.mdx) APIs. Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-react) referenced in this guide on GitHub. @@ -88,7 +88,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ### PWA Elements -Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). +Some Capacitor plugins, including the [Camera API](/native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). It's a separate dependency, so install it next: diff --git a/docs/react/your-first-app/2-taking-photos.mdx b/docs/react/your-first-app/2-taking-photos.mdx index 2782a72e148..720ac9c1cab 100644 --- a/docs/react/your-first-app/2-taking-photos.mdx +++ b/docs/react/your-first-app/2-taking-photos.mdx @@ -11,7 +11,7 @@ sidebar_label: カメラ撮影 /> -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](/native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Gallery Hook diff --git a/docs/react/your-first-app/3-saving-photos.mdx b/docs/react/your-first-app/3-saving-photos.mdx index 87fc116a0a7..29aed497d0f 100644 --- a/docs/react/your-first-app/3-saving-photos.mdx +++ b/docs/react/your-first-app/3-saving-photos.mdx @@ -93,7 +93,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](/native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/docs/react/your-first-app/4-loading-photos.mdx b/docs/react/your-first-app/4-loading-photos.mdx index 3d575e315f3..9400f597dd8 100644 --- a/docs/react/your-first-app/4-loading-photos.mdx +++ b/docs/react/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: 写真の読み込み We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](/native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/docs/reference/support.mdx b/docs/reference/support.mdx index 4da99fe5655..9bc4c42d0d9 100644 --- a/docs/reference/support.mdx +++ b/docs/reference/support.mdx @@ -140,4 +140,4 @@ Ionic の後続バージョンは iOS 13 をサポートしていないことに | V3 | Not currently supported | @awesome-cordova-plugins 4.X | - Wrappers (and their associated plugins) are community maintained. -- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript) +- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](/native.mdx) diff --git a/docs/troubleshooting/cors.mdx b/docs/troubleshooting/cors.mdx index 2cd1903db02..ae051e539cc 100644 --- a/docs/troubleshooting/cors.mdx +++ b/docs/troubleshooting/cors.mdx @@ -144,7 +144,7 @@ The browser automatically sends the appropriate headers for CORS in every reques ### A. Enabling CORS in a server you control -The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response-) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular. +The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular. Ionic apps may be run from different origins, but only one origin can be specified in the `Access-Control-Allow-Origin` header. Therefore we recommend checking the value of the `Origin` header from the request and reflecting it in the `Access-Control-Allow-Origin` header in the response. diff --git a/docs/troubleshooting/runtime.mdx b/docs/troubleshooting/runtime.mdx index 0c47434cdc4..d962cd4aa08 100644 --- a/docs/troubleshooting/runtime.mdx +++ b/docs/troubleshooting/runtime.mdx @@ -211,7 +211,7 @@ class MyApp { ## 関数のコールバックで`this`にアクセスすると`undefined`{/* #accessing-this */}が返されます -Certain components, such as [counterFormatter on ion-input](../api/input#prop-counter-formatter) and [pinFormatter on ion-range](../api/input#pinformatter), allow developers to pass callbacks. It's important that you bind the correct `this` value if you plan to access `this` from within the context of the callback. You may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`: +Certain components, such as [counterFormatter on ion-input](../api/input#prop-counter-formatter) and [pinFormatter on ion-range](/api/range.mdx#prop-pin-formatter), allow developers to pass callbacks. It's important that you bind the correct `this` value if you plan to access `this` from within the context of the callback. You may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`: The first way to bind `this` is to use the `bind()` method on a function instance. If you want to pass a callback called `counterFormatterFn`, then you would write `counterFormatterFn.bind(this)`. diff --git a/docs/updating/8-0.mdx b/docs/updating/8-0.mdx index b7037716843..0ca92c5e06c 100644 --- a/docs/updating/8-0.mdx +++ b/docs/updating/8-0.mdx @@ -215,13 +215,13 @@ iOS >=15 ### Checkbox -1. Migrate any remaining instances of Checkbox to use the [modern form control syntax](../v7/api/checkbox#migrating-from-legacy-checkbox-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Checkbox to use the [modern form control syntax](https://ionic-docs-mt82qcyb0-ionic1.vercel.app/docs/v7/api/checkbox#migrating-from-legacy-checkbox-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Input 1. Remove any usages of the `size` property. CSS should be used to specify the visible width of the input instead. 2. Remove any usages of the `accept` property. -3. Migrate any remaining instances of Input to use the [modern form control syntax](../v7/api/input#migrating-from-legacy-input-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +3. Migrate any remaining instances of Input to use the [modern form control syntax](https://ionic-docs-mt82qcyb0-ionic1.vercel.app/docs/v7/api/input#migrating-from-legacy-input-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Item @@ -243,19 +243,19 @@ iOS >=15 ### Radio -1. Migrate any remaining instances of Radio to use the [modern form control syntax](../v7/api/radio#migrating-from-legacy-radio-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Radio to use the [modern form control syntax](https://ionic-docs-mt82qcyb0-ionic1.vercel.app/docs/v7/api/radio#migrating-from-legacy-radio-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Select -1. Migrate any remaining instances of Select to use the [modern form control syntax](../v7/api/select#migrating-from-legacy-select-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Select to use the [modern form control syntax](https://ionic-docs-mt82qcyb0-ionic1.vercel.app/docs/v7/api/select#migrating-from-legacy-select-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Textarea -1. Migrate any remaining instances of Textarea to use the [modern form control syntax](../v7/api/textarea#migrating-from-legacy-textarea-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Textarea to use the [modern form control syntax](https://ionic-docs-mt82qcyb0-ionic1.vercel.app/docs/v7/api/textarea#migrating-from-legacy-textarea-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ### Toggle -1. Migrate any remaining instances of Toggle to use the [modern form control syntax](../v7/api/toggle#migrating-from-legacy-toggle-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. +1. Migrate any remaining instances of Toggle to use the [modern form control syntax](https://ionic-docs-mt82qcyb0-ionic1.vercel.app/docs/v7/api/toggle#migrating-from-legacy-toggle-syntax). Additionally, remove any usages of the `legacy` property as the legacy form control syntax has been removed. ## アップグレードに関してヘルプが必要ですか? diff --git a/docs/vue/add-to-existing.mdx b/docs/vue/add-to-existing.mdx index 684cde9ec48..d47b18d21d4 100644 --- a/docs/vue/add-to-existing.mdx +++ b/docs/vue/add-to-existing.mdx @@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards'; /> -This guide covers how to add Ionic Vue to an existing Vue project. If you're looking to start a new project from scratch, check out the [Ionic Vue Quickstart](/docs/vue/quickstart.mdx) guide. For an overview of how Ionic Vue works with Vue, including version support and tooling, check out the [Ionic Vue Overview](/docs/vue/overview.mdx). +This guide covers how to add Ionic Vue to an existing Vue project. If you're looking to start a new project from scratch, check out the [Ionic Vue Quickstart](/vue/quickstart.mdx) guide. For an overview of how Ionic Vue works with Vue, including version support and tooling, check out the [Ionic Vue Overview](/vue/overview.mdx). :::tip @@ -61,7 +61,7 @@ createApp(App).use(IonicVue).mount('#app'); :::info -While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/layout/global-stylesheets.mdx). ::: @@ -82,7 +82,7 @@ import { IonButton, IonDatetime } from '@ionic/vue'; ``` -Visit the [components](/docs/components.mdx) page for all of the available Ionic components. +Visit the [components](/components.mdx) page for all of the available Ionic components. ## Using Ionic Pages @@ -110,7 +110,7 @@ import '@ionic/vue/css/flex-utils.css'; import '@ionic/vue/css/display.css'; ``` -These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +These stylesheets set up the overall page structure and provide [CSS utilities](/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/layout/global-stylesheets.mdx). #### 2. Set up Theming @@ -162,7 +162,7 @@ import './theme/variables.css'; createApp(App).use(IonicVue).mount('#app'); ``` -The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`. +The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`. #### 3. Update the App Component @@ -334,11 +334,11 @@ Now that you have Ionic Vue integrated into your project, check out:

Discover how to handle routing and navigation in Ionic Vue apps using the Vue Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/docs/vue/your-first-app.mdx b/docs/vue/your-first-app.mdx index e483ec7add0..860234683e3 100644 --- a/docs/vue/your-first-app.mdx +++ b/docs/vue/your-first-app.mdx @@ -32,7 +32,7 @@ Highlights include: - One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](/native/camera.mdx), [Filesystem](/native/filesystem.mdx), and [Preferences](/native/preferences.mdx) APIs. Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-vue) referenced in this guide on GitHub. @@ -88,7 +88,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ### PWA Elements -Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). +Some Capacitor plugins, including the [Camera API](/native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). It's a separate dependency, so install it next: diff --git a/docs/vue/your-first-app/2-taking-photos.mdx b/docs/vue/your-first-app/2-taking-photos.mdx index 006ef17c41d..4dcff0e11df 100644 --- a/docs/vue/your-first-app/2-taking-photos.mdx +++ b/docs/vue/your-first-app/2-taking-photos.mdx @@ -11,7 +11,7 @@ sidebar_label: カメラ撮影 /> -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](/native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Gallery Composable diff --git a/docs/vue/your-first-app/3-saving-photos.mdx b/docs/vue/your-first-app/3-saving-photos.mdx index 1cd70379b2a..7334ecd6a1d 100644 --- a/docs/vue/your-first-app/3-saving-photos.mdx +++ b/docs/vue/your-first-app/3-saving-photos.mdx @@ -92,7 +92,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](/native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/docs/vue/your-first-app/4-loading-photos.mdx b/docs/vue/your-first-app/4-loading-photos.mdx index 887510813fc..8ab02133049 100644 --- a/docs/vue/your-first-app/4-loading-photos.mdx +++ b/docs/vue/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: 写真の読み込み We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](/native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/package-lock.json b/package-lock.json index fba0e6d3abe..50aaa18c9a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -7867,9 +7867,9 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "19.2.18", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz", - "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz", + "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==", "license": "MIT", "dependencies": { "csstype": "^3.2.2" @@ -18808,24 +18808,24 @@ } }, "node_modules/react": { - "version": "19.2.8", - "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz", - "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz", + "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==", "license": "MIT", "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "19.2.8", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz", - "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz", + "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==", "license": "MIT", "dependencies": { - "scheduler": "^0.27.0" + "scheduler": "^0.28.0" }, "peerDependencies": { - "react": "^19.2.8" + "react": "^19.3.0" } }, "node_modules/react-fast-compare": { @@ -19530,9 +19530,9 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.104.0", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.104.0.tgz", - "integrity": "sha512-btHMApW2bgolvClhRW8AlQJzgI9lUB3pPSofBQQT+E46GWvf9o0TVQ13SYv5riWZVFyPN+JNz3TKW9XhBlc10w==", + "version": "1.104.1", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.104.1.tgz", + "integrity": "sha512-yDA+1aIG3EHgN4V/BvuhCvu61FF6hEd4e+9DxikUm9U0CAGuvdIZ/UYy7qbOxjhbbWQraoyLlMuzdRGOSV5Bmw==", "license": "MIT", "dependencies": { "chokidar": "^5.0.0", @@ -19626,9 +19626,9 @@ } }, "node_modules/scheduler": { - "version": "0.27.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", - "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "version": "0.28.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz", + "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==", "license": "MIT" }, "node_modules/schema-dts": { diff --git a/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index 1f88c41b28e..6e562ecbc73 100644 --- a/plugins/docusaurus-plugin-ionic-component-api/index.js +++ b/plugins/docusaurus-plugin-ionic-component-api/index.js @@ -9,6 +9,21 @@ module.exports = function (context, options) { const data = []; const currentVersion = docsPluginOptions.versions.current; + /** + * The API data is authored as full site URLs, so its links carry the + * baseUrl, for example `[theming](/docs/theming/basics)`. Docusaurus + * prepends the baseUrl of the locale being built, and the Japanese one + * is `/docs/ja/`, so the prefix doubles and the link 404s. Dropping it + * here lets Docusaurus add the right one for whichever locale is + * building. + * + * This has to come from the default locale. `context.baseUrl` and + * `context.siteConfig.baseUrl` are both overridden to the locale's own + * baseUrl, so neither one is the prefix the source actually wrote. + */ + const { baseUrl } = context.i18n.localeConfigs[context.i18n.defaultLocale]; + const dropBaseUrl = (json) => json.replaceAll(`](${baseUrl}`, '](/'); + /** * Generates the markdown files for all components in a given version. * @param {*} version The version, e.g.: v6 @@ -19,20 +34,19 @@ module.exports = function (context, options) { const generateMarkdownForVersion = async (version, npmTag, lang, isCurrentVersion) => { let COMPONENT_LINK_REGEXP; const components = await (async () => { - if (isCurrentVersion) { - const { components } = require(process.cwd() + `/scripts/data/translated-api.json`); - return components; - } else { - const response = await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`); - const { components } = await response.json(); - return components; - } + const data = isCurrentVersion + ? require(process.cwd() + `/scripts/data/translated-api.json`) + : await (await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`)).json(); + // The API data's links carry the `/docs` baseUrl, which doubles once this + // content is built as a locale of the main site. Drop it and let Docusaurus + // add the right one. + return JSON.parse(dropBaseUrl(JSON.stringify(data))).components; })(); // const response = // isCurrentVersion && lang === 'ja' // ? await fetch(`https://raw.githubusercontent.com/ionic-jp/ionic-docs/main/scripts/data/translated-api.json`) // : await fetch(`https://unpkg.com/@ionic/docs@${npmTag}/core.json`); - // const { components } = await response.json(); + // const { components } = JSON.parse(dropBaseUrl(await response.text())); const names = components.map((component) => component.tag.slice(4)); // matches all relative markdown links to a component, e.g. (../button) @@ -214,7 +228,7 @@ ${properties let docs = prop.docs; if (isVirtual) { - docs = `${docs}\n\nThis is a [virtual property](/docs/core-concepts/fundamentals#virtual-properties) that is set once during initialization and will not update if you change its value after the initial render.`; + docs = `${docs}\n\nThis is a [virtual property](/core-concepts/fundamentals#virtual-properties) that is set once during initialization and will not update if you change its value after the initial render.`; } if (isDeprecated) { docs = `${docs}\n\n**_Deprecated_** — ${prop.deprecation}`; diff --git a/sidebars.js b/sidebars.js index b8e4d24f6dd..43334544ef1 100644 --- a/sidebars.js +++ b/sidebars.js @@ -44,7 +44,7 @@ module.exports = { { type: 'link', label: 'Responsive Grid', - href: '/docs/api/grid', + href: '/api/grid', }, 'layout/global-stylesheets', 'layout/css-utilities', diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index b5c117ffc84..10b61dd4a90 100644 --- a/src/components/global/Playground/index.tsx +++ b/src/components/global/Playground/index.tsx @@ -95,6 +95,28 @@ const CodeBlockButton = ({ type MdxContent = () => ReactNode; +/** + * Reads the source of a rendered Docusaurus code block back out of the DOM. + * + * Each highlighted line is rendered as an element with the `token-line` class. + * Prism splits the source on newlines, so the breaks between lines are not part + * of the token text and have to be added back when joining. + */ +function getCodeBlockText(codeBlock: HTMLElement) { + const lines = codeBlock.querySelectorAll('.token-line'); + + // Not a highlighted code block, so there are no lines to join. + if (lines.length === 0) { + return codeBlock.textContent; + } + + // Prism gives blank lines a synthetic '\n' token. Docusaurus currently blanks + // those out before rendering, but strip them in case that changes. + return Array.from(lines) + .map((line) => line.textContent.replace(/\n/g, '')) + .join('\n'); +} + /** * The advanced configuration of options when creating a * playground example with multiple files for a single usage target @@ -582,8 +604,7 @@ export default function Playground({ version, }; - // using outerText will preserve line breaks for formatting in StackBlitz editor - const codeBlock = codeRef.current?.querySelector('code')?.outerText ?? ''; + const codeBlock = getCodeBlockText(codeRef.current!.querySelector('code')!); if (hasUsageTargetOptions) { editorOptions.files = Object.keys((codeSnippets[usageTarget] ?? {}) as Record) @@ -591,24 +612,8 @@ export default function Playground({ const codeBlock = hostRef.current!.querySelector( `#${getCodeSnippetId(usageTarget, fileName)} code` ); - let code = codeBlock?.outerText ?? ''; - - if (code.trim().length === 0) { - /** - * Safari has an issue where accessing the `outerText` on a non-visible - * DOM element results in a string with only whitespace. To work around this, - * we create a clone of the element, not attached to the DOM, and parse - * the outerText from that. - * - * Only in Safari does this persist whitespace & line breaks, so we - * explicitly check for when the code is empty to use this workaround. - */ - const el = document.createElement('div'); - el.innerHTML = codeBlock?.innerHTML ?? ''; - code = el.outerText; - } return { - [fileName]: code, + [fileName]: getCodeBlockText(codeBlock!), }; }) .reduce((acc, curr) => ({ ...acc, ...curr }), {}); diff --git a/src/components/page/reference/ReleaseNotes/index.tsx b/src/components/page/reference/ReleaseNotes/index.tsx index eb3d3757c7a..5f8cfcc03ef 100644 --- a/src/components/page/reference/ReleaseNotes/index.tsx +++ b/src/components/page/reference/ReleaseNotes/index.tsx @@ -1,3 +1,4 @@ +import Link from '@docusaurus/Link'; import clsx from 'clsx'; import React from 'react'; import releases from './release-notes.json'; @@ -22,10 +23,7 @@ export default function ReleaseNotes(props: { [key: string]: any }) { return [

Unable to load Releases. Please see all releases{' '} - - on GitHub - - . + on GitHub.

, ]; } @@ -34,15 +32,13 @@ export default function ReleaseNotes(props: { [key: string]: any }) {

A complete release history for Ionic Framework is available{' '} - - on GitHub - - . Documentation for recent releases can also be found below. + on GitHub. Documentation for recent + releases can also be found below.

See versioning for information about our{' '} - policy and commitment to stability. + policy and commitment to stability.

{releases.map((release: Release, index) => ( @@ -52,11 +48,11 @@ export default function ReleaseNotes(props: { [key: string]: any }) { >
- +

{release.version}

- + {release.type} {index === 0 ? ( @@ -77,11 +73,7 @@ export default function ReleaseNotes(props: { [key: string]: any }) { ))}
- To see more releases, visit{' '} - - GitHub - - . + To see more releases, visit GitHub.
); diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index f6c2a8f016e..ecaa1cb4317 100644 --- a/static/code/stackblitz/v8/react/package-lock.json +++ b/static/code/stackblitz/v8/react/package-lock.json @@ -1251,30 +1251,30 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "24.13.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz", - "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==", + "version": "24.13.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.4.tgz", + "integrity": "sha512-YJ7EqCstVTzIr0fMr7qul/977en+pQHrfmuKIo6Zr9i75Be21dr3MovcfvGtyvi2HAUrRerWps5sMO9I7WaxDw==", "license": "MIT", "dependencies": { "undici-types": "~7.18.0" } }, "node_modules/@types/react": { - "version": "19.2.18", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz", - "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz", + "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==", "license": "MIT", "dependencies": { "csstype": "^3.2.2" } }, "node_modules/@types/react-dom": { - "version": "19.2.7", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.7.tgz", - "integrity": "sha512-I8bPpDLcHBv1qiIiXDCy71Rt8eQDKJP0sMSWJphDdAcdqiJ1sGpZamavoEIRZmYzjia9LuEb2HlYdDpmoENpvQ==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz", + "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==", "license": "MIT", "peerDependencies": { - "@types/react": "^19.2.0" + "@types/react": "^19.3.0" } }, "node_modules/@types/react-router": { @@ -1715,24 +1715,24 @@ } }, "node_modules/react": { - "version": "19.2.8", - "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz", - "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz", + "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==", "license": "MIT", "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "19.2.8", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz", - "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz", + "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==", "license": "MIT", "dependencies": { - "scheduler": "^0.27.0" + "scheduler": "^0.28.0" }, "peerDependencies": { - "react": "^19.2.8" + "react": "^19.3.0" } }, "node_modules/react-is": { @@ -1955,9 +1955,9 @@ ] }, "node_modules/scheduler": { - "version": "0.27.0", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.27.0.tgz", - "integrity": "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==", + "version": "0.28.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz", + "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==", "license": "MIT" }, "node_modules/semver": { diff --git a/static/code/stackblitz/v9/angular/package-lock.json b/static/code/stackblitz/v9/angular/package-lock.json index 926655fe948..6d436bfab64 100644 --- a/static/code/stackblitz/v9/angular/package-lock.json +++ b/static/code/stackblitz/v9/angular/package-lock.json @@ -14,8 +14,8 @@ "@angular/platform-browser": "^22.0.0", "@angular/platform-browser-dynamic": "^22.0.0", "@angular/router": "^22.0.0", - "@ionic/angular": "9.0.3", - "@ionic/core": "9.0.3", + "@ionic/angular": "9.0.4", + "@ionic/core": "9.0.4", "ionicons": "8.1.0", "rxjs": "^7.8.1", "tslib": "^2.5.0" @@ -2578,12 +2578,12 @@ } }, "node_modules/@ionic/angular": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-9.0.3.tgz", - "integrity": "sha512-WLs476ov6QhkDdh35YJlADvNTTbBzkIDe6HfHPSNtxPwiTgKArZB9npcu5jaMlXdiR/5T6PPvEEYX9uoanpFlQ==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-9.0.4.tgz", + "integrity": "sha512-lGddXHacpnhBFUNqRHwWCF2U2ei4VaFaBuJWrlin56lRnASm3ZVbMWUA/+6Vv+2n2/BTeP8MOv4Ga/DISkuRPg==", "license": "MIT", "dependencies": { - "@ionic/core": "9.0.3", + "@ionic/core": "9.0.4", "ionicons": "^8.0.13", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -2602,9 +2602,9 @@ } }, "node_modules/@ionic/core": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.3.tgz", - "integrity": "sha512-H5bKZHBSkUMKSOw/cPbENtdIykW1JvZWS80TFDQiF2wS6YMus7sugO64EgCS+/HcKbi8jjhmDyb+W0zVjgwKbg==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.4.tgz", + "integrity": "sha512-tNYTxBt8+Tla61B8OwAeEHuTWuJdJn6+buftCNikhPHi5TW9MbduIPsWn+D8KtlWhZKPVshVyvItfWcYxMN3JA==", "license": "MIT", "dependencies": { "@stencil/core": "^4.44.2", diff --git a/static/code/stackblitz/v9/angular/package.json b/static/code/stackblitz/v9/angular/package.json index 0ce54037b6f..bdc97279acc 100644 --- a/static/code/stackblitz/v9/angular/package.json +++ b/static/code/stackblitz/v9/angular/package.json @@ -15,8 +15,8 @@ "@angular/platform-browser": "^22.0.0", "@angular/platform-browser-dynamic": "^22.0.0", "@angular/router": "^22.0.0", - "@ionic/angular": "9.0.3", - "@ionic/core": "9.0.3", + "@ionic/angular": "9.0.4", + "@ionic/core": "9.0.4", "ionicons": "8.1.0", "rxjs": "^7.8.1", "tslib": "^2.5.0" diff --git a/static/code/stackblitz/v9/html/package-lock.json b/static/code/stackblitz/v9/html/package-lock.json index 66de0687df8..d5f2fcda0be 100644 --- a/static/code/stackblitz/v9/html/package-lock.json +++ b/static/code/stackblitz/v9/html/package-lock.json @@ -6,7 +6,7 @@ "": { "name": "html-starter", "dependencies": { - "@ionic/core": "9.0.3", + "@ionic/core": "9.0.4", "ionicons": "8.1.0" }, "devDependencies": { @@ -16,9 +16,9 @@ } }, "node_modules/@ionic/core": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.3.tgz", - "integrity": "sha512-H5bKZHBSkUMKSOw/cPbENtdIykW1JvZWS80TFDQiF2wS6YMus7sugO64EgCS+/HcKbi8jjhmDyb+W0zVjgwKbg==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.4.tgz", + "integrity": "sha512-tNYTxBt8+Tla61B8OwAeEHuTWuJdJn6+buftCNikhPHi5TW9MbduIPsWn+D8KtlWhZKPVshVyvItfWcYxMN3JA==", "license": "MIT", "dependencies": { "@stencil/core": "^4.44.2", diff --git a/static/code/stackblitz/v9/html/package.json b/static/code/stackblitz/v9/html/package.json index ff469442797..f69ea945112 100644 --- a/static/code/stackblitz/v9/html/package.json +++ b/static/code/stackblitz/v9/html/package.json @@ -9,7 +9,7 @@ "start": "vite preview" }, "dependencies": { - "@ionic/core": "9.0.3", + "@ionic/core": "9.0.4", "ionicons": "8.1.0" }, "devDependencies": { diff --git a/static/code/stackblitz/v9/react/package-lock.json b/static/code/stackblitz/v9/react/package-lock.json index e010bb8e63b..4802526d2c6 100644 --- a/static/code/stackblitz/v9/react/package-lock.json +++ b/static/code/stackblitz/v9/react/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-react-typescript", "version": "0.1.0", "dependencies": { - "@ionic/react": "9.0.3", - "@ionic/react-router": "9.0.3", + "@ionic/react": "9.0.4", + "@ionic/react-router": "9.0.4", "@types/node": "^24.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", @@ -254,9 +254,9 @@ "license": "MIT" }, "node_modules/@ionic/core": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.3.tgz", - "integrity": "sha512-H5bKZHBSkUMKSOw/cPbENtdIykW1JvZWS80TFDQiF2wS6YMus7sugO64EgCS+/HcKbi8jjhmDyb+W0zVjgwKbg==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.4.tgz", + "integrity": "sha512-tNYTxBt8+Tla61B8OwAeEHuTWuJdJn6+buftCNikhPHi5TW9MbduIPsWn+D8KtlWhZKPVshVyvItfWcYxMN3JA==", "license": "MIT", "dependencies": { "@stencil/core": "^4.44.2", @@ -268,12 +268,12 @@ } }, "node_modules/@ionic/react": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-9.0.3.tgz", - "integrity": "sha512-Z/r5S8blIqDrgiW1+aIEQgQ2dLgDQSpTaYD43JiT6mDP9NVvYpahlSSyZ32XV/N6vnu8tHD9rdfPHyRkkDI4QQ==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-9.0.4.tgz", + "integrity": "sha512-SR43RjjD0g/AbaJU7AIp+g9QD3+HsiOJLPpryTCfx/WYSAnpvuLPQCpIavRmlQsqgjc5Jba4CVtzwkD0n04ctw==", "license": "MIT", "dependencies": { - "@ionic/core": "9.0.3", + "@ionic/core": "9.0.4", "@stencil/react-output-target": "^1.6.2", "ionicons": "^8.0.13", "tslib": "*" @@ -284,12 +284,12 @@ } }, "node_modules/@ionic/react-router": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-9.0.3.tgz", - "integrity": "sha512-XgTn7J0c/Tlv7uO8RH5W7pXL24h4jDZTfZ8GccD3bsq2jkiO0Vf/fwFwQM6lb2Ld6Vknz+fJiH3zFBAHWd1qFg==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-9.0.4.tgz", + "integrity": "sha512-7ErfMiEQcZ/p0WWwMI0QHEaR3/ZkMqNzkekb1m/tVaUnUIjTEesCFTqPmm8wBElHIolrTQEBw2cyRI79iQZarg==", "license": "MIT", "dependencies": { - "@ionic/react": "9.0.3", + "@ionic/react": "9.0.4", "tslib": "*" }, "peerDependencies": { @@ -568,30 +568,30 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "24.13.3", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.3.tgz", - "integrity": "sha512-Dh8vAsV36ig5wa9OX4pXvMc9D3Veibfw2wix0CUwYODLD8nkj9UsLjASr49nPg+2eKzxhBV+v7L8pXvT4e639Q==", + "version": "24.13.4", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.4.tgz", + "integrity": "sha512-YJ7EqCstVTzIr0fMr7qul/977en+pQHrfmuKIo6Zr9i75Be21dr3MovcfvGtyvi2HAUrRerWps5sMO9I7WaxDw==", "license": "MIT", "dependencies": { "undici-types": "~7.18.0" } }, "node_modules/@types/react": { - "version": "19.2.18", - "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.18.tgz", - "integrity": "sha512-AnzbBERsrLKtk2XSfTbYRLjQPdy116Sty4q+T+Bp3IC4l6jNBvreVPAHmpq9qhXQM7CXZPjLVmGMw9sy+hxQ3w==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/@types/react/-/react-19.3.0.tgz", + "integrity": "sha512-N0rFCuH9YoxG9/m61l9MfpJKfmLOVU0em7ipIz6TRgSSkvReLB9vL85GB+yr8Bs5leqpvg96JSwF4ZS1s4viQg==", "license": "MIT", "dependencies": { "csstype": "^3.2.2" } }, "node_modules/@types/react-dom": { - "version": "19.2.7", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.7.tgz", - "integrity": "sha512-I8bPpDLcHBv1qiIiXDCy71Rt8eQDKJP0sMSWJphDdAcdqiJ1sGpZamavoEIRZmYzjia9LuEb2HlYdDpmoENpvQ==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz", + "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==", "license": "MIT", "peerDependencies": { - "@types/react": "^19.2.0" + "@types/react": "^19.3.0" } }, "node_modules/@vitejs/plugin-react": { @@ -1036,24 +1036,24 @@ } }, "node_modules/react": { - "version": "19.2.8", - "resolved": "https://registry.npmjs.org/react/-/react-19.2.8.tgz", - "integrity": "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/react/-/react-19.3.0.tgz", + "integrity": "sha512-E8LUcbtBWt20bbl2YoHfx4ZDBdxVTfOKtCZn9cDSJ4l6/nuoApcpIBcj47t2wZoVX8g2ZHuMHbiShgCR1T5Sog==", "license": "MIT", "engines": { "node": ">=0.10.0" } }, "node_modules/react-dom": { - "version": "19.2.8", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.8.tgz", - "integrity": "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ==", + "version": "19.3.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.3.0.tgz", + "integrity": "sha512-JDk8dgif51OjFoDE70+OT9ICyYr+69HlmihNwp1+Nsfbna3t5sIiCa9ZJktDmQ4/1b/rn26hIAR2uYXDMr5r0Q==", "license": "MIT", "dependencies": { - "scheduler": "^0.27.0" + "scheduler": "^0.28.0" }, "peerDependencies": { - "react": "^19.2.8" + "react": "^19.3.0" } }, "node_modules/react-property": { @@ -1128,7 +1128,9 @@ } }, "node_modules/scheduler": { - "version": "0.27.0", + "version": "0.28.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.28.0.tgz", + "integrity": "sha512-juorfCmIkIw8tT+p5BXSm6PJjQF/ycEYmKyzURCIt/RaZIhL+PulbQ9Yu2z1HdOJDdqDTlxA1+xKBmHXJsczAw==", "license": "MIT" }, "node_modules/semver": { diff --git a/static/code/stackblitz/v9/react/package.json b/static/code/stackblitz/v9/react/package.json index af3d933fcb7..b4e1004d07c 100644 --- a/static/code/stackblitz/v9/react/package.json +++ b/static/code/stackblitz/v9/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "9.0.3", - "@ionic/react-router": "9.0.3", + "@ionic/react": "9.0.4", + "@ionic/react-router": "9.0.4", "@types/node": "^24.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", diff --git a/static/code/stackblitz/v9/vue/package-lock.json b/static/code/stackblitz/v9/vue/package-lock.json index 69dfa77ece3..bdfba70c54a 100644 --- a/static/code/stackblitz/v9/vue/package-lock.json +++ b/static/code/stackblitz/v9/vue/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-vue-starter", "version": "0.0.0", "dependencies": { - "@ionic/vue": "9.0.3", - "@ionic/vue-router": "9.0.3", + "@ionic/vue": "9.0.4", + "@ionic/vue-router": "9.0.4", "vue": "^3.2.25", "vue-router": "5.3.1" }, @@ -63,9 +63,9 @@ } }, "node_modules/@ionic/core": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.3.tgz", - "integrity": "sha512-H5bKZHBSkUMKSOw/cPbENtdIykW1JvZWS80TFDQiF2wS6YMus7sugO64EgCS+/HcKbi8jjhmDyb+W0zVjgwKbg==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.4.tgz", + "integrity": "sha512-tNYTxBt8+Tla61B8OwAeEHuTWuJdJn6+buftCNikhPHi5TW9MbduIPsWn+D8KtlWhZKPVshVyvItfWcYxMN3JA==", "license": "MIT", "dependencies": { "@stencil/core": "^4.44.2", @@ -77,23 +77,23 @@ } }, "node_modules/@ionic/vue": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-9.0.3.tgz", - "integrity": "sha512-HqAxZ4aEL1Y1O0PAHTN3cxx11t/rgyxeRxyhb5lhhlWqCk8MRksiNm89wDnZZJanhZemFMbFwAyG7SumYUFFTQ==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-9.0.4.tgz", + "integrity": "sha512-tFGJnnsD1ODiu8daRtOdoB/ee+N7qkaqXZvpFFqpGgTgFcsfwf4gJCCg5JsCrKfoRb0dS8LAyrwI8WZ7k+tUhw==", "license": "MIT", "dependencies": { - "@ionic/core": "9.0.3", + "@ionic/core": "9.0.4", "@stencil/vue-output-target": "0.14.2", "ionicons": "^8.0.13" } }, "node_modules/@ionic/vue-router": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-9.0.3.tgz", - "integrity": "sha512-fMSEBDI/BsQBq+ZzpxZIJUqbm6H6lp9Cz4IMo4pM6eZfw51QmcDXOvenZYSvs1Dzwjv22eBRMp72HmQECjPnRg==", + "version": "9.0.4", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-9.0.4.tgz", + "integrity": "sha512-C136j+B2cVBSEDiZaJReB5VO/z+0uc1qo9grn8bLzuSM/Y9iz11YWgxhII0hUq2WEXzLBexEn1JUGSXJdiWLBA==", "license": "MIT", "dependencies": { - "@ionic/vue": "9.0.3" + "@ionic/vue": "9.0.4" } }, "node_modules/@jridgewell/gen-mapping": { diff --git a/static/code/stackblitz/v9/vue/package.json b/static/code/stackblitz/v9/vue/package.json index 442ab4287ff..9528839e8b6 100644 --- a/static/code/stackblitz/v9/vue/package.json +++ b/static/code/stackblitz/v9/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "9.0.3", - "@ionic/vue-router": "9.0.3", + "@ionic/vue": "9.0.4", + "@ionic/vue-router": "9.0.4", "vue": "^3.2.25", "vue-router": "5.3.1" }, diff --git a/static/usage/v9/modal/styling/sizing-to-content/angular/example_component_css.md b/static/usage/v9/modal/styling/sizing-to-content/angular/example_component_css.md new file mode 100644 index 00000000000..92b72024d72 --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/angular/example_component_css.md @@ -0,0 +1,8 @@ +```css +ion-modal { + --height: fit-content; + --width: 90%; + --border-radius: 8px; + --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); +} +``` diff --git a/static/usage/v9/modal/styling/sizing-to-content/angular/example_component_html.md b/static/usage/v9/modal/styling/sizing-to-content/angular/example_component_html.md new file mode 100644 index 00000000000..3e5f8f3d892 --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/angular/example_component_html.md @@ -0,0 +1,32 @@ +```html + + + App + + + + Open Modal + + + + + + Modal + + Close + + + + + + @for (item of ['Item 1', 'Item 2', 'Item 3']; track item) { + + {{ item }} + + } + + + + + +``` diff --git a/static/usage/v9/modal/styling/sizing-to-content/angular/example_component_ts.md b/static/usage/v9/modal/styling/sizing-to-content/angular/example_component_ts.md new file mode 100644 index 00000000000..45071ee7432 --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/angular/example_component_ts.md @@ -0,0 +1,23 @@ +```ts +import { Component } from '@angular/core'; +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonTitle, + IonToolbar, +} from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonButton, IonButtons, IonContent, IonHeader, IonItem, IonLabel, IonList, IonModal, IonTitle, IonToolbar], +}) +export class ExampleComponent {} +``` diff --git a/static/usage/v9/modal/styling/sizing-to-content/demo.html b/static/usage/v9/modal/styling/sizing-to-content/demo.html new file mode 100644 index 00000000000..33eab3e0afc --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/demo.html @@ -0,0 +1,61 @@ + + + + + + Modal | Sizing to Content + + + + + + + + + + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + + + + + diff --git a/static/usage/v9/modal/styling/sizing-to-content/index.mdx b/static/usage/v9/modal/styling/sizing-to-content/index.mdx new file mode 100644 index 00000000000..2421774fa2c --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/index.mdx @@ -0,0 +1,35 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import vue from './vue.md'; + +import react_main_tsx from './react/main_tsx.md'; +import react_main_css from './react/main_css.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_css from './angular/example_component_css.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v9/modal/styling/sizing-to-content/javascript.md b/static/usage/v9/modal/styling/sizing-to-content/javascript.md new file mode 100644 index 00000000000..abbaaaaa6c3 --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/javascript.md @@ -0,0 +1,47 @@ +```html + + + + + App + + + + Open Modal + + + + + Modal + + Close + + + + + + + Item 1 + + + Item 2 + + + Item 3 + + + + + + + +``` diff --git a/static/usage/v9/modal/styling/sizing-to-content/react/main_css.md b/static/usage/v9/modal/styling/sizing-to-content/react/main_css.md new file mode 100644 index 00000000000..92b72024d72 --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/react/main_css.md @@ -0,0 +1,8 @@ +```css +ion-modal { + --height: fit-content; + --width: 90%; + --border-radius: 8px; + --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); +} +``` diff --git a/static/usage/v9/modal/styling/sizing-to-content/react/main_tsx.md b/static/usage/v9/modal/styling/sizing-to-content/react/main_tsx.md new file mode 100644 index 00000000000..834160ac40d --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/react/main_tsx.md @@ -0,0 +1,63 @@ +```tsx +import React, { useRef } from 'react'; +import { + IonButton, + IonButtons, + IonContent, + IonHeader, + IonItem, + IonLabel, + IonList, + IonModal, + IonPage, + IonTitle, + IonToolbar, +} from '@ionic/react'; + +import './main.css'; + +function Example() { + const modal = useRef(null); + + function dismiss() { + modal.current?.dismiss(); + } + + return ( + + + + App + + + + + Open Modal + + + + + + Modal + + dismiss()}>Close + + + + + + {['Item 1', 'Item 2', 'Item 3'].map((item) => ( + + {item} + + ))} + + + + + + ); +} + +export default Example; +``` diff --git a/static/usage/v9/modal/styling/sizing-to-content/vue.md b/static/usage/v9/modal/styling/sizing-to-content/vue.md new file mode 100644 index 00000000000..33dedffb3ad --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/vue.md @@ -0,0 +1,59 @@ +```vue + + + + + +``` diff --git a/versioned_docs/version-v5/api.mdx b/versioned_docs/version-v5/api.mdx index 1225bdeda80..b0203d54b91 100644 --- a/versioned_docs/version-v5/api.mdx +++ b/versioned_docs/version-v5/api.mdx @@ -6,6 +6,6 @@ import APIList from '@components/page/api/APIList'; # API Index -Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. +Each Ionic [component](/components.mdx) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. diff --git a/versioned_docs/version-v5/cli.mdx b/versioned_docs/version-v5/cli.mdx index 0594d11c7b5..8f1eb1c943e 100644 --- a/versioned_docs/version-v5/cli.mdx +++ b/versioned_docs/version-v5/cli.mdx @@ -6,7 +6,7 @@ description: The Ionic command-line interface (CLI) is the go-to tool for develo # Ionic CLI -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps. +The Ionic command-line interface ([CLI](/reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps. ## Installation @@ -34,14 +34,14 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](/reference/glossary.mdx#typescript) and [Node.js](/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting To troubleshoot issues with the Ionic CLI, the following may be useful: - Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`. -- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment#node-npm) environment setup. +- Make sure the latest Node LTS is installed. See [Node & npm](/intro/environment.mdx#node--npm) environment setup. - The `--verbose` flag prints debugging messages, which may narrow down the issue. -- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying. -- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables). +- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/cli/using-a-proxy.mdx) to configure request proxying. +- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/cli/configuration.mdx#environment-variables). diff --git a/versioned_docs/version-v5/core-concepts/fundamentals.mdx b/versioned_docs/version-v5/core-concepts/fundamentals.mdx index caf6eefe548..d985f3e1068 100644 --- a/versioned_docs/version-v5/core-concepts/fundamentals.mdx +++ b/versioned_docs/version-v5/core-concepts/fundamentals.mdx @@ -47,7 +47,7 @@ Developers can use standard events such as `click` as they normally would. Howev ## Properties -Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's [API documentation](/docs/api) page. +Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's [API documentation](/api.mdx) page. ### Reactive Properties @@ -69,4 +69,4 @@ Virtual properties are designed for one-time configuration during component init The `mode` property is a virtual property that determines which platform styles to use for a component. It can be set at the component level or globally through the app configuration. In both cases, it's set once during initialization and doesn't change during the component's lifecycle. -For more information on Ionic modes, read the [Platform Styles documentation](/docs/theming/platform-styles). +For more information on Ionic modes, read the [Platform Styles documentation](/theming/platform-styles.mdx). diff --git a/versioned_docs/version-v5/index.mdx b/versioned_docs/version-v5/index.mdx index 607bf8ce35f..e7bda1fa237 100644 --- a/versioned_docs/version-v5/index.mdx +++ b/versioned_docs/version-v5/index.mdx @@ -112,7 +112,7 @@ Support for other frameworks will be considered in future releases. ## Ionic CLI -The official [Ionic CLI](cli), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#ionic-appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account. +The official [Ionic CLI](cli), or Command Line Interface, is a tool that quickly scaffolds Ionic apps and provides a number of helpful commands to Ionic developers. In addition to installing and updating Ionic, the CLI comes with a built-in development server, build and debugging tools, and much more. If you are an [Appflow](#appflow) member, the CLI can be used to perform cloud builds and deployments, and administer your account. ## Appflow diff --git a/versioned_docs/version-v5/intro/environment.mdx b/versioned_docs/version-v5/intro/environment.mdx index 9da996cfc61..0fc1bea4bc0 100644 --- a/versioned_docs/version-v5/intro/environment.mdx +++ b/versioned_docs/version-v5/intro/environment.mdx @@ -1,6 +1,6 @@ # Environment Setup -To get started with Ionic Framework, the only requirement is a [Node & npm](#node-npm) environment. +To get started with Ionic Framework, the only requirement is a [Node & npm](#node--npm) environment. Of course, a code editor is also required. [Visual Studio Code](https://code.visualstudio.com/) is recommended. Visual Studio Code is a free, batteries-included text editor made by Microsoft. diff --git a/versioned_docs/version-v5/layout/global-stylesheets.mdx b/versioned_docs/version-v5/layout/global-stylesheets.mdx index 7c327fbe4be..216e881f713 100644 --- a/versioned_docs/version-v5/layout/global-stylesheets.mdx +++ b/versioned_docs/version-v5/layout/global-stylesheets.mdx @@ -46,11 +46,11 @@ Adds utility classes to float an element based on the breakpoint and side, see [ #### text-alignment.css -Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-alignment) for usage information. +Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-align) for usage information. #### text-transformation.css -Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-transformation) for usage information. +Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-transform) for usage information. #### flex-utils.css diff --git a/versioned_docs/version-v5/native.mdx b/versioned_docs/version-v5/native.mdx index 4a6e958660c..229ac6130cd 100644 --- a/versioned_docs/version-v5/native.mdx +++ b/versioned_docs/version-v5/native.mdx @@ -36,7 +36,7 @@ Build native-powered app experiences with a collection of open source and premiu {/* prettier-ignore */}

A modern, open source native runtime built and maintained by the Ionic team and the Capacitor community. Our recommended native solution.

 - + {/* prettier-ignore */}

A collection of free Cordova plugins, built and maintained by the community, with TypeScript wrappers and a consistent API and naming convention.

 diff --git a/versioned_docs/version-v5/react.mdx b/versioned_docs/version-v5/react.mdx index 64907072b16..dd0b7f5c8e9 100644 --- a/versioned_docs/version-v5/react.mdx +++ b/versioned_docs/version-v5/react.mdx @@ -44,7 +44,7 @@ It's everything you need to ship award-winning apps for any platform, with React Choose from over 100 beautiful, mobile-ready UI components, animations, and gestures, lightweight and customized to fit your brand. -[Explore UI components](/docs/components) +[Explore UI components](/components.mdx) @@ -60,7 +60,7 @@ Choose from over 100 beautiful, mobile-ready UI components, animations, and gest ## Familiar tooling -Ionic React projects are just like React projects, leveraging [react-dom](https://reactjs.org/docs/react-dom.html) and with setup normally found in a [Create React App (CRA)](https://github.com/facebook/create-react-app) app. For [routing and navigation](/docs/react/navigation), React Router is used under the hood. +Ionic React projects are just like React projects, leveraging [react-dom](https://reactjs.org/docs/react-dom.html) and with setup normally found in a [Create React App (CRA)](https://github.com/facebook/create-react-app) app. For [routing and navigation](/react/navigation.mdx), React Router is used under the hood. Compatible with React version 16.8 and above. diff --git a/versioned_docs/version-v5/reference/migration.mdx b/versioned_docs/version-v5/reference/migration.mdx index 165d7fc0b11..ad70e59ed9e 100644 --- a/versioned_docs/version-v5/reference/migration.mdx +++ b/versioned_docs/version-v5/reference/migration.mdx @@ -9,8 +9,8 @@ import TabItem from '@theme/TabItem'; ## Migrating from Ionic 4.x to Ionic 5.x -Please see the [Ionic 5 Migration Guide](/docs/updating/5-0). +Please see the [Ionic 5 Migration Guide](/updating/5-0). ## Migrating to Ionic 4.0 -Please see the [Ionic 4 Migration Guide](/docs/updating/4-0). +Please see the [Ionic 4 Migration Guide](/updating/4-0). diff --git a/versioned_docs/version-v5/reference/support.mdx b/versioned_docs/version-v5/reference/support.mdx index 3021ae77d27..27d2a72cbf3 100644 --- a/versioned_docs/version-v5/reference/support.mdx +++ b/versioned_docs/version-v5/reference/support.mdx @@ -76,4 +76,4 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo | V3 | Not currently supported | @awesome-cordova-plugins 4.X | - Wrappers (and their associated plugins) are community maintained. -- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript) +- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](/native-community.mdx#vanilla-javascript) diff --git a/versioned_docs/version-v5/theming/advanced.mdx b/versioned_docs/version-v5/theming/advanced.mdx index 16c9460666b..103d0237d1c 100644 --- a/versioned_docs/version-v5/theming/advanced.mdx +++ b/versioned_docs/version-v5/theming/advanced.mdx @@ -23,8 +23,8 @@ While the application and stepped variables in the themes section are useful for | `--ion-safe-area-right` | Adjust the safe area inset right of the app | | `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | | `--ion-safe-area-left` | Adjust the safe area inset left of the app | -| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin) | -| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding) | +| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#margin) | +| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#padding) | ### Grid Variables diff --git a/versioned_docs/version-v5/troubleshooting/build.mdx b/versioned_docs/version-v5/troubleshooting/build.mdx index baa75a99c06..0e93ce9fb2f 100644 --- a/versioned_docs/version-v5/troubleshooting/build.mdx +++ b/versioned_docs/version-v5/troubleshooting/build.mdx @@ -91,7 +91,7 @@ import { MyService } from 'my-service'; class MyApp {} ``` -If the parameter is another component or directive (for example, a parent component), adding it to your list of providers will make the error go away, but this will have the same effect as the [Multiple instances of a provider](#multiple_instances) above. You'll be creating a new instance of the component class, and you won't get a reference to the component instance you want. Instead, make sure that the directive or component you expect to be injected is available to your component (e.g. that it is actually a parent if you are expecting it to be a parent). This is probably easiest understood with an example: +If the parameter is another component or directive (for example, a parent component), adding it to your list of providers will make the error go away, but this will have the same effect as the [Multiple instances of a provider](/troubleshooting/runtime.mdx#multiple-instances-of-a-provider) error. You'll be creating a new instance of the component class, and you won't get a reference to the component instance you want. Instead, make sure that the directive or component you expect to be injected is available to your component (e.g. that it is actually a parent if you are expecting it to be a parent). This is probably easiest understood with an example: ```tsx @Component({ diff --git a/versioned_docs/version-v5/troubleshooting/cors.mdx b/versioned_docs/version-v5/troubleshooting/cors.mdx index 8cb6a321315..073881d8286 100644 --- a/versioned_docs/version-v5/troubleshooting/cors.mdx +++ b/versioned_docs/version-v5/troubleshooting/cors.mdx @@ -135,7 +135,7 @@ The browser automatically sends the appropriate headers for CORS in every reques ### A. Enabling CORS in a server you control -The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response-) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular. +The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular. Ionic apps may be run from different origins, but only one origin can be specified in the `Access-Control-Allow-Origin` header. Therefore we recommend checking the value of the `Origin` header from the request and reflecting it in the `Access-Control-Allow-Origin` header in the response. diff --git a/versioned_docs/version-v5/vue/quickstart.mdx b/versioned_docs/version-v5/vue/quickstart.mdx index aa5efc9d5c6..aae5e20f566 100644 --- a/versioned_docs/version-v5/vue/quickstart.mdx +++ b/versioned_docs/version-v5/vue/quickstart.mdx @@ -108,7 +108,7 @@ Let's break it down, starting with the first group of imports. import { IonApp, IonRouterOutlet } from '@ionic/vue'; ``` -To use a component in Vue, you must first import it. So for Ionic Framework, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our `App` component, we are using `IonApp` and `IonRouterOutlet`. You can also register components globally if you find yourself importing the same components repeatedly. This comes with performance tradeoffs that we cover in [Optimizing Your App](#optimizing-your-app). +To use a component in Vue, you must first import it. So for Ionic Framework, this means anytime we want to use a Button or a Card, it must be added to our imports. In the case of our `App` component, we are using `IonApp` and `IonRouterOutlet`. You can also register components globally if you find yourself importing the same components repeatedly. This comes with performance tradeoffs that we cover in [Optimizing Your App](#optimizing-your-build). From there, let's look at the template. diff --git a/versioned_docs/version-v6/angular/navigation.mdx b/versioned_docs/version-v6/angular/navigation.mdx index 9ac7059bde0..2fba1ed815b 100644 --- a/versioned_docs/version-v6/angular/navigation.mdx +++ b/versioned_docs/version-v6/angular/navigation.mdx @@ -199,7 +199,7 @@ The application history in this example has the following path: `Accessibility` --> `VoiceOver` --> `Speech` -When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategy). +When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategyhistorygo). The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play. diff --git a/versioned_docs/version-v6/angular/overview.mdx b/versioned_docs/version-v6/angular/overview.mdx index bde8adb5221..247fac5f347 100644 --- a/versioned_docs/version-v6/angular/overview.mdx +++ b/versioned_docs/version-v6/angular/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular Version Support -Ionic Angular v6 supports Angular versions 12 through 15. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v6 supports Angular versions 12 through 15. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/reference/support.mdx#ionic-angular). ## Angular Tooling @@ -56,11 +56,11 @@ $ ionic serve █

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v6/api.mdx b/versioned_docs/version-v6/api.mdx index 45e4c1d8d19..161ba1b8a36 100644 --- a/versioned_docs/version-v6/api.mdx +++ b/versioned_docs/version-v6/api.mdx @@ -12,6 +12,6 @@ import APIList from '@components/page/api/APIList'; /> -Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. +Each Ionic [component](/components.mdx) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. diff --git a/versioned_docs/version-v6/api/col.mdx b/versioned_docs/version-v6/api/col.mdx index 7ddf8fc1c5e..c595f970232 100644 --- a/versioned_docs/version-v6/api/col.mdx +++ b/versioned_docs/version-v6/api/col.mdx @@ -27,7 +27,7 @@ See the [grid](./grid) documentation for more information. ## Column Alignment -By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. +By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior. ## Properties diff --git a/versioned_docs/version-v6/api/content.mdx b/versioned_docs/version-v6/api/content.mdx index 8112d0c0c8d..7209180e873 100644 --- a/versioned_docs/version-v6/api/content.mdx +++ b/versioned_docs/version-v6/api/content.mdx @@ -25,7 +25,7 @@ The content component provides an easy to use content area with some useful meth to control the scrollable area. There should only be one content in a single view. -Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). +Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/layout/css-utilities.mdx) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). ## Basic Usage diff --git a/versioned_docs/version-v6/api/datetime-button.mdx b/versioned_docs/version-v6/api/datetime-button.mdx index 667009f2577..62903a275e3 100644 --- a/versioned_docs/version-v6/api/datetime-button.mdx +++ b/versioned_docs/version-v6/api/datetime-button.mdx @@ -27,7 +27,7 @@ Datetime Button links with a [Datetime](./datetime) component to display the for Datetime Button should be used when space is constrained. This component displays buttons which show the current date and time values. When the buttons are tapped, the date or time pickers open in the overlay. -When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal#keepcontentsmounted) or the [keepContentsMounted property on ion-popover](./popover#keepcontentsmounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet. +When using Datetime Button with a JavaScript framework such as Angular, React, or Vue be sure to use the [keepContentsMounted property on ion-modal](./modal.mdx#prop-keep-contents-mounted) or the [keepContentsMounted property on ion-popover](./popover.mdx#prop-keep-contents-mounted). This allows the linked datetime instance to be mounted even if the overlay has not been presented yet. ## Basic Usage diff --git a/versioned_docs/version-v6/api/datetime.mdx b/versioned_docs/version-v6/api/datetime.mdx index d7293c89462..37a2dc7adb9 100644 --- a/versioned_docs/version-v6/api/datetime.mdx +++ b/versioned_docs/version-v6/api/datetime.mdx @@ -271,7 +271,7 @@ By default, `ionChange` is emitted with the new datetime value whenever a new da ### Showing Confirmation Buttons -The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#confirm) and [`cancel`](#cancel) methods, respectively. +The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#method-confirm) and [`cancel`](#method-cancel) methods, respectively. diff --git a/versioned_docs/version-v6/api/infinite-scroll-content.mdx b/versioned_docs/version-v6/api/infinite-scroll-content.mdx index c6318535f5e..7879619ef05 100644 --- a/versioned_docs/version-v6/api/infinite-scroll-content.mdx +++ b/versioned_docs/version-v6/api/infinite-scroll-content.mdx @@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties. -For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content). +For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.mdx#custom-content). ## Properties diff --git a/versioned_docs/version-v6/api/item.mdx b/versioned_docs/version-v6/api/item.mdx index 77074b42926..97f4a88cac3 100644 --- a/versioned_docs/version-v6/api/item.mdx +++ b/versioned_docs/version-v6/api/item.mdx @@ -25,7 +25,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an ## Basic Usage -Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-wrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text. +Items left align text and add an ellipsis when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-wrap` in the below example. See the [CSS Utilities Documentation](/layout/css-utilities.mdx) for more classes that can be added to an item to transform the text. import Basic from '@site/static/usage/v6/item/basic/index.mdx'; diff --git a/versioned_docs/version-v6/api/loading.mdx b/versioned_docs/version-v6/api/loading.mdx index 925f1a0742b..7b5b211ac7f 100644 --- a/versioned_docs/version-v6/api/loading.mdx +++ b/versioned_docs/version-v6/api/loading.mdx @@ -110,7 +110,7 @@ export const LoadingExample: React.FC = () => { ### Spinners -The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#spinner) for a full list of options. +The spinner that is used can be customized using the `spinner` property. See the [spinner property documentation](#prop-spinner) for a full list of options. import Spinners from '@site/static/usage/v6/loading/spinners/index.mdx'; diff --git a/versioned_docs/version-v6/api/modal.mdx b/versioned_docs/version-v6/api/modal.mdx index e9f562d368e..2f37874f047 100644 --- a/versioned_docs/version-v6/api/modal.mdx +++ b/versioned_docs/version-v6/api/modal.mdx @@ -137,30 +137,30 @@ import SheetHandleBehaviorExample from '@site/static/usage/v6/modal/sheet/handle -## Styling +## Theming -Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient. +[Controller modals](#controller-modals) are appended to the root of your application, outside of the component that presented them. Component-scoped styles will not reach these modals, so their styles must be applied globally, from a stylesheet that is not scoped to a component. -:::note -If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. -::: +[Inline modals](#inline-modals-recommended) stay where they are declared in your template, so component-scoped styles do apply to them. + +### Styling + +import ThemeExample from '@site/static/usage/v6/modal/styling/theming/index.mdx'; + + + +### Stacked Modals -:::note `ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables: -::: -``` +```css ion-modal.stack-modal { --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); --backdrop-opacity: var(--ion-backdrop-opacity, 0.32); } ``` -import ThemeExample from '@site/static/usage/v6/modal/styling/theming/index.mdx'; - - - -### Animations +## Animations The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`. diff --git a/versioned_docs/version-v6/api/refresher-content.mdx b/versioned_docs/version-v6/api/refresher-content.mdx index 3031a3c62f9..1a36aba1df2 100644 --- a/versioned_docs/version-v6/api/refresher-content.mdx +++ b/versioned_docs/version-v6/api/refresher-content.mdx @@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic displays a pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher. -For usage examples, see the [Refresher](/docs/api/refresher) documentation. +For usage examples, see the [Refresher](/api/refresher.mdx) documentation. ## Properties diff --git a/versioned_docs/version-v6/api/row.mdx b/versioned_docs/version-v6/api/row.mdx index 1f0c285d1de..3d3ef9f940d 100644 --- a/versioned_docs/version-v6/api/row.mdx +++ b/versioned_docs/version-v6/api/row.mdx @@ -28,7 +28,7 @@ See the [grid](./grid) documentation for more information. ## Row Alignment -By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior. +By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior. ## Properties diff --git a/versioned_docs/version-v6/api/select.mdx b/versioned_docs/version-v6/api/select.mdx index 8b36bc4c9db..f0f9a1af1e4 100644 --- a/versioned_docs/version-v6/api/select.mdx +++ b/versioned_docs/version-v6/api/select.mdx @@ -128,8 +128,8 @@ import StylingSelectExample from '@site/static/usage/v6/select/customization/sty Customizing the interface dialog should be done by following the Customization section in that interface's documentation: - [Alert Customization](alert.mdx#customization) -- [Action Sheet Customization](action-sheet.mdx#customization) -- [Popover Customization](popover.mdx#customization) +- [Action Sheet Customization](action-sheet.mdx#styling) +- [Popover Customization](popover.mdx#styling) However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.mdx) for usage examples of customizing options. diff --git a/versioned_docs/version-v6/api/text.mdx b/versioned_docs/version-v6/api/text.mdx index c73ca6d5218..db2693dc88d 100644 --- a/versioned_docs/version-v6/api/text.mdx +++ b/versioned_docs/version-v6/api/text.mdx @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v6/text/basic/index.mdx'; ## Theming -The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides. +The text component can be customized by changing any of the default [colors](/theming/colors.mdx) Ionic provides. ## Properties diff --git a/versioned_docs/version-v6/api/title.mdx b/versioned_docs/version-v6/api/title.mdx index 468114988da..3984e7a1c28 100644 --- a/versioned_docs/version-v6/api/title.mdx +++ b/versioned_docs/version-v6/api/title.mdx @@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v6/title/collapsible-large ### Collapsible Buttons -The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed. +The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#prop-collapse) property to additionally display in the header as the toolbar is collapsed. import CollapsibleLargeTitleButtons from '@site/static/usage/v6/title/collapsible-large-title/buttons/index.mdx'; diff --git a/versioned_docs/version-v6/cli.mdx b/versioned_docs/version-v6/cli.mdx index fe10210fbc4..b854ff5b656 100644 --- a/versioned_docs/version-v6/cli.mdx +++ b/versioned_docs/version-v6/cli.mdx @@ -11,7 +11,7 @@ sidebar_label: Overview /> -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps. +The Ionic command-line interface ([CLI](/reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps. ## Installation @@ -39,14 +39,14 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](/reference/glossary.mdx#typescript) and [Node.js](/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting To troubleshoot issues with the Ionic CLI, the following may be useful: - Make sure the latest version of the Ionic CLI is installed. Get the installed version by running `ionic --version`. -- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment#node-npm) environment setup. +- Make sure the latest Node LTS is installed. See [Node & npm](/intro/environment.mdx#node--npm) environment setup. - The `--verbose` flag prints debugging messages, which may narrow down the issue. -- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying. -- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables). +- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/cli/using-a-proxy.mdx) to configure request proxying. +- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/cli/configuration.mdx#environment-variables). diff --git a/versioned_docs/version-v6/core-concepts/fundamentals.mdx b/versioned_docs/version-v6/core-concepts/fundamentals.mdx index dd38a670819..c2926575697 100644 --- a/versioned_docs/version-v6/core-concepts/fundamentals.mdx +++ b/versioned_docs/version-v6/core-concepts/fundamentals.mdx @@ -54,7 +54,7 @@ Developers can use standard events such as `click` as they normally would. Howev ## Properties -Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's [API documentation](/docs/api) page. +Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's [API documentation](/api.mdx) page. ### Reactive Properties @@ -76,4 +76,4 @@ Virtual properties are designed for one-time configuration during component init The `mode` property is a virtual property that determines which platform styles to use for a component. It can be set at the component level or globally through the app configuration. In both cases, it's set once during initialization and doesn't change during the component's lifecycle. -For more information on Ionic modes, read the [Platform Styles documentation](/docs/theming/platform-styles). +For more information on Ionic modes, read the [Platform Styles documentation](/theming/platform-styles.mdx). diff --git a/versioned_docs/version-v6/developing/config.mdx b/versioned_docs/version-v6/developing/config.mdx index 14f60024716..90a5b28b9a1 100644 --- a/versioned_docs/version-v6/developing/config.mdx +++ b/versioned_docs/version-v6/developing/config.mdx @@ -129,7 +129,7 @@ class AppComponent { | `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | | `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | | `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `platform` | [`PlatformConfig`](/angular/platform.mdx#customizing-platform-detection-functions) | Overrides the default platform detection methods. | | `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | | `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | | `refreshingIcon` | `string` | Overrides the default icon in all `` components. | diff --git a/versioned_docs/version-v6/developing/config/per-platform/index.mdx b/versioned_docs/version-v6/developing/config/per-platform/index.mdx index 3deba7540b0..f16d18c00bd 100644 --- a/versioned_docs/version-v6/developing/config/per-platform/index.mdx +++ b/versioned_docs/version-v6/developing/config/per-platform/index.mdx @@ -15,7 +15,7 @@ import TabItem from '@theme/TabItem'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +See the [Angular Platform Documentation](/angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="app.module.ts" @@ -36,7 +36,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; :::note -See the [React Platform Documentation](../react/platform) for the types of platforms you can detect. +See the [React Platform Documentation](/react/platform.mdx) for the types of platforms you can detect. ::: ```tsx title="App.tsx" @@ -51,7 +51,7 @@ setupIonicReact({ :::note -See the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect. +See the [Vue Platform Documentation](/vue/platform.mdx) for the types of platforms you can detect. ::: ```ts title="main.ts" diff --git a/versioned_docs/version-v6/index.mdx b/versioned_docs/version-v6/index.mdx index 02471ee43ce..a86d0a0c2aa 100644 --- a/versioned_docs/version-v6/index.mdx +++ b/versioned_docs/version-v6/index.mdx @@ -22,7 +22,7 @@ import DocsCards from '@components/global/DocsCards'; -Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.md), and [Vue](vue/overview.mdx). +Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react/overview.mdx), and [Vue](vue/overview.mdx). Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts. @@ -58,7 +58,7 @@ Get started building by [installing Ionic](intro/cli.mdx) or following our [Firs ## Overview -Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.md), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. +Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react/overview.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere diff --git a/versioned_docs/version-v6/layout/global-stylesheets.mdx b/versioned_docs/version-v6/layout/global-stylesheets.mdx index 6235408e6b3..ae1b81a7233 100644 --- a/versioned_docs/version-v6/layout/global-stylesheets.mdx +++ b/versioned_docs/version-v6/layout/global-stylesheets.mdx @@ -52,11 +52,11 @@ Adds utility classes to float an element based on the breakpoint and side, see [ #### text-alignment.css -Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-alignment) for usage information. +Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-align) for usage information. #### text-transformation.css -Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-transformation) for usage information. +Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-transform) for usage information. #### flex-utils.css diff --git a/versioned_docs/version-v6/react/overview.mdx b/versioned_docs/version-v6/react/overview.mdx index 2eabc376084..fee0eca0a5e 100644 --- a/versioned_docs/version-v6/react/overview.mdx +++ b/versioned_docs/version-v6/react/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## React Version Support -Ionic React supports the latest versions of React. For detailed information on supported versions and our support policy, see the [Ionic React Support Policy](/docs/reference/support#ionic-react). +Ionic React supports the latest versions of React. For detailed information on supported versions and our support policy, see the [Ionic React Support Policy](/reference/support.mdx#ionic-react). ## React Tooling @@ -54,11 +54,11 @@ $ ionic serve █

Discover how to handle routing and navigation in Ionic React apps using the React Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v6/react/quickstart.mdx b/versioned_docs/version-v6/react/quickstart.mdx index 0809bfb10f7..d7c3555d94b 100644 --- a/versioned_docs/version-v6/react/quickstart.mdx +++ b/versioned_docs/version-v6/react/quickstart.mdx @@ -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.mdx#collapsible-large-titles) that displays on iOS devices 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](/api/title.mdx#collapsible-large-titles) that displays on iOS devices 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.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. +For detailed information about Ionic layout components, see the [Header](/api/header.mdx), [Toolbar](/api/toolbar.mdx), [Title](/api/title.mdx), and [Content](/api/content.mdx) 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.mdx) 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](/api/button.mdx) 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.mdx) in the [Toolbar](/docs/api/toolbar.mdx). 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](/api/back-button.mdx) in the [Toolbar](/api/toolbar.mdx). 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.mdx#navigating-using-history) for more information. +Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/react/navigation.mdx#navigation) 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.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/api/icon.mdx) 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.mdx#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/api/content.mdx#methods) section of their API documentation. ## Run on a Device @@ -374,11 +374,11 @@ This guide covered the basics of creating an Ionic React app, adding navigation,

Discover how to handle routing and navigation in Ionic React apps using the React Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v6/reference/migration.mdx b/versioned_docs/version-v6/reference/migration.mdx index 7582f6b0c33..9d31ad2206e 100644 --- a/versioned_docs/version-v6/reference/migration.mdx +++ b/versioned_docs/version-v6/reference/migration.mdx @@ -16,12 +16,12 @@ import TabItem from '@theme/TabItem'; ## Migrating from Ionic 5.x to Ionic 6.x -Please see the [Ionic 6 Migration Guide](/docs/updating/6-0). +Please see the [Ionic 6 Migration Guide](/updating/6-0). ## Migrating from Ionic 4.x to Ionic 5.x -Please see the [Ionic 5 Migration Guide](/docs/updating/5-0). +Please see the [Ionic 5 Migration Guide](/updating/5-0). ## Migrating to Ionic 4.0 -Please see the [Ionic 4 Migration Guide](/docs/updating/4-0). +Please see the [Ionic 4 Migration Guide](/updating/4-0). diff --git a/versioned_docs/version-v6/reference/support.mdx b/versioned_docs/version-v6/reference/support.mdx index 9c7a24bb7c4..48fef0e1bb8 100644 --- a/versioned_docs/version-v6/reference/support.mdx +++ b/versioned_docs/version-v6/reference/support.mdx @@ -102,4 +102,4 @@ The Ionic team has compiled a set of recommendations for using the Ionic Framewo | V3 | Not currently supported | @awesome-cordova-plugins 4.X | - Wrappers (and their associated plugins) are community maintained. -- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript) +- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](/native.mdx) diff --git a/versioned_docs/version-v6/theming/advanced.mdx b/versioned_docs/version-v6/theming/advanced.mdx index fa77538d10c..f0c9dab3414 100644 --- a/versioned_docs/version-v6/theming/advanced.mdx +++ b/versioned_docs/version-v6/theming/advanced.mdx @@ -62,8 +62,8 @@ While the application and stepped variables in the themes section are useful for | `--ion-safe-area-right` | Adjust the safe area inset right of the app | | `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | | `--ion-safe-area-left` | Adjust the safe area inset left of the app | -| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin) | -| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding) | +| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#margin) | +| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#padding) | ### Grid Variables diff --git a/versioned_docs/version-v6/troubleshooting/build.mdx b/versioned_docs/version-v6/troubleshooting/build.mdx index f2304bccb82..c7eddca3913 100644 --- a/versioned_docs/version-v6/troubleshooting/build.mdx +++ b/versioned_docs/version-v6/troubleshooting/build.mdx @@ -97,7 +97,7 @@ import { MyService } from 'my-service'; class MyApp {} ``` -If the parameter is another component or directive (for example, a parent component), adding it to your list of providers will make the error go away, but this will have the same effect as the [Multiple instances of a provider](#multiple_instances) above. You'll be creating a new instance of the component class, and you won't get a reference to the component instance you want. Instead, make sure that the directive or component you expect to be injected is available to your component (e.g. that it is actually a parent if you are expecting it to be a parent). This is probably easiest understood with an example: +If the parameter is another component or directive (for example, a parent component), adding it to your list of providers will make the error go away, but this will have the same effect as the [Multiple instances of a provider](/troubleshooting/runtime.mdx#multiple-instances-of-a-provider) error. You'll be creating a new instance of the component class, and you won't get a reference to the component instance you want. Instead, make sure that the directive or component you expect to be injected is available to your component (e.g. that it is actually a parent if you are expecting it to be a parent). This is probably easiest understood with an example: ```tsx @Component({ diff --git a/versioned_docs/version-v6/troubleshooting/cors.mdx b/versioned_docs/version-v6/troubleshooting/cors.mdx index 5b497f74a12..22d0717e3d9 100644 --- a/versioned_docs/version-v6/troubleshooting/cors.mdx +++ b/versioned_docs/version-v6/troubleshooting/cors.mdx @@ -144,7 +144,7 @@ The browser automatically sends the appropriate headers for CORS in every reques ### A. Enabling CORS in a server you control -The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response-) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular. +The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular. Ionic apps may be run from different origins, but only one origin can be specified in the `Access-Control-Allow-Origin` header. Therefore we recommend checking the value of the `Origin` header from the request and reflecting it in the `Access-Control-Allow-Origin` header in the response. @@ -238,7 +238,7 @@ If you are trying to connect to a 3rd-party API, first check in its documentatio #### 1. Native-only apps (iOS/Android) -Use the [HTTP plugin from Ionic Native](../native/http.md) to make the requests natively from outside the webview. Please note that this plugin doesn't work in the browser, so the development and testing of the app must always be done in a device or simulator going forward. +Use the [HTTP plugin from Ionic Native](https://ionic-docs-5utg8ms4c-ionic1.vercel.app/docs/v5/native/http) to make the requests natively from outside the webview. Please note that this plugin doesn't work in the browser, so the development and testing of the app must always be done in a device or simulator going forward. ##### Usage in Ionic Angular 4 diff --git a/versioned_docs/version-v6/vue/overview.mdx b/versioned_docs/version-v6/vue/overview.mdx index 6bf1e7b111f..b1172f6942e 100644 --- a/versioned_docs/version-v6/vue/overview.mdx +++ b/versioned_docs/version-v6/vue/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Vue Version Support -Ionic Vue v6 supports Vue 3.x. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue). +Ionic Vue v6 supports Vue 3.x. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/reference/support.mdx#ionic-vue). ## Vue Tooling @@ -56,11 +56,11 @@ $ ionic serve █

Discover how to handle routing and navigation in Ionic Vue apps using the Vue Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v6/vue/quickstart.mdx b/versioned_docs/version-v6/vue/quickstart.mdx index f6f87a69b5c..545afdd4661 100644 --- a/versioned_docs/version-v6/vue/quickstart.mdx +++ b/versioned_docs/version-v6/vue/quickstart.mdx @@ -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.mdx#collapsible-large-titles) that displays on iOS devices 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](/api/title.mdx#collapsible-large-titles) that displays on iOS devices 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.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. +For detailed information about Ionic layout components, see the [Header](/api/header.mdx), [Toolbar](/api/toolbar.mdx), [Title](/api/title.mdx), and [Content](/api/content.mdx) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`: +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/api/button.mdx) 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.mdx) in the [Toolbar](/docs/api/toolbar.mdx). 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](/api/back-button.mdx) in the [Toolbar](/api/toolbar.mdx). 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.mdx) 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](/vue/navigation.mdx) 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.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/api/icon.mdx) 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.mdx#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/api/content.mdx#methods) section of their API documentation. ## Run on a Device @@ -404,11 +404,11 @@ This guide covered the basics of creating an Ionic Vue app, adding navigation, a

Discover how to handle routing and navigation in Ionic Vue apps using the Vue Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v6/vue/troubleshooting.mdx b/versioned_docs/version-v6/vue/troubleshooting.mdx index b0f5d6486e3..c57e31a9515 100644 --- a/versioned_docs/version-v6/vue/troubleshooting.mdx +++ b/versioned_docs/version-v6/vue/troubleshooting.mdx @@ -41,7 +41,7 @@ To resolve this issue, you need to import the component from `@ionic/vue` and pr ``` -Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. +Prefer to register your components globally once? We have you covered. Our [Build Options Guide](/vue/build-options.mdx#global-component-registration) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. ## Slot attributes are deprecated @@ -79,7 +79,7 @@ ionContentRef.value.scrollToBottom(); In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs. -See the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information. +See the [Quickstart Guide](quickstart.mdx#call-component-methods) for more information. ## Page transitions are not working diff --git a/versioned_docs/version-v6/vue/utility-functions.mdx b/versioned_docs/version-v6/vue/utility-functions.mdx index d5461a255a9..87575066e98 100644 --- a/versioned_docs/version-v6/vue/utility-functions.mdx +++ b/versioned_docs/version-v6/vue/utility-functions.mdx @@ -115,7 +115,7 @@ useBackButton(priority: number, handler: Handler): UseBackButtonResult; See the [Hardware Back Button Documentation](../developing/hardware-back-button) for more information and usage examples. :::note -The `useBackButton` callback will only fire when your app is running in Capacitor or Cordova. See [Hardware Back Button in Capacitor and Cordova](../developing/hardware-back-button#hardware-back-button-in-capacitor-and-cordova) for more information. +The `useBackButton` callback will only fire when your app is running in Capacitor or Cordova. See [Hardware Back Button in Capacitor and Cordova](/developing/hardware-back-button.mdx#hardware-back-button-in-capacitor-and-cordova) for more information. ::: ## Keyboard diff --git a/versioned_docs/version-v7/angular/navigation.mdx b/versioned_docs/version-v7/angular/navigation.mdx index 9b07fa29860..c365e9901a7 100644 --- a/versioned_docs/version-v7/angular/navigation.mdx +++ b/versioned_docs/version-v7/angular/navigation.mdx @@ -247,7 +247,7 @@ The application history in this example has the following path: `Accessibility` --> `VoiceOver` --> `Speech` -When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategy). +When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategyhistorygo). The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play. diff --git a/versioned_docs/version-v7/angular/overview.mdx b/versioned_docs/version-v7/angular/overview.mdx index edae3e6e2ca..4a15f213160 100644 --- a/versioned_docs/version-v7/angular/overview.mdx +++ b/versioned_docs/version-v7/angular/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular Version Support -Ionic Angular v7 supports Angular versions 14 through 17. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v7 supports Angular versions 14 through 17. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/reference/support.mdx#ionic-angular). ## Angular Tooling @@ -56,11 +56,11 @@ $ ionic serve █

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v7/angular/quickstart.mdx b/versioned_docs/version-v7/angular/quickstart.mdx index 3332c74ab32..1ea401941e6 100644 --- a/versioned_docs/version-v7/angular/quickstart.mdx +++ b/versioned_docs/version-v7/angular/quickstart.mdx @@ -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.mdx#collapsible-large-titles) that displays on iOS devices 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](/api/title.mdx#collapsible-large-titles) that displays on iOS devices 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.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. +For detailed information about Ionic layout components, see the [Header](/api/header.mdx), [Toolbar](/api/toolbar.mdx), [Title](/api/title.mdx), and [Content](/api/content.mdx) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`: +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/api/button.mdx) 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.mdx) to the [Toolbar](/docs/api/toolbar.mdx): +In `new.page.html`, you can add a [Back Button](/api/back-button.mdx) to the [Toolbar](/api/toolbar.mdx): ```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.mdx#navigating-to-different-routes) for more information. +Navigating can also be performed using Angular's Router service. See the [Angular Navigation documentation](/angular/navigation.mdx#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.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/api/icon.mdx) 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.mdx#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/api/content.mdx#methods) section of their API documentation. ## Run on a Device @@ -426,11 +426,11 @@ This guide covered the basics of creating an Ionic Angular app, adding navigatio

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v7/api.mdx b/versioned_docs/version-v7/api.mdx index 45e4c1d8d19..161ba1b8a36 100644 --- a/versioned_docs/version-v7/api.mdx +++ b/versioned_docs/version-v7/api.mdx @@ -12,6 +12,6 @@ import APIList from '@components/page/api/APIList'; /> -Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. +Each Ionic [component](/components.mdx) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. diff --git a/versioned_docs/version-v7/api/col.mdx b/versioned_docs/version-v7/api/col.mdx index 53687ada2dc..979812ac052 100644 --- a/versioned_docs/version-v7/api/col.mdx +++ b/versioned_docs/version-v7/api/col.mdx @@ -27,7 +27,7 @@ See the [grid](./grid) documentation for more information. ## Column Alignment -By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. +By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior. ## Properties diff --git a/versioned_docs/version-v7/api/content.mdx b/versioned_docs/version-v7/api/content.mdx index 7303ceda044..fd01943bd38 100644 --- a/versioned_docs/version-v7/api/content.mdx +++ b/versioned_docs/version-v7/api/content.mdx @@ -25,7 +25,7 @@ The content component provides an easy to use content area with some useful meth to control the scrollable area. There should only be one content in a single view. -Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). +Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/layout/css-utilities.mdx) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). ## Basic Usage @@ -95,7 +95,7 @@ import CSSProps from '@site/static/usage/v7/content/theming/css-properties/index ### Safe Area Padding -The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables). +The content component will not automatically apply padding to any of its sides to account for the [safe area](/theming/advanced.mdx#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables). The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable. diff --git a/versioned_docs/version-v7/api/datetime.mdx b/versioned_docs/version-v7/api/datetime.mdx index c553c9f3cfd..2642d2907dd 100644 --- a/versioned_docs/version-v7/api/datetime.mdx +++ b/versioned_docs/version-v7/api/datetime.mdx @@ -290,7 +290,7 @@ By default, `ionChange` is emitted with the new datetime value whenever a new da ### Showing Confirmation Buttons -The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#confirm) and [`cancel`](#cancel) methods, respectively. +The default Done and Cancel buttons are already preconfigured to call the [`confirm`](#method-confirm) and [`cancel`](#method-cancel) methods, respectively. diff --git a/versioned_docs/version-v7/api/fab.mdx b/versioned_docs/version-v7/api/fab.mdx index 437741dcd13..699a32068b1 100644 --- a/versioned_docs/version-v7/api/fab.mdx +++ b/versioned_docs/version-v7/api/fab.mdx @@ -47,7 +47,7 @@ import Positioning from '@site/static/usage/v7/fab/positioning/index.mdx'; ### Safe Area -If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced#application-variables). +If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/theming/advanced.mdx#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/theming/advanced.mdx#application-variables). When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set: diff --git a/versioned_docs/version-v7/api/infinite-scroll-content.mdx b/versioned_docs/version-v7/api/infinite-scroll-content.mdx index ccd6b839c41..403e8bd5828 100644 --- a/versioned_docs/version-v7/api/infinite-scroll-content.mdx +++ b/versioned_docs/version-v7/api/infinite-scroll-content.mdx @@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties. -For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content). +For more information as well as usage, see the [Infinite Scroll Documentation](./infinite-scroll.mdx#custom-content). ## Properties diff --git a/versioned_docs/version-v7/api/input.mdx b/versioned_docs/version-v7/api/input.mdx index e873ccb37a8..ecb23e66d1b 100644 --- a/versioned_docs/version-v7/api/input.mdx +++ b/versioned_docs/version-v7/api/input.mdx @@ -105,7 +105,7 @@ import HelperError from '@site/static/usage/v7/input/helper-error/index.mdx'; The input counter is text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. -The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](/docs/api/input#using-the-modern-syntax) and should be used directly on `ion-input` instead. +The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](/api/input.mdx#using-the-modern-syntax) and should be used directly on `ion-input` instead. import Counter from '@site/static/usage/v7/input/counter/index.mdx'; diff --git a/versioned_docs/version-v7/api/item.mdx b/versioned_docs/version-v7/api/item.mdx index 463f056f4f7..1cfee5cc1b4 100644 --- a/versioned_docs/version-v7/api/item.mdx +++ b/versioned_docs/version-v7/api/item.mdx @@ -28,7 +28,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an ## Basic Usage -Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text. +Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. See the [CSS Utilities Documentation](/layout/css-utilities.mdx) for more classes that can be added to an item to transform the text. import Basic from '@site/static/usage/v7/item/basic/index.mdx'; @@ -251,7 +251,7 @@ Controls are form components such as checkboxes, inputs, radios, and more. Each text={ <> Items should typically have no more than two controls. If you need more controls, consider adding the additional - controls in a Modal that is accessible from the item. + controls in a Modal that is accessible from the item. } doText="Move additional controls to a submenu accessible from the item." diff --git a/versioned_docs/version-v7/api/modal.mdx b/versioned_docs/version-v7/api/modal.mdx index c098fe75b22..1ec436cd96d 100644 --- a/versioned_docs/version-v7/api/modal.mdx +++ b/versioned_docs/version-v7/api/modal.mdx @@ -161,30 +161,30 @@ import SheetHandleBehaviorExample from '@site/static/usage/v7/modal/sheet/handle -## Styling +## Theming -Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient. +[Controller modals](#controller-modals) are appended to the root of your application, outside of the component that presented them. Component-scoped styles will not reach these modals, so their styles must be applied globally, from a stylesheet that is not scoped to a component. -:::note -If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. -::: +[Inline modals](#inline-modals-recommended) stay where they are declared in your template, so component-scoped styles do apply to them. + +### Styling + +import ThemeExample from '@site/static/usage/v7/modal/styling/theming/index.mdx'; + + + +### Stacked Modals -:::note `ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables: -::: -``` +```css ion-modal.stack-modal { --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); --backdrop-opacity: var(--ion-backdrop-opacity, 0.32); } ``` -import ThemeExample from '@site/static/usage/v7/modal/styling/theming/index.mdx'; - - - -### Animations +## Animations The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`. diff --git a/versioned_docs/version-v7/api/refresher-content.mdx b/versioned_docs/version-v7/api/refresher-content.mdx index 6fbb80c726e..77b706c601b 100644 --- a/versioned_docs/version-v7/api/refresher-content.mdx +++ b/versioned_docs/version-v7/api/refresher-content.mdx @@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic displays a pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher. -For usage examples, see the [Refresher](/docs/api/refresher) documentation. +For usage examples, see the [Refresher](/api/refresher.mdx) documentation. ## Properties diff --git a/versioned_docs/version-v7/api/row.mdx b/versioned_docs/version-v7/api/row.mdx index 557ca356e8d..dc3337d3796 100644 --- a/versioned_docs/version-v7/api/row.mdx +++ b/versioned_docs/version-v7/api/row.mdx @@ -28,7 +28,7 @@ See the [grid](./grid) documentation for more information. ## Row Alignment -By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior. +By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior. ## Properties diff --git a/versioned_docs/version-v7/api/select.mdx b/versioned_docs/version-v7/api/select.mdx index 792031ba37b..128c18a9d14 100644 --- a/versioned_docs/version-v7/api/select.mdx +++ b/versioned_docs/version-v7/api/select.mdx @@ -208,8 +208,8 @@ import StylingSelectExample from '@site/static/usage/v7/select/customization/sty Customizing the interface dialog should be done by following the Customization section in that interface's documentation: - [Alert Customization](alert.mdx#customization) -- [Action Sheet Customization](action-sheet.mdx#customization) -- [Popover Customization](popover.mdx#customization) +- [Action Sheet Customization](action-sheet.mdx#styling) +- [Popover Customization](popover.mdx#styling) However, the Select Option does set a class for easier styling and allows for the ability to pass a class to the overlay option, see the [Select Options documentation](select-option.mdx) for usage examples of customizing options. diff --git a/versioned_docs/version-v7/api/text.mdx b/versioned_docs/version-v7/api/text.mdx index b15e5fff4ad..ba18a0f7311 100644 --- a/versioned_docs/version-v7/api/text.mdx +++ b/versioned_docs/version-v7/api/text.mdx @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v7/text/basic/index.mdx'; ## Theming -The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides. +The text component can be customized by changing any of the default [colors](/theming/colors.mdx) Ionic provides. ## Properties diff --git a/versioned_docs/version-v7/api/title.mdx b/versioned_docs/version-v7/api/title.mdx index d25641bc8dd..17e4cc31de8 100644 --- a/versioned_docs/version-v7/api/title.mdx +++ b/versioned_docs/version-v7/api/title.mdx @@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v7/title/collapsible-large ### Collapsible Buttons -The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed. +The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#prop-collapse) property to additionally display in the header as the toolbar is collapsed. import CollapsibleLargeTitleButtons from '@site/static/usage/v7/title/collapsible-large-title/buttons/index.mdx'; diff --git a/versioned_docs/version-v7/cli.mdx b/versioned_docs/version-v7/cli.mdx index c976b1a9f82..0abb1f1d44e 100644 --- a/versioned_docs/version-v7/cli.mdx +++ b/versioned_docs/version-v7/cli.mdx @@ -11,7 +11,7 @@ sidebar_label: Overview /> -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps. +The Ionic command-line interface ([CLI](/reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps. ## Installation @@ -39,14 +39,14 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. +The Ionic CLI is built with [TypeScript](/reference/glossary.mdx#typescript) and [Node.js](/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source GitHub repository. ## Troubleshooting To troubleshoot issues with the Ionic CLI, the following may be useful: - Make sure the latest version of the Ionic CLI is installed. Get the installed Ionic CLI version by running `ionic --version`. The Ionic CLI version is not related to the Ionic Framework version. -- Make sure the latest Node LTS is installed. See [Node & npm](/docs/intro/environment#node-npm) environment setup. +- Make sure the latest Node LTS is installed. See [Node & npm](/intro/environment.mdx#node--npm) environment setup. - The `--verbose` flag prints debugging messages, which may narrow down the issue. -- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying. -- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables). +- Connection issues may be due to improperly configured proxy settings. See [Using a Proxy](/cli/using-a-proxy.mdx) to configure request proxying. +- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/cli/configuration.mdx#environment-variables). diff --git a/versioned_docs/version-v7/core-concepts/fundamentals.mdx b/versioned_docs/version-v7/core-concepts/fundamentals.mdx index dd38a670819..c2926575697 100644 --- a/versioned_docs/version-v7/core-concepts/fundamentals.mdx +++ b/versioned_docs/version-v7/core-concepts/fundamentals.mdx @@ -54,7 +54,7 @@ Developers can use standard events such as `click` as they normally would. Howev ## Properties -Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's [API documentation](/docs/api) page. +Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's [API documentation](/api.mdx) page. ### Reactive Properties @@ -76,4 +76,4 @@ Virtual properties are designed for one-time configuration during component init The `mode` property is a virtual property that determines which platform styles to use for a component. It can be set at the component level or globally through the app configuration. In both cases, it's set once during initialization and doesn't change during the component's lifecycle. -For more information on Ionic modes, read the [Platform Styles documentation](/docs/theming/platform-styles). +For more information on Ionic modes, read the [Platform Styles documentation](/theming/platform-styles.mdx). diff --git a/versioned_docs/version-v7/developing/config.mdx b/versioned_docs/version-v7/developing/config.mdx index 232d8bfc419..fc8d038eb06 100644 --- a/versioned_docs/version-v7/developing/config.mdx +++ b/versioned_docs/version-v7/developing/config.mdx @@ -194,7 +194,7 @@ Below are the config options that Ionic uses. | `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | | `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | | `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | +| `platform` | [`PlatformConfig`](/angular/platform.mdx#customizing-platform-detection-functions) | Overrides the default platform detection methods. | | `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | | `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | | `refreshingIcon` | `string` | Overrides the default icon in all `` components. | diff --git a/versioned_docs/version-v7/developing/config/per-platform/index.mdx b/versioned_docs/version-v7/developing/config/per-platform/index.mdx index b088a7e6bf6..3c7615067f8 100644 --- a/versioned_docs/version-v7/developing/config/per-platform/index.mdx +++ b/versioned_docs/version-v7/developing/config/per-platform/index.mdx @@ -16,7 +16,7 @@ import TabItem from '@theme/TabItem'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +See the [Angular Platform Documentation](/angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="app.module.ts" @@ -39,7 +39,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; :::note Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -See the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +See the [Angular Platform Documentation](/angular/platform.mdx) for the types of platforms you can detect. ::: ```ts title="main.ts" @@ -59,7 +59,7 @@ bootstrapApplication(AppComponent, { :::note -See the [React Platform Documentation](../react/platform) for the types of platforms you can detect. +See the [React Platform Documentation](/react/platform.mdx) for the types of platforms you can detect. ::: ```tsx title="App.tsx" @@ -74,7 +74,7 @@ setupIonicReact({ :::note -See the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect. +See the [Vue Platform Documentation](/vue/platform.mdx) for the types of platforms you can detect. ::: ```ts title="main.ts" diff --git a/versioned_docs/version-v7/index.mdx b/versioned_docs/version-v7/index.mdx index 7359c573265..1fac0aea02d 100644 --- a/versioned_docs/version-v7/index.mdx +++ b/versioned_docs/version-v7/index.mdx @@ -22,7 +22,7 @@ import DocsCards from '@components/global/DocsCards'; -Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react.md), and [Vue](vue/overview.mdx). +Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.mdx), [React](react/overview.mdx), and [Vue](vue/overview.mdx). Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts. @@ -58,7 +58,7 @@ Get started building by [installing Ionic](intro/cli.mdx) or following our [Firs ## Overview -Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react.md), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. +Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.mdx), [React](react/overview.mdx), or [Vue](vue/overview.mdx). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.mdx). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere diff --git a/versioned_docs/version-v7/layout/global-stylesheets.mdx b/versioned_docs/version-v7/layout/global-stylesheets.mdx index bad01403029..52c538380f2 100644 --- a/versioned_docs/version-v7/layout/global-stylesheets.mdx +++ b/versioned_docs/version-v7/layout/global-stylesheets.mdx @@ -54,11 +54,11 @@ Adds utility classes to float an element based on the breakpoint and side, see [ #### text-alignment.css -Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-alignment) for usage information. +Adds utility classes to align the text of an element or adjust the white space based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-align) for usage information. #### text-transformation.css -Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-transformation) for usage information. +Adds utility classes to transform the text of an element to `uppercase`, `lowercase` or `capitalize` based on the breakpoint, see [CSS Utilities](css-utilities.mdx#text-transform) for usage information. #### flex-utils.css diff --git a/versioned_docs/version-v7/react/add-to-existing.mdx b/versioned_docs/version-v7/react/add-to-existing.mdx index 858c520f977..e7f6188ead1 100644 --- a/versioned_docs/version-v7/react/add-to-existing.mdx +++ b/versioned_docs/version-v7/react/add-to-existing.mdx @@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards'; /> -This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/docs/react/quickstart.mdx) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/docs/react/overview.mdx). +This guide covers how to add Ionic React to an existing React project. If you're looking to start a new project from scratch, check out the [Ionic React Quickstart](/react/quickstart.mdx) guide. For an overview of how Ionic React works with React, including version support and tooling, check out the [Ionic React Overview](/react/overview.mdx). :::tip @@ -64,7 +64,7 @@ setupIonicReact(); :::info -While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/layout/global-stylesheets.mdx). ::: @@ -98,7 +98,7 @@ const App: React.FC = () => ( export default App; ``` -Visit the [components](/docs/components.mdx) page for all of the available Ionic components. +Visit the [components](/components.mdx) page for all of the available Ionic components. :::tip @@ -132,7 +132,7 @@ import '@ionic/react/css/flex-utils.css'; import '@ionic/react/css/display.css'; ``` -These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +These stylesheets set up the overall page structure and provide [CSS utilities](/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/layout/global-stylesheets.mdx). #### 2. Set up Theming @@ -169,7 +169,7 @@ setupIonicReact(); // ...existing app function and export... ``` -The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`. +The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`. #### 3. Update the App Component @@ -355,11 +355,11 @@ Now that you have Ionic React integrated into your project, check out:

Discover how to handle routing and navigation in Ionic React apps using the React Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v7/react/overview.mdx b/versioned_docs/version-v7/react/overview.mdx index 2eabc376084..fee0eca0a5e 100644 --- a/versioned_docs/version-v7/react/overview.mdx +++ b/versioned_docs/version-v7/react/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## React Version Support -Ionic React supports the latest versions of React. For detailed information on supported versions and our support policy, see the [Ionic React Support Policy](/docs/reference/support#ionic-react). +Ionic React supports the latest versions of React. For detailed information on supported versions and our support policy, see the [Ionic React Support Policy](/reference/support.mdx#ionic-react). ## React Tooling @@ -54,11 +54,11 @@ $ ionic serve █

Discover how to handle routing and navigation in Ionic React apps using the React Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v7/react/quickstart.mdx b/versioned_docs/version-v7/react/quickstart.mdx index 0809bfb10f7..d7c3555d94b 100644 --- a/versioned_docs/version-v7/react/quickstart.mdx +++ b/versioned_docs/version-v7/react/quickstart.mdx @@ -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.mdx#collapsible-large-titles) that displays on iOS devices 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](/api/title.mdx#collapsible-large-titles) that displays on iOS devices 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.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. +For detailed information about Ionic layout components, see the [Header](/api/header.mdx), [Toolbar](/api/toolbar.mdx), [Title](/api/title.mdx), and [Content](/api/content.mdx) 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.mdx) 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](/api/button.mdx) 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.mdx) in the [Toolbar](/docs/api/toolbar.mdx). 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](/api/back-button.mdx) in the [Toolbar](/api/toolbar.mdx). 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.mdx#navigating-using-history) for more information. +Navigating can also be performed programmatically using React Router's `history` prop. See the [React Navigation documentation](/react/navigation.mdx#navigation) 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.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/api/icon.mdx) 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.mdx#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/api/content.mdx#methods) section of their API documentation. ## Run on a Device @@ -374,11 +374,11 @@ This guide covered the basics of creating an Ionic React app, adding navigation,

Discover how to handle routing and navigation in Ionic React apps using the React Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v7/reference/glossary.mdx b/versioned_docs/version-v7/reference/glossary.mdx index 6df9ec43090..ea3512bcb89 100644 --- a/versioned_docs/version-v7/reference/glossary.mdx +++ b/versioned_docs/version-v7/reference/glossary.mdx @@ -86,7 +86,7 @@ This version of JavaScript is the latest standard. It is currently in the final ### Genymotion {/* #genymotion */} -Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on Android. Check out our [resource section](../developing/tips#using-genymotion-android) on Genymotion for more info. +Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on Android. Check out our [resource section](/developing/tips.mdx#using-the-genymotion-android-emulator) on Genymotion for more info. ### Git {/* #git */} diff --git a/versioned_docs/version-v7/reference/support.mdx b/versioned_docs/version-v7/reference/support.mdx index d1776ff002c..c5dc8107b80 100644 --- a/versioned_docs/version-v7/reference/support.mdx +++ b/versioned_docs/version-v7/reference/support.mdx @@ -113,4 +113,4 @@ Note that later versions of Ionic do not support iOS 13; see [mobile support tab | V3 | Not currently supported | @awesome-cordova-plugins 4.X | - Wrappers (and their associated plugins) are community maintained. -- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](../native.mdx#vanilla-javascript) +- \*Cordova plugin support with Ionic Native and `@ionic/react` can be achieved using the [vanilla JavaScript implementation](/native.mdx) diff --git a/versioned_docs/version-v7/theming/advanced.mdx b/versioned_docs/version-v7/theming/advanced.mdx index 51514954b03..9d5e8f565ad 100644 --- a/versioned_docs/version-v7/theming/advanced.mdx +++ b/versioned_docs/version-v7/theming/advanced.mdx @@ -64,8 +64,8 @@ While the application and stepped variables in the themes section are useful for | `--ion-safe-area-right` | Adjust the safe area inset right of the app | | `--ion-safe-area-bottom` | Adjust the safe area inset bottom of the app | | `--ion-safe-area-left` | Adjust the safe area inset left of the app | -| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#element-margin) | -| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#element-padding) | +| `--ion-margin` | Adjust the margin of the [Margin attributes](../layout/css-utilities.mdx#margin) | +| `--ion-padding` | Adjust the padding of the [Padding attributes](../layout/css-utilities.mdx#padding) | ### Grid Variables diff --git a/versioned_docs/version-v7/troubleshooting/build.mdx b/versioned_docs/version-v7/troubleshooting/build.mdx index 1f19102d130..7a0897fc9db 100644 --- a/versioned_docs/version-v7/troubleshooting/build.mdx +++ b/versioned_docs/version-v7/troubleshooting/build.mdx @@ -98,7 +98,7 @@ import { MyService } from 'my-service'; class MyApp {} ``` -If the parameter is another component or directive (for example, a parent component), adding it to your list of providers will make the error go away, but this will have the same effect as the [Multiple instances of a provider](#multiple_instances) above. You'll be creating a new instance of the component class, and you won't get a reference to the component instance you want. Instead, make sure that the directive or component you expect to be injected is available to your component (e.g. that it is actually a parent if you are expecting it to be a parent). This is probably easiest understood with an example: +If the parameter is another component or directive (for example, a parent component), adding it to your list of providers will make the error go away, but this will have the same effect as the [Multiple instances of a provider](/troubleshooting/runtime.mdx#multiple-instances-of-a-provider) error. You'll be creating a new instance of the component class, and you won't get a reference to the component instance you want. Instead, make sure that the directive or component you expect to be injected is available to your component (e.g. that it is actually a parent if you are expecting it to be a parent). This is probably easiest understood with an example: ```tsx @Component({ diff --git a/versioned_docs/version-v7/troubleshooting/cors.mdx b/versioned_docs/version-v7/troubleshooting/cors.mdx index 061236ad283..7961c7e0a72 100644 --- a/versioned_docs/version-v7/troubleshooting/cors.mdx +++ b/versioned_docs/version-v7/troubleshooting/cors.mdx @@ -144,7 +144,7 @@ The browser automatically sends the appropriate headers for CORS in every reques ### A. Enabling CORS in a server you control -The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response-) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular. +The correct and easiest solution is to enable CORS by returning the [right response headers](#server-headers-response) from the web server or backend and responding to preflight requests, as it allows to keep using `XMLHttpRequest`, `fetch`, or abstractions like `HttpClient` in Angular. Ionic apps may be run from different origins, but only one origin can be specified in the `Access-Control-Allow-Origin` header. Therefore we recommend checking the value of the `Origin` header from the request and reflecting it in the `Access-Control-Allow-Origin` header in the response. diff --git a/versioned_docs/version-v7/troubleshooting/native.mdx b/versioned_docs/version-v7/troubleshooting/native.mdx index e0680cf3c53..265ea7eccec 100644 --- a/versioned_docs/version-v7/troubleshooting/native.mdx +++ b/versioned_docs/version-v7/troubleshooting/native.mdx @@ -48,7 +48,7 @@ Running an app on an iOS device requires a provisioning profile. If a provisioni Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/ionitron/projects/my-project/platforms/ios/cordova/build-debug.xcconfig,-workspace,SC project.xcworkspace,-scheme,SC project,-configuration,Debug,-sdk,iphonesimulator,-destination,platform=iOS Simulator,name=iPhone X,build,CONFIGURATION_BUILD_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/ionitron/projects/my-project/platforms/ios/build/sharedpch ``` -This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.mdx#running-with-xcode). +This error is an error code from Xcode that can be caused by provisioning issues or outdated cordova dependencies. To fix this error first make sure a provisioning profile has been generated using the above instructions and then try to [run the app from Xcode](../developing/ios.mdx). If this does not fix the error then run the following commands: diff --git a/versioned_docs/version-v7/troubleshooting/runtime.mdx b/versioned_docs/version-v7/troubleshooting/runtime.mdx index 7b5d0450155..f6972d50ae8 100644 --- a/versioned_docs/version-v7/troubleshooting/runtime.mdx +++ b/versioned_docs/version-v7/troubleshooting/runtime.mdx @@ -211,7 +211,7 @@ class MyApp { ## Accessing `this` in a function callback returns `undefined` {/* #accessing-this */} -Certain components, such as [counterFormatter on ion-input](../api/input#prop-counter-formatter) and [pinFormatter on ion-range](../api/input#pinformatter), allow developers to pass callbacks. It's important that you bind the correct `this` value if you plan to access `this` from within the context of the callback. You may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`: +Certain components, such as [counterFormatter on ion-input](../api/input#prop-counter-formatter) and [pinFormatter on ion-range](/api/range.mdx#prop-pin-formatter), allow developers to pass callbacks. It's important that you bind the correct `this` value if you plan to access `this` from within the context of the callback. You may need to access `this` when using Angular components or when using class components in React. There are two ways to bind `this`: The first way to bind `this` is to use the `bind()` method on a function instance. If you want to pass a callback called `counterFormatterFn`, then you would write `counterFormatterFn.bind(this)`. diff --git a/versioned_docs/version-v7/updating/6-0.mdx b/versioned_docs/version-v7/updating/6-0.mdx index b4176cdb84e..d89dd4c91cd 100644 --- a/versioned_docs/version-v7/updating/6-0.mdx +++ b/versioned_docs/version-v7/updating/6-0.mdx @@ -310,9 +310,9 @@ npm install @ionic/core@6 3. Remove any usages of the `--padding-bottom`, `--padding-end`, `--padding-start`, `--padding-top`, and `--placeholder-color` CSS Variables. To customize the padding on `ion-datetime`, you can use any of the `padding` CSS properties. -4. Remove any usage of the `open` method. To present the datetime in an overlay, place it inside of an `ion-modal` or an `ion-popover` component. See the [ion-datetime Usage Examples](../api/datetime#usage) for more information. +4. Remove any usage of the `open` method. To present the datetime in an overlay, place it inside of an `ion-modal` or an `ion-popover` component. See the [ion-datetime Usage Examples](/api/datetime.mdx#basic-usage) for more information. -5. Remove any usage of the `displayFormat` or `displayTimezone` properties. To parse the UTC string provided in the payload of the `ionChange` event, we recommend using [date-fns](https://date-fns.org/). See the [ion-datetime Parsing Dates Documentation](../api/datetime#parsing-dates) for examples. +5. Remove any usage of the `displayFormat` or `displayTimezone` properties. To parse the UTC string provided in the payload of the `ionChange` event, we recommend using [date-fns](https://date-fns.org/). See the [ion-datetime Parsing Dates Documentation](/api/datetime.mdx#parsing-date-values) for examples. :::note See the [Datetime Migration Sample Application](https://github.com/ionic-team/datetime-migration-samples) for more migration examples. diff --git a/versioned_docs/version-v7/vue/overview.mdx b/versioned_docs/version-v7/vue/overview.mdx index e752c1103d9..6c94378e71c 100644 --- a/versioned_docs/version-v7/vue/overview.mdx +++ b/versioned_docs/version-v7/vue/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Vue Version Support -Ionic Vue v7 supports Vue 3.x. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue). +Ionic Vue v7 supports Vue 3.x. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/reference/support.mdx#ionic-vue). ## Vue Tooling @@ -56,11 +56,11 @@ $ ionic serve █

Discover how to handle routing and navigation in Ionic Vue apps using the Vue Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v7/vue/quickstart.mdx b/versioned_docs/version-v7/vue/quickstart.mdx index f6f87a69b5c..545afdd4661 100644 --- a/versioned_docs/version-v7/vue/quickstart.mdx +++ b/versioned_docs/version-v7/vue/quickstart.mdx @@ -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.mdx#collapsible-large-titles) that displays on iOS devices 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](/api/title.mdx#collapsible-large-titles) that displays on iOS devices 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.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. +For detailed information about Ionic layout components, see the [Header](/api/header.mdx), [Toolbar](/api/toolbar.mdx), [Title](/api/title.mdx), and [Content](/api/content.mdx) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`: +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/api/button.mdx) 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.mdx) in the [Toolbar](/docs/api/toolbar.mdx). 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](/api/back-button.mdx) in the [Toolbar](/api/toolbar.mdx). 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.mdx) 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](/vue/navigation.mdx) 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.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, see the [Icon documentation](/api/icon.mdx) 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.mdx#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/api/content.mdx#methods) section of their API documentation. ## Run on a Device @@ -404,11 +404,11 @@ This guide covered the basics of creating an Ionic Vue app, adding navigation, a

Discover how to handle routing and navigation in Ionic Vue apps using the Vue Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v7/vue/troubleshooting.mdx b/versioned_docs/version-v7/vue/troubleshooting.mdx index dea452fca45..b81fa423605 100644 --- a/versioned_docs/version-v7/vue/troubleshooting.mdx +++ b/versioned_docs/version-v7/vue/troubleshooting.mdx @@ -36,7 +36,7 @@ import { IonButton } from '@ionic/vue'; ``` -Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. +Prefer to register your components globally once? We have you covered. Our [Build Options Guide](/vue/build-options.mdx#global-component-registration) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. ## Slot attributes are deprecated @@ -74,7 +74,7 @@ ionContentRef.value.scrollToBottom(); In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs. -See the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information. +See the [Quickstart Guide](quickstart.mdx#call-component-methods) for more information. ## Page transitions are not working diff --git a/versioned_docs/version-v7/vue/utility-functions.mdx b/versioned_docs/version-v7/vue/utility-functions.mdx index 6d175830679..08ae8256421 100644 --- a/versioned_docs/version-v7/vue/utility-functions.mdx +++ b/versioned_docs/version-v7/vue/utility-functions.mdx @@ -101,7 +101,7 @@ useBackButton(priority: number, handler: Handler): UseBackButtonResult; See the [Hardware Back Button Documentation](../developing/hardware-back-button) for more information and usage examples. :::note -The `useBackButton` callback will only fire when your app is running in Capacitor or Cordova. See [Hardware Back Button in Capacitor and Cordova](../developing/hardware-back-button#hardware-back-button-in-capacitor-and-cordova) for more information. +The `useBackButton` callback will only fire when your app is running in Capacitor or Cordova. See [Hardware Back Button in Capacitor and Cordova](/developing/hardware-back-button.mdx#support) for more information. ::: ## Keyboard diff --git a/versioned_docs/version-v8/angular/add-to-existing.mdx b/versioned_docs/version-v8/angular/add-to-existing.mdx index d92c5940179..affb5f900ec 100644 --- a/versioned_docs/version-v8/angular/add-to-existing.mdx +++ b/versioned_docs/version-v8/angular/add-to-existing.mdx @@ -14,7 +14,7 @@ import DocsCards from '@components/global/DocsCards'; /> -This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/docs/angular/quickstart.mdx) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/docs/angular/overview.mdx). +This guide covers how to add Ionic Angular to an existing Angular project. If you're looking to start a new project from scratch, check out the [Ionic Angular Quickstart](/angular/quickstart.mdx) guide. For an overview of how Ionic Angular works with Angular, including version support and tooling, check out the [Ionic Angular Overview](/angular/overview.mdx). :::tip @@ -76,7 +76,7 @@ Replace the existing `styles` array in `angular.json` with the following: :::info -While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/layout/global-stylesheets.mdx). ::: @@ -126,7 +126,7 @@ import { IonButton, IonDatetime } from '@ionic/angular/standalone'; export class App {} ``` -Visit the [components](/docs/components.mdx) page for all of the available Ionic components. +Visit the [components](/components.mdx) page for all of the available Ionic components. ## Using Ionic Pages @@ -175,7 +175,7 @@ Replace the existing `styles` array in `angular.json` with the following: ] ``` -These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +These stylesheets set up the overall page structure and provide [CSS utilities](/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/layout/global-stylesheets.mdx). #### 2. Set up Theming @@ -194,7 +194,7 @@ Create a `src/theme/variables.css` file with the following content: @import '@ionic/angular/css/palettes/dark.system.css'; ``` -This file enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables. +This file enables [dark mode support](/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables. #### 3. Update the App Component @@ -329,11 +329,11 @@ Now that you have Ionic Angular integrated into your project, check out:

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v8/angular/navigation.mdx b/versioned_docs/version-v8/angular/navigation.mdx index e8a53511f72..556bddd7271 100644 --- a/versioned_docs/version-v8/angular/navigation.mdx +++ b/versioned_docs/version-v8/angular/navigation.mdx @@ -229,7 +229,7 @@ The application history in this example has the following path: `Accessibility` --> `VoiceOver` --> `Speech` -When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategy). +When we press the back button, we follow that same routing path except in reverse. Linear routing is helpful in that it allows for simple and predictable routing behaviors. It also means we can use router Angular Router APIs such as [LocationStrategy.historyGo()](#navigating-using-locationstrategyhistorygo). The downside of linear routing is that it does not allow for complex user experiences such as tab views. This is where non-linear routing comes into play. diff --git a/versioned_docs/version-v8/angular/overview.mdx b/versioned_docs/version-v8/angular/overview.mdx index 6605cdbfd3a..73ca3b40bf4 100644 --- a/versioned_docs/version-v8/angular/overview.mdx +++ b/versioned_docs/version-v8/angular/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular Version Support -Ionic Angular v8 supports Angular versions 16 and above. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v8 supports Angular versions 16 and above. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/reference/support.mdx#ionic-angular). ## Angular Tooling @@ -56,11 +56,11 @@ $ ionic serve █

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v8/angular/quickstart.mdx b/versioned_docs/version-v8/angular/quickstart.mdx index 49f7cb269af..4e801cbc63f 100644 --- a/versioned_docs/version-v8/angular/quickstart.mdx +++ b/versioned_docs/version-v8/angular/quickstart.mdx @@ -174,17 +174,17 @@ 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.mdx#collapsible-large-titles) that displays on iOS devices 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](/api/title.mdx#collapsible-large-titles) that displays on iOS devices 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, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. +For detailed information about Ionic layout components, refer to the [Header](/api/header.mdx), [Toolbar](/api/toolbar.mdx), [Title](/api/title.mdx), and [Content](/api/content.mdx) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`: +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/api/button.mdx) at the end of the `ion-content`: ```html title="src/app/home/home.page.html" @@ -215,7 +215,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.mdx) to the [Toolbar](/docs/api/toolbar.mdx): +In `new.page.html`, you can add a [Back Button](/api/back-button.mdx) to the [Toolbar](/api/toolbar.mdx): ```html title="src/app/new/new.page.html" @@ -262,7 +262,7 @@ import { RouterLink } from '@angular/router'; :::info -Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/docs/angular/navigation.mdx#navigating-to-different-routes) for more information. +Navigating can also be performed using Angular's Router service. Refer to the [Angular Navigation documentation](/angular/navigation.mdx#navigating-to-different-routes) for more information. ::: @@ -307,7 +307,7 @@ export class NewPage implements OnInit { Alternatively, you can register icons in `app.component.ts` to use them throughout your app. -For more information, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, refer to the [Icon documentation](/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/). ## Call Component Methods @@ -393,7 +393,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.mdx#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/api/content.mdx#methods) section of their API documentation. ## Run on a Device @@ -432,11 +432,11 @@ This guide covered the basics of creating an Ionic Angular app, adding navigatio

Discover how to handle routing and navigation in Ionic Angular apps using the Angular Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v8/angular/your-first-app.mdx b/versioned_docs/version-v8/angular/your-first-app.mdx index beaaa889c3f..4b38c246a42 100644 --- a/versioned_docs/version-v8/angular/your-first-app.mdx +++ b/versioned_docs/version-v8/angular/your-first-app.mdx @@ -38,7 +38,7 @@ Highlights include: - One Angular-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](/native/camera.mdx), [Filesystem](/native/filesystem.mdx), and [Preferences](/native/preferences.mdx) APIs. Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-angular) referenced in this guide on GitHub. @@ -104,7 +104,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ### PWA Elements -Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). +Some Capacitor plugins, including the [Camera API](/native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). It's a separate dependency, so install it next: diff --git a/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx index bf357f59e20..fdb7b7e3f31 100644 --- a/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx +++ b/versioned_docs/version-v8/angular/your-first-app/2-taking-photos.mdx @@ -11,7 +11,7 @@ sidebar_label: Taking Photos /> -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](/native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Service diff --git a/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx b/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx index 72d809be232..f1364c137ed 100644 --- a/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx +++ b/versioned_docs/version-v8/angular/your-first-app/3-saving-photos.mdx @@ -86,7 +86,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](/native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx b/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx index 1cd887d84d6..90a215e87f5 100644 --- a/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx +++ b/versioned_docs/version-v8/angular/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](/native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/versioned_docs/version-v8/api.mdx b/versioned_docs/version-v8/api.mdx index 45e4c1d8d19..161ba1b8a36 100644 --- a/versioned_docs/version-v8/api.mdx +++ b/versioned_docs/version-v8/api.mdx @@ -12,6 +12,6 @@ import APIList from '@components/page/api/APIList'; /> -Each Ionic [component](/docs/components) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. +Each Ionic [component](/components.mdx) consists of one or more [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements). Each custom element, in turn, may expose properties, methods, events, and CSS custom properties. diff --git a/versioned_docs/version-v8/api/col.mdx b/versioned_docs/version-v8/api/col.mdx index 6988d346881..5709e350a9d 100644 --- a/versioned_docs/version-v8/api/col.mdx +++ b/versioned_docs/version-v8/api/col.mdx @@ -27,7 +27,7 @@ Refer to the [grid](./grid) documentation for more information. ## Column Alignment -By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/docs/layout/css-utilities#flex-item-properties) that can be applied to a column to customize this behavior. +By default, columns will stretch to fill the entire height of the row. Columns are [flex items](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Item), so there are several [CSS classes](/layout/css-utilities.mdx#flex-item-properties) that can be applied to a column to customize this behavior. ## Properties diff --git a/versioned_docs/version-v8/api/content.mdx b/versioned_docs/version-v8/api/content.mdx index fe6c1064a7d..3c24e82d6d7 100644 --- a/versioned_docs/version-v8/api/content.mdx +++ b/versioned_docs/version-v8/api/content.mdx @@ -25,7 +25,7 @@ The content component provides an easy to use content area with some useful meth to control the scrollable area. There should only be one content in a single view. -Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/docs/layout/css-utilities) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). +Content, along with many other Ionic components, can be customized to modify its padding, margin, and more using the global styles provided in the [CSS Utilities](/layout/css-utilities.mdx) or by individually styling it using CSS and the available [CSS Custom Properties](#css-custom-properties). ## Basic Usage @@ -97,7 +97,7 @@ import CSSProps from '@site/static/usage/v8/content/theming/css-properties/index ### Safe Area Padding -The content component will not automatically apply padding to any of its sides to account for the [safe area](/docs/theming/advanced#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables). +The content component will not automatically apply padding to any of its sides to account for the [safe area](/theming/advanced.mdx#safe-area-padding). This is because the content component is often used in conjunction with other components that apply their own padding, such as [headers](./header) and [footers](./footer). However, if the content component is being used on its own, it may be desired to apply padding to the safe area. This can be done through CSS by using the `--ion-safe-area-(dir)` variables described in [Application Variables](../theming/advanced.mdx#application-variables). The most common use case for this is to apply padding to the top of the content to account for the status bar. This can be done by setting the `padding-top` property to the value of the `--ion-safe-area-top` variable. diff --git a/versioned_docs/version-v8/api/fab.mdx b/versioned_docs/version-v8/api/fab.mdx index e41a13bb25f..c75fad7736a 100644 --- a/versioned_docs/version-v8/api/fab.mdx +++ b/versioned_docs/version-v8/api/fab.mdx @@ -47,7 +47,7 @@ import Positioning from '@site/static/usage/v8/fab/positioning/index.mdx'; ### Safe Area -If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/docs/theming/advanced#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/docs/theming/advanced#application-variables). +If there is no `ion-header` or `ion-footer` component, the fab may be covered by a device's notch, status bar, or other device UI. In these cases, the [safe area](/theming/advanced.mdx#safe-area-padding) on the top and bottom is not taken into account. This can be adjusted by using the [`--ion-safe-area-(dir)` variables](/theming/advanced.mdx#application-variables). When using a fab with `vertical` set to `"top"` without an `ion-header`, the top margin needs to be set: diff --git a/versioned_docs/version-v8/api/infinite-scroll-content.mdx b/versioned_docs/version-v8/api/infinite-scroll-content.mdx index 2aa0d4ee5e6..3fd1cf71046 100644 --- a/versioned_docs/version-v8/api/infinite-scroll-content.mdx +++ b/versioned_docs/version-v8/api/infinite-scroll-content.mdx @@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The `ion-infinite-scroll-content` component is the default child used by the `ion-infinite-scroll`. It displays an infinite scroll spinner that looks best based on the platform and changes the look depending on the infinite scroll's state. The default spinner can be changed and text can be added by setting the `loadingSpinner` and `loadingText` properties. -For more information as well as usage, refer to the [Infinite Scroll Documentation](./infinite-scroll.mdx#infinite-scroll-content). +For more information as well as usage, refer to the [Infinite Scroll Documentation](./infinite-scroll.mdx#custom-content). ## Properties diff --git a/versioned_docs/version-v8/api/input-password-toggle.mdx b/versioned_docs/version-v8/api/input-password-toggle.mdx index 4a8ca029f85..d56f29278a6 100644 --- a/versioned_docs/version-v8/api/input-password-toggle.mdx +++ b/versioned_docs/version-v8/api/input-password-toggle.mdx @@ -27,7 +27,7 @@ The InputPasswordToggle component is a companion component to [Input](./input). :::info -InputPasswordToggle must be used with an [Input](./input) that has its [`type`](./input/#type) property set to either `'text'` or `'password'`. +InputPasswordToggle must be used with an [Input](./input) that has its [`type`](./input.mdx#prop-type) property set to either `'text'` or `'password'`. Using any other `type` will cause a warning to be logged. diff --git a/versioned_docs/version-v8/api/input.mdx b/versioned_docs/version-v8/api/input.mdx index 02823e780c3..28d8a250b17 100644 --- a/versioned_docs/version-v8/api/input.mdx +++ b/versioned_docs/version-v8/api/input.mdx @@ -109,7 +109,7 @@ import HelperError from '@site/static/usage/v8/input/helper-error/index.mdx'; The input counter is text that displays under an input to notify the user of how many characters have been entered out of the total that the input will accept. When adding counter, the default behavior is to format the value that gets displayed as `inputLength` / `maxLength`. This behavior can be customized by passing in a formatter function to the `counterFormatter` property. -The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](/docs/api/input#using-the-modern-syntax) and should be used directly on `ion-input` instead. +The `counter` and `counterFormatter` properties on `ion-item` were [deprecated in Ionic 7](https://ionic-docs-mt82qcyb0-ionic1.vercel.app/docs/v7/api/input#using-the-modern-syntax) and should be used directly on `ion-input` instead. import Counter from '@site/static/usage/v8/input/counter/index.mdx'; diff --git a/versioned_docs/version-v8/api/item.mdx b/versioned_docs/version-v8/api/item.mdx index 6cd87130d5e..5f090c61972 100644 --- a/versioned_docs/version-v8/api/item.mdx +++ b/versioned_docs/version-v8/api/item.mdx @@ -28,7 +28,7 @@ Items are elements that can contain text, icons, avatars, images, inputs, and an ## Basic Usage -Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. Refer to the [CSS Utilities Documentation](/docs/layout/css-utilities) for more classes that can be added to an item to transform the text. +Items left align text and wrap when the text is wider than the item. We can modify this behavior using the CSS Utilities provided by Ionic Framework, such as using `.ion-text-nowrap` in the below example. Refer to the [CSS Utilities Documentation](/layout/css-utilities.mdx) for more classes that can be added to an item to transform the text. import Basic from '@site/static/usage/v8/item/basic/index.mdx'; @@ -251,7 +251,7 @@ Controls are form components such as checkboxes, inputs, radios, and more. Each text={ <> Items should typically have no more than two controls. If you need more controls, consider adding the additional - controls in a Modal that is accessible from the item. + controls in a Modal that is accessible from the item. } doText="Move additional controls to a submenu accessible from the item." diff --git a/versioned_docs/version-v8/api/modal.mdx b/versioned_docs/version-v8/api/modal.mdx index 8f38444c646..f352f77999c 100644 --- a/versioned_docs/version-v8/api/modal.mdx +++ b/versioned_docs/version-v8/api/modal.mdx @@ -175,34 +175,30 @@ import SheetScrollingContentExample from '@site/static/usage/v8/modal/sheet/expa -## Styling +## Theming -Modals are presented at the root of your application so they overlay your entire app. This behavior applies to both inline modals and modals presented from a controller. As a result, custom modal styles can not be scoped to a particular component as they will not apply to the modal. Instead, styles must be applied globally. For most developers, placing the custom styles in `global.css` is sufficient. +[Controller modals](#controller-modals) are appended to the root of your application, outside of the component that presented them. Component-scoped styles will not reach these modals, so their styles must be applied globally, from a stylesheet that is not scoped to a component. -:::note +[Inline modals](#inline-modals-recommended) stay where they are declared in your template, so component-scoped styles do apply to them. -If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information. +### Styling -::: +import ThemeExample from '@site/static/usage/v8/modal/styling/theming/index.mdx'; -:::note + -`ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables: +### Stacked Modals -::: +`ion-modal` works under the assumption that stacked modals are the same size. As a result, each subsequent modal will have no box shadow and a backdrop opacity of `0`. This is to avoid the effect of shadows and backdrops getting darker with each added modal. This can be changed by setting the `--box-shadow` and `--backdrop-opacity` CSS variables: -``` +```css ion-modal.stack-modal { --box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4); --backdrop-opacity: var(--ion-backdrop-opacity, 0.32); } ``` -import ThemeExample from '@site/static/usage/v8/modal/styling/theming/index.mdx'; - - - -### Animations +## Animations The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`. diff --git a/versioned_docs/version-v8/api/refresher-content.mdx b/versioned_docs/version-v8/api/refresher-content.mdx index 2b96e85b1f1..f346f9c24bd 100644 --- a/versioned_docs/version-v8/api/refresher-content.mdx +++ b/versioned_docs/version-v8/api/refresher-content.mdx @@ -13,7 +13,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; The refresher content contains the text, icon and spinner to display during a pull-to-refresh. Ionic displays a pulling icon and refreshing spinner based on the platform. However, the default icon, spinner, and text can be customized based on the state of the refresher. -For usage examples, refer to the [Refresher](/docs/api/refresher) documentation. +For usage examples, refer to the [Refresher](/api/refresher.mdx) documentation. ## Properties diff --git a/versioned_docs/version-v8/api/row.mdx b/versioned_docs/version-v8/api/row.mdx index 5cfc1428791..919e8a31c26 100644 --- a/versioned_docs/version-v8/api/row.mdx +++ b/versioned_docs/version-v8/api/row.mdx @@ -28,7 +28,7 @@ Refer to the [grid](./grid) documentation for more information. ## Row Alignment -By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/docs/layout/css-utilities#flex-container-properties) that can be applied to a row to customize this behavior. +By default, columns will stretch to fill the entire height of the row and wrap when necessary. Rows are [flex containers](https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container), so there are several [CSS classes](/layout/css-utilities.mdx#flex-container-properties) that can be applied to a row to customize this behavior. ## Properties diff --git a/versioned_docs/version-v8/api/text.mdx b/versioned_docs/version-v8/api/text.mdx index 5a201e39c3e..06043c58296 100644 --- a/versioned_docs/version-v8/api/text.mdx +++ b/versioned_docs/version-v8/api/text.mdx @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v8/text/basic/index.mdx'; ## Theming -The text component can be customized by changing any of the default [colors](../../docs/theming/colors) Ionic provides. +The text component can be customized by changing any of the default [colors](/theming/colors.mdx) Ionic provides. ## Properties diff --git a/versioned_docs/version-v8/api/title.mdx b/versioned_docs/version-v8/api/title.mdx index 663f938a623..2c14a7b6290 100644 --- a/versioned_docs/version-v8/api/title.mdx +++ b/versioned_docs/version-v8/api/title.mdx @@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v8/title/collapsible-large ### Collapsible Buttons -The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#collapse) property to additionally display in the header as the toolbar is collapsed. +The [buttons](./buttons.mdx) component can be used with the [`collapse`](./buttons.mdx#prop-collapse) property to additionally display in the header as the toolbar is collapsed. import CollapsibleLargeTitleButtons from '@site/static/usage/v8/title/collapsible-large-title/buttons/index.mdx'; diff --git a/versioned_docs/version-v8/cli.mdx b/versioned_docs/version-v8/cli.mdx index 879738c919e..e6cf8f5d292 100644 --- a/versioned_docs/version-v8/cli.mdx +++ b/versioned_docs/version-v8/cli.mdx @@ -11,7 +11,7 @@ sidebar_label: Overview /> -The Ionic command-line interface ([CLI](/docs/reference/glossary#cli)) is the go-to tool for developing Ionic apps. +The Ionic command-line interface ([CLI](/reference/glossary.mdx#cli)) is the go-to tool for developing Ionic apps. ## Installation @@ -41,14 +41,14 @@ For some commands, such as `ionic serve`, the help documentation is contextual t ## Architecture -The Ionic CLI is built with [TypeScript](/docs/reference/glossary#typescript) and [Node.js](/docs/reference/glossary#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source [GitHub repository](https://github.com/ionic-team/ionic-cli). +The Ionic CLI is built with [TypeScript](/reference/glossary.mdx#typescript) and [Node.js](/reference/glossary.mdx#node). It supports Node 10.3+, but the latest Node LTS is always recommended. Follow development on the open source [GitHub repository](https://github.com/ionic-team/ionic-cli). ## Troubleshooting To troubleshoot issues with the Ionic CLI, the following may be useful: - Make sure the latest version of the Ionic CLI is installed. Get the installed Ionic CLI version by running `ionic --version`. The Ionic CLI version is not related to the Ionic Framework version. -- Make sure the latest Node LTS is installed. Refer to [Node & npm](/docs/intro/environment#node-npm) environment setup. +- Make sure the latest Node LTS is installed. Refer to [Node & npm](/intro/environment.mdx#node--npm) environment setup. - The `--verbose` flag prints debugging messages, which may narrow down the issue. -- Connection issues may be due to improperly configured proxy settings. Refer to [Using a Proxy](/docs/cli/using-a-proxy) to configure request proxying. -- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/docs/cli/configuration#environment-variables). +- Connection issues may be due to improperly configured proxy settings. Refer to [Using a Proxy](/cli/using-a-proxy.mdx) to configure request proxying. +- The global Ionic CLI configuration directory is `~/.ionic` on all platforms. It can safely be deleted and the Ionic CLI will repopulate it, but all configuration (including user sessions) will be lost. Configure this directory with [CLI environment variables](/cli/configuration.mdx#environment-variables). diff --git a/versioned_docs/version-v8/cli/configuration.mdx b/versioned_docs/version-v8/cli/configuration.mdx index 48c56086070..f1699b37c06 100644 --- a/versioned_docs/version-v8/cli/configuration.mdx +++ b/versioned_docs/version-v8/cli/configuration.mdx @@ -14,7 +14,7 @@ title: Configuration Configuration values are stored in JSON files. The Ionic CLI maintains a global configuration file, usually located at `~/.ionic/config.json`, and project configuration files, usually at the project's root directory as `ionic.config.json`. -The CLI provides commands for setting and printing config values from project config files and the global CLI config file. Run `ionic config --help` or refer to the documentation for usage of [`ionic config get`](commands/config-get.mdx) and [`ionic config set`](commands/config-set.mdx). +The CLI provides commands for setting and printing config values from project config files and the global CLI config file. Run `ionic config --help` or refer to the documentation for usage of [`ionic config get`](/cli/commands/config-get.mdx) and [`ionic config set`](/cli/commands/config-set.mdx). ### Project Configuration File diff --git a/versioned_docs/version-v8/cli/livereload.mdx b/versioned_docs/version-v8/cli/livereload.mdx index e8baecdb272..3e011e637eb 100644 --- a/versioned_docs/version-v8/cli/livereload.mdx +++ b/versioned_docs/version-v8/cli/livereload.mdx @@ -59,7 +59,7 @@ Remember, with the `--external` option, others on your Wi-Fi network will be abl ## Tips -- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](commands/cordova-run.mdx). +- With Cordova, use the `--device`, `--emulator`, and `--target` options to narrow down target devices. Use the `--list` option to list all targets. See usage in the [command docs](/cli/commands/cordova-run.mdx). - You can separate the dev server process and the deploy process by using `ionic serve` and the `--livereload-url` option of `ionic cordova run` or `ionic capacitor run`. - For Android, it is possible to configure [adb](https://developer.android.com/studio/command-line/adb) to always forward ports while the adb server is running (refer to `adb reverse`). With port forwarding set up, an external address would no longer be required. You can also setup the adb bridge over TCP such that subsequent deploys no longer need a USB cable. - If you are using a development container with Angular, live reload may not work. To fix it, set `projects.app.architect.serve.configurations.development.poll` to `1` in `angular.json`. diff --git a/versioned_docs/version-v8/core-concepts/fundamentals.mdx b/versioned_docs/version-v8/core-concepts/fundamentals.mdx index 6630422a917..0d13c696aba 100644 --- a/versioned_docs/version-v8/core-concepts/fundamentals.mdx +++ b/versioned_docs/version-v8/core-concepts/fundamentals.mdx @@ -54,7 +54,7 @@ Developers can use standard events such as `click` as they normally would. Howev ## Properties -Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's [API documentation](/docs/api) page. +Properties are JavaScript properties that can be set on Ionic components to configure their behavior and appearance. Properties are defined in each component's [API documentation](/api.mdx) page. ### Reactive Properties @@ -76,4 +76,4 @@ Virtual properties are designed for one-time configuration during component init The `mode` property is a virtual property that determines which platform styles to use for a component. It can be set at the component level or globally through the app configuration. In both cases, it's set once during initialization and doesn't change during the component's lifecycle. -For more information on Ionic modes, read the [Platform Styles documentation](/docs/theming/platform-styles). +For more information on Ionic modes, read the [Platform Styles documentation](/theming/platform-styles.mdx). diff --git a/versioned_docs/version-v8/developing/config.mdx b/versioned_docs/version-v8/developing/config.mdx index 70d2d89cfa6..e783892692d 100644 --- a/versioned_docs/version-v8/developing/config.mdx +++ b/versioned_docs/version-v8/developing/config.mdx @@ -170,45 +170,45 @@ class AppComponent { Below are the config options that Ionic uses. -| Config | Type | Description | -| --------------------------- | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | -| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | -| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | -| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | -| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | -| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | -| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | -| `backButtonText` | `string` | Overrides the default text in all `` components. | -| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | -| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | -| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | -| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | -| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | -| `logLevel` | `'OFF' \| 'ERROR' \| 'WARN'` | Configures the logging level for Ionic Framework. If `'OFF'`, no errors or warnings are logged. If `'ERROR'`, only errors are logged. If `'WARN'`, errors and warnings are logged. | -| `menuIcon` | `string` | Overrides the default icon in all `` components. | -| `menuType` | `string` | Overrides the default menu type for all `` components. | -| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | -| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | -| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | -| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | -| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | -| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | -| `platform` | [`PlatformConfig`](/docs/angular/platform#customizing-platform-detection-methods) | Overrides the default platform detection methods. | -| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | -| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | -| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | -| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | -| `rippleEffect` | `boolean` | If `true`, Material Design ripple effects will be enabled across the app. | -| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | -| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | -| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | -| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | -| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | -| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | -| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | -| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | -| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | -| `experimentalCloseWatcher` | `boolean` | **Experimental:** If `true`, the [CloseWatcher API](https://github.com/WICG/close-watcher) will be used to handle all Escape key and hardware back button presses to dismiss menus and overlays and to navigate. Note that the `hardwareBackButton` config option must also be `true`. | -| `focusManagerPriority` | [`FocusManagerPriority[]`](./managing-focus#types) | **Experimental:** When defined, Ionic will move focus to the appropriate element after each page transition. This ensures that users relying on assistive technology are informed when a page transition happens. Disabled by default. | +| Config | Type | Description | +| --------------------------- | ---------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `actionSheetEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-action-sheet`, overriding the default "animation". | +| `actionSheetLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-action-sheet`, overriding the default "animation". | +| `alertEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-alert`, overriding the default "animation". | +| `alertLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-alert`, overriding the default "animation". | +| `animated` | `boolean` | If `true`, Ionic will enable all animations and transitions across the app. | +| `backButtonDefaultHref` | `string` | Overrides the default value for the `defaultHref` property in all `` components. | +| `backButtonIcon` | `string` | Overrides the default icon in all `` components. | +| `backButtonText` | `string` | Overrides the default text in all `` components. | +| `innerHTMLTemplatesEnabled` | `boolean` | Relevant Components: `ion-alert`, `ion-infinite-scroll-content`, `ion-loading`, `ion-refresher-content`, `ion-toast`. If `true`, content passed to the relevant components will be parsed as HTML instead of plaintext. Defaults to `false`. | +| `hardwareBackButton` | `boolean` | If `true`, Ionic will respond to the hardware back button in an Android device. | +| `infiniteLoadingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `loadingEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-loading`, overriding the default "animation". | +| `loadingLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-loading`, overriding the default "animation". | +| `loadingSpinner` | `SpinnerTypes` | Overrides the default spinner for all `ion-loading` overlays. | +| `logLevel` | `'OFF' \| 'ERROR' \| 'WARN'` | Configures the logging level for Ionic Framework. If `'OFF'`, no errors or warnings are logged. If `'ERROR'`, only errors are logged. If `'WARN'`, errors and warnings are logged. | +| `menuIcon` | `string` | Overrides the default icon in all `` components. | +| `menuType` | `string` | Overrides the default menu type for all `` components. | +| `modalEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-modal`, overriding the default "animation". | +| `modalLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-modal`, overriding the default "animation". | +| `mode` | `Mode` | The mode determines which platform styles to use for the whole application. | +| `navAnimation` | `AnimationBuilder` | Overrides the default "animation" of all `ion-nav` and `ion-router-outlet` across the whole application. | +| `pickerEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-picker`, overriding the default "animation". | +| `pickerLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-picker`, overriding the default "animation". | +| `platform` | [`PlatformConfig`](/angular/platform.mdx#customizing-platform-detection-functions) | Overrides the default platform detection methods. | +| `popoverEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-popover`, overriding the default "animation". | +| `popoverLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-popover`, overriding the default "animation". | +| `refreshingIcon` | `string` | Overrides the default icon in all `` components. | +| `refreshingSpinner` | `SpinnerTypes` | Overrides the default spinner type in all `` components. | +| `rippleEffect` | `boolean` | If `true`, Material Design ripple effects will be enabled across the app. | +| `sanitizerEnabled` | `boolean` | If `true`, Ionic will enable a basic DOM sanitizer on component properties that accept custom HTML. | +| `spinner` | `SpinnerTypes` | Overrides the default spinner in all `` components. | +| `statusTap` | `boolean` | If `true`, clicking or tapping the status bar will cause the content to scroll to the top. | +| `swipeBackEnabled` | `boolean` | If `true`, Ionic will enable the "swipe-to-go-back" gesture across the application. | +| `tabButtonLayout` | `TabButtonLayout` | Overrides the default "layout" of all `ion-bar-button` across the whole application. | +| `toastDuration` | `number` | Overrides the default `duration` for all `ion-toast` components. | +| `toastEnter` | `AnimationBuilder` | Provides a custom enter animation for all `ion-toast`, overriding the default "animation". | +| `toastLeave` | `AnimationBuilder` | Provides a custom leave animation for all `ion-toast`, overriding the default "animation". | +| `toggleOnOffLabels` | `boolean` | Overrides the default `enableOnOffLabels` in all `ion-toggle` components. | +| `experimentalCloseWatcher` | `boolean` | **Experimental:** If `true`, the [CloseWatcher API](https://github.com/WICG/close-watcher) will be used to handle all Escape key and hardware back button presses to dismiss menus and overlays and to navigate. Note that the `hardwareBackButton` config option must also be `true`. | +| `focusManagerPriority` | [`FocusManagerPriority[]`](./managing-focus#types) | **Experimental:** When defined, Ionic will move focus to the appropriate element after each page transition. This ensures that users relying on assistive technology are informed when a page transition happens. Disabled by default. | diff --git a/versioned_docs/version-v8/developing/config/per-platform/index.mdx b/versioned_docs/version-v8/developing/config/per-platform/index.mdx index a5f815dae53..feb1d4429b2 100644 --- a/versioned_docs/version-v8/developing/config/per-platform/index.mdx +++ b/versioned_docs/version-v8/developing/config/per-platform/index.mdx @@ -17,7 +17,7 @@ import TabItem from '@theme/TabItem'; Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -Refer to the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +Refer to the [Angular Platform Documentation](/angular/platform.mdx) for the types of platforms you can detect. ::: @@ -42,7 +42,7 @@ import { isPlatform, IonicModule } from '@ionic/angular'; Since the config is set at runtime, you will not have access to the Platform Dependency Injection. Instead, you can use the underlying functions that the provider uses directly. -Refer to the [Angular Platform Documentation](../angular/platform) for the types of platforms you can detect. +Refer to the [Angular Platform Documentation](/angular/platform.mdx) for the types of platforms you can detect. ::: @@ -64,7 +64,7 @@ bootstrapApplication(AppComponent, { :::note -Refer to the [React Platform Documentation](../react/platform) for the types of platforms you can detect. +Refer to the [React Platform Documentation](/react/platform.mdx) for the types of platforms you can detect. ::: @@ -81,7 +81,7 @@ setupIonicReact({ :::note -Refer to the [Vue Platform Documentation](../vue/platform) for the types of platforms you can detect. +Refer to the [Vue Platform Documentation](/vue/platform.mdx) for the types of platforms you can detect. ::: diff --git a/versioned_docs/version-v8/developing/scaffolding.mdx b/versioned_docs/version-v8/developing/scaffolding.mdx index b1ba4685af7..7f69b5ccae9 100644 --- a/versioned_docs/version-v8/developing/scaffolding.mdx +++ b/versioned_docs/version-v8/developing/scaffolding.mdx @@ -50,7 +50,7 @@ This command is only supported in Ionic Angular. ::: -The Ionic CLI can generate new app features with the [`ionic generate`](../cli/commands/generate.mdx) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated. +The Ionic CLI can generate new app features with the [`ionic generate`](/cli/commands/generate.mdx) command. By running `ionic generate` in the command line, a selection prompt is displayed which lists the available features that can be generated. ```shell-session $ ionic generate @@ -96,4 +96,4 @@ The Ionic CLI uses the underlying framework tooling to stay close to best practi After creating the files and directories for the new page, the CLI will also update the router configuration to include the new page. This reduces the amount of manual work needed to keep the development lifecycle moving. -For more details, run `ionic g --help` from the command line or refer to the [`ionic generate` documentation](../cli/commands/generate.mdx). +For more details, run `ionic g --help` from the command line or refer to the [`ionic generate` documentation](/cli/commands/generate.mdx). diff --git a/versioned_docs/version-v8/intro/cdn.mdx b/versioned_docs/version-v8/intro/cdn.mdx index 868fcd99eab..55aad3c90c7 100644 --- a/versioned_docs/version-v8/intro/cdn.mdx +++ b/versioned_docs/version-v8/intro/cdn.mdx @@ -116,7 +116,7 @@ It's recommended to use [jsdelivr](https://www.jsdelivr.com/) to access the Fram ``` -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](/docs/layout/global-stylesheets.mdx). +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.mdx). ## Ionicons CDN diff --git a/versioned_docs/version-v8/javascript/overview.mdx b/versioned_docs/version-v8/javascript/overview.mdx index 36d298730d0..0023d09aaad 100644 --- a/versioned_docs/version-v8/javascript/overview.mdx +++ b/versioned_docs/version-v8/javascript/overview.mdx @@ -56,15 +56,15 @@ $ npm run dev █ Learn more about JavaScript's core concepts, tools, and best practices from the official JavaScript documentation. - +

Discover how to handle routing and navigation in Ionic JavaScript apps using the Ionic Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v8/javascript/quickstart.mdx b/versioned_docs/version-v8/javascript/quickstart.mdx index 0f51f82b72a..abe763bb9f0 100644 --- a/versioned_docs/version-v8/javascript/quickstart.mdx +++ b/versioned_docs/version-v8/javascript/quickstart.mdx @@ -232,7 +232,7 @@ This creates a custom element called `home-page` that contains the layout for yo :::tip[Learn More] -For detailed information about Ionic layout components, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. +For detailed information about Ionic layout components, refer to the [Header](/api/header.mdx), [Toolbar](/api/toolbar.mdx), [Title](/api/title.mdx), and [Content](/api/content.mdx) documentation. ::: @@ -252,7 +252,7 @@ At this point your browser should be displaying the Home page. ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) to navigate to another page. Update the `HomePage` component in `HomePage.js`: +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/api/button.mdx) to navigate to another page. Update the `HomePage` component in `HomePage.js`: ```js title="src/pages/HomePage.js" class HomePage extends HTMLElement { @@ -307,7 +307,7 @@ class NewPage extends HTMLElement { customElements.define('new-page', NewPage); ``` -This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). 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](/api/back-button.mdx) in the [Toolbar](/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. Next, update the ` ``` -Visit the [components](/docs/components.mdx) page for all of the available Ionic components. +Visit the [components](/components.mdx) page for all of the available Ionic components. ## Using Ionic Pages @@ -110,7 +110,7 @@ import '@ionic/vue/css/flex-utils.css'; import '@ionic/vue/css/display.css'; ``` -These stylesheets set up the overall page structure and provide [CSS utilities](/docs/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/docs/layout/global-stylesheets.mdx). +These stylesheets set up the overall page structure and provide [CSS utilities](/layout/css-utilities.mdx) for faster development. Some stylesheets are optional. For details on which stylesheets are required, check out [Global Stylesheets](/layout/global-stylesheets.mdx). #### 2. Set up Theming @@ -162,7 +162,7 @@ import './theme/variables.css'; createApp(App).use(IonicVue).mount('#app'); ``` -The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/docs/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`. +The `variables.css` file can be used to create custom Ionic Framework themes. The `dark.system.css` import enables [dark mode support](/theming/dark-mode.mdx) for your Ionic app when the system is set to prefer a dark appearance. You can customize the theming behavior by uncommenting different dark palette imports or adding custom CSS variables to `theme/variables.css`. #### 3. Update the App Component @@ -334,11 +334,11 @@ Now that you have Ionic Vue integrated into your project, check out:

Discover how to handle routing and navigation in Ionic Vue apps using the Vue Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v8/vue/overview.mdx b/versioned_docs/version-v8/vue/overview.mdx index dc55a8fc894..56dce2486af 100644 --- a/versioned_docs/version-v8/vue/overview.mdx +++ b/versioned_docs/version-v8/vue/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Vue Version Support -Ionic Vue v8 supports Vue 3.x. For detailed information on supported versions and our support policy, refer to the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue). +Ionic Vue v8 supports Vue 3.x. For detailed information on supported versions and our support policy, refer to the [Ionic Vue Support Policy](/reference/support.mdx#ionic-vue). ## Vue Tooling @@ -56,11 +56,11 @@ $ ionic serve █

Discover how to handle routing and navigation in Ionic Vue apps using the Vue Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v8/vue/quickstart.mdx b/versioned_docs/version-v8/vue/quickstart.mdx index bea913c0901..662f393d582 100644 --- a/versioned_docs/version-v8/vue/quickstart.mdx +++ b/versioned_docs/version-v8/vue/quickstart.mdx @@ -162,17 +162,17 @@ 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.mdx#collapsible-large-titles) that displays on iOS devices 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](/api/title.mdx#collapsible-large-titles) that displays on iOS devices 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, refer to the [Header](/docs/api/header.mdx), [Toolbar](/docs/api/toolbar.mdx), [Title](/docs/api/title.mdx), and [Content](/docs/api/content.mdx) documentation. +For detailed information about Ionic layout components, refer to the [Header](/api/header.mdx), [Toolbar](/api/toolbar.mdx), [Title](/api/title.mdx), and [Content](/api/content.mdx) documentation. ::: ## Add an Ionic Component -You can enhance your Home page with more Ionic UI components. For example, add a [Button](/docs/api/button.mdx) at the end of the `ion-content`: +You can enhance your Home page with more Ionic UI components. For example, add a [Button](/api/button.mdx) at the end of the `ion-content`: ```vue title="src/views/HomePage.vue" @@ -221,7 +221,7 @@ import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, Io ``` -This creates a page with a [Back Button](/docs/api/back-button.mdx) in the [Toolbar](/docs/api/toolbar.mdx). 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](/api/back-button.mdx) in the [Toolbar](/api/toolbar.mdx). The back button will automatically handle navigation back to the previous page, or to `/` if there is no history. :::warning @@ -266,7 +266,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. Refer to the [Vue Navigation documentation](/docs/vue/navigation.mdx) for more information. +Navigating can also be performed programmatically using Vue Router, and routes can be lazy loaded for better performance. Refer to the [Vue Navigation documentation](/vue/navigation.mdx) for more information. ::: @@ -292,7 +292,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, refer to the [Icon documentation](/docs/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/). +For more information, refer to the [Icon documentation](/api/icon.mdx) and the [Ionicons documentation](https://ionic.io/ionicons/). ## Call Component Methods @@ -347,7 +347,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.mdx#methods) section of their API documentation. +You can find available methods for each component in the [Methods](/api/content.mdx#methods) section of their API documentation. ## Run on a Device @@ -412,11 +412,11 @@ This guide covered the basics of creating an Ionic Vue app, adding navigation, a

Discover how to handle routing and navigation in Ionic Vue apps using the Vue Router.

 - +

Explore Ionic's rich library of UI components for building beautiful apps.

 - +

Learn how to customize the look and feel of your app with Ionic's powerful theming system.

 diff --git a/versioned_docs/version-v8/vue/troubleshooting.mdx b/versioned_docs/version-v8/vue/troubleshooting.mdx index a0f82ac90a9..9e38bc58bb3 100644 --- a/versioned_docs/version-v8/vue/troubleshooting.mdx +++ b/versioned_docs/version-v8/vue/troubleshooting.mdx @@ -36,7 +36,7 @@ import { IonButton } from '@ionic/vue'; ``` -Prefer to register your components globally once? We have you covered. Our [Optimizing Your Build Guide](quickstart.mdx#optimizing-your-build) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. +Prefer to register your components globally once? We have you covered. Our [Build Options Guide](/vue/build-options.mdx#global-component-registration) shows you how to register Ionic Vue components globally as well as the potential downsides to be aware of when using this approach. ## Slot attributes are deprecated @@ -74,7 +74,7 @@ ionContentRef.value.scrollToBottom(); In other framework integrations such as Ionic React, this is not needed as any `ref` you provide is automatically forwarded to the underlying Web Component instance. We are unable to do the same thing here due to limitations in how Vue manages refs. -Refer to the [Quickstart Guide](quickstart.mdx#calling-methods-on-components) for more information. +Refer to the [Quickstart Guide](/vue/quickstart.mdx#call-component-methods) for more information. ## Page transitions are not working diff --git a/versioned_docs/version-v8/vue/utility-functions.mdx b/versioned_docs/version-v8/vue/utility-functions.mdx index 0f6d152fc4c..1a5c65a923e 100644 --- a/versioned_docs/version-v8/vue/utility-functions.mdx +++ b/versioned_docs/version-v8/vue/utility-functions.mdx @@ -102,7 +102,7 @@ Refer to the [Hardware Back Button Documentation](../developing/hardware-back-bu :::note -The `useBackButton` callback will only fire when your app is running in Capacitor or Cordova. Refer to [Hardware Back Button in Capacitor and Cordova](../developing/hardware-back-button#hardware-back-button-in-capacitor-and-cordova) for more information. +The `useBackButton` callback will only fire when your app is running in Capacitor or Cordova. Refer to [Hardware Back Button Support](/developing/hardware-back-button.mdx#support) for more information. ::: diff --git a/versioned_docs/version-v8/vue/your-first-app.mdx b/versioned_docs/version-v8/vue/your-first-app.mdx index 981c5ed8a36..0cc59b68e56 100644 --- a/versioned_docs/version-v8/vue/your-first-app.mdx +++ b/versioned_docs/version-v8/vue/your-first-app.mdx @@ -32,7 +32,7 @@ Highlights include: - One Vue-based codebase that runs on the web, iOS, and Android using Ionic Framework [UI components](../components.mdx). - Deployed as a native iOS and Android mobile app using [Capacitor](https://capacitorjs.com), Ionic's official native app runtime. -- Photo Gallery functionality powered by the Capacitor [Camera](../native/camera.mdx), [Filesystem](../native/filesystem.mdx), and [Preferences](../native/preferences.mdx) APIs. +- Photo Gallery functionality powered by the Capacitor [Camera](/native/camera.mdx), [Filesystem](/native/filesystem.mdx), and [Preferences](/native/preferences.mdx) APIs. Find the [complete app code](https://github.com/ionic-team/tutorial-photo-gallery-vue) referenced in this guide on GitHub. @@ -92,7 +92,7 @@ npm install @capacitor/camera @capacitor/preferences @capacitor/filesystem ### PWA Elements -Some Capacitor plugins, including the [Camera API](../native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). +Some Capacitor plugins, including the [Camera API](/native/camera.mdx), provide the web-based functionality and UI via the Ionic [PWA Elements library](https://github.com/ionic-team/pwa-elements). It's a separate dependency, so install it next: diff --git a/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx b/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx index b6cc75d03bc..0ef6ab705bd 100644 --- a/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx +++ b/versioned_docs/version-v8/vue/your-first-app/2-taking-photos.mdx @@ -11,7 +11,7 @@ sidebar_label: Taking Photos /> -Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](../../native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). +Now for the fun part - adding the ability to take photos with the device’s camera using the Capacitor [Camera API](/native/camera.mdx). We’ll begin with building it for the web, then make some small tweaks to make it work on mobile (iOS and Android). ## Photo Gallery Composable diff --git a/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx b/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx index bd7c36b4eef..50bd5b75df0 100644 --- a/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx +++ b/versioned_docs/version-v8/vue/your-first-app/3-saving-photos.mdx @@ -92,7 +92,7 @@ export interface UserPhoto { } ``` -We'll use the Capacitor [Filesystem API](../../native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. +We'll use the Capacitor [Filesystem API](/native/filesystem.mdx) to save the photo. First, convert the photo to base64 format. Then, pass the data to the Filesystem's `writeFile` method. Recall that we display photos by setting the image's source path (`src`) to the `webviewPath` property. So, set the `webviewPath` and return the new `Photo` object. diff --git a/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx b/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx index 1eb05718233..736c414d883 100644 --- a/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx +++ b/versioned_docs/version-v8/vue/your-first-app/4-loading-photos.mdx @@ -13,7 +13,7 @@ sidebar_label: Loading Photos We’ve implemented photo taking and saving to the filesystem. There’s one last piece of functionality missing: the photos are stored in the filesystem, but we need a way to save pointers to each file so that they can be displayed again in the photo gallery. -Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](../../native/preferences.mdx) to store our array of Photos in a key-value store. +Fortunately, this is easy: we’ll leverage the Capacitor [Preferences API](/native/preferences.mdx) to store our array of Photos in a key-value store. ## Preferences API diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json index 64b59615013..f85a6fb19c2 100644 --- a/versioned_sidebars/version-v6-sidebars.json +++ b/versioned_sidebars/version-v6-sidebars.json @@ -92,7 +92,7 @@ { "type": "link", "label": "Responsive Grid", - "href": "/docs/api/grid" + "href": "/v6/api/grid" }, { "type": "doc", diff --git a/versioned_sidebars/version-v7-sidebars.json b/versioned_sidebars/version-v7-sidebars.json index e0627cbdb3e..20ac21b7c9f 100644 --- a/versioned_sidebars/version-v7-sidebars.json +++ b/versioned_sidebars/version-v7-sidebars.json @@ -50,7 +50,7 @@ { "type": "link", "label": "Responsive Grid", - "href": "/docs/api/grid" + "href": "/v7/api/grid" }, "layout/global-stylesheets", "layout/css-utilities", diff --git a/versioned_sidebars/version-v8-sidebars.json b/versioned_sidebars/version-v8-sidebars.json index 721bec24a6e..dfe0970e650 100644 --- a/versioned_sidebars/version-v8-sidebars.json +++ b/versioned_sidebars/version-v8-sidebars.json @@ -51,7 +51,7 @@ { "type": "link", "label": "Responsive Grid", - "href": "/docs/api/grid" + "href": "/v8/api/grid" }, "layout/global-stylesheets", "layout/css-utilities",