From 337317a54aad4721b3bb053239eabb5733c06b6a Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 14 Sep 2026 06:16:15 -0700 Subject: [PATCH 01/10] chore(deps): update dependency @types/node to v24.13.4 (#4730) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- static/code/stackblitz/v8/react/package-lock.json | 6 +++--- static/code/stackblitz/v9/react/package-lock.json | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index f6c2a8f016..238a4c003c 100644 --- a/static/code/stackblitz/v8/react/package-lock.json +++ b/static/code/stackblitz/v8/react/package-lock.json @@ -1251,9 +1251,9 @@ "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" diff --git a/static/code/stackblitz/v9/react/package-lock.json b/static/code/stackblitz/v9/react/package-lock.json index e010bb8e63..092f44a5c4 100644 --- a/static/code/stackblitz/v9/react/package-lock.json +++ b/static/code/stackblitz/v9/react/package-lock.json @@ -568,9 +568,9 @@ "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" From 638828e1601f42ba7bb37f7f47473a87b67c1090 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 14 Sep 2026 13:21:09 +0000 Subject: [PATCH 02/10] chore(deps): update react-root to v19.3.0 (#4733) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package-lock.json | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index fba0e6d3ab..b470467242 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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": { @@ -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": { From 268589db0c3c0dc63f26cc8d0fdc64757a527a31 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 15 Sep 2026 08:26:21 -0700 Subject: [PATCH 03/10] chore(deps): update dependency sass to v1.104.1 (#4735) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package-lock.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index b470467242..aeaa92adc0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", From 53720b895c679d17959cd77d9c552924ffeed29d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 16 Sep 2026 09:58:51 -0400 Subject: [PATCH 04/10] chore(deps): update react to v19.3.0 (#4732) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .../stackblitz/v8/react/package-lock.json | 22 +++++++++---------- .../stackblitz/v9/react/package-lock.json | 20 +++++++++-------- 2 files changed, 22 insertions(+), 20 deletions(-) diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index 238a4c003c..6555830f3a 100644 --- a/static/code/stackblitz/v8/react/package-lock.json +++ b/static/code/stackblitz/v8/react/package-lock.json @@ -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/react/package-lock.json b/static/code/stackblitz/v9/react/package-lock.json index 092f44a5c4..9e49ecc04c 100644 --- a/static/code/stackblitz/v9/react/package-lock.json +++ b/static/code/stackblitz/v9/react/package-lock.json @@ -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": { From 88b68274399ad87a347a44a4b07c8b88522484a1 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 16 Sep 2026 10:03:38 -0400 Subject: [PATCH 05/10] chore(deps): update react monorepo to v19.3.0 (#4731) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package-lock.json | 6 +++--- static/code/stackblitz/v8/react/package-lock.json | 14 +++++++------- static/code/stackblitz/v9/react/package-lock.json | 14 +++++++------- 3 files changed, 17 insertions(+), 17 deletions(-) diff --git a/package-lock.json b/package-lock.json index aeaa92adc0..50aaa18c9a 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" diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index 6555830f3a..ecaa1cb431 100644 --- a/static/code/stackblitz/v8/react/package-lock.json +++ b/static/code/stackblitz/v8/react/package-lock.json @@ -1260,21 +1260,21 @@ } }, "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": { diff --git a/static/code/stackblitz/v9/react/package-lock.json b/static/code/stackblitz/v9/react/package-lock.json index 9e49ecc04c..477d2ad4ca 100644 --- a/static/code/stackblitz/v9/react/package-lock.json +++ b/static/code/stackblitz/v9/react/package-lock.json @@ -577,21 +577,21 @@ } }, "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": { From 30dfcc50ced4a634caaaad06660aebd01ad4167b Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 16 Sep 2026 11:15:48 -0700 Subject: [PATCH 06/10] chore(ci): split OS-independent checks into their own jobs (#4734) --- .github/workflows/CI.yml | 81 +++++++++++++++---- .../actions/check-admonitions/action.yml | 7 +- 2 files changed, 66 insertions(+), 22 deletions(-) diff --git a/.github/workflows/CI.yml b/.github/workflows/CI.yml index 308663ffe0..c247a0a6a9 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 e3f4bf6948..8cd33474a5 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'); From 0b0297e3ae861ec2acc59ae3f546156571fce944 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Wed, 16 Sep 2026 12:04:13 -0700 Subject: [PATCH 07/10] chore(deps): update ionic to v9.0.4 (#4737) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .../stackblitz/v9/angular/package-lock.json | 18 ++++++------- .../code/stackblitz/v9/angular/package.json | 4 +-- .../code/stackblitz/v9/html/package-lock.json | 8 +++--- static/code/stackblitz/v9/html/package.json | 2 +- .../stackblitz/v9/react/package-lock.json | 26 +++++++++---------- static/code/stackblitz/v9/react/package.json | 4 +-- .../code/stackblitz/v9/vue/package-lock.json | 26 +++++++++---------- static/code/stackblitz/v9/vue/package.json | 4 +-- 8 files changed, 46 insertions(+), 46 deletions(-) diff --git a/static/code/stackblitz/v9/angular/package-lock.json b/static/code/stackblitz/v9/angular/package-lock.json index 926655fe94..6d436bfab6 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 0ce54037b6..bdc97279ac 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 66de0687df..d5f2fcda0b 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 ff46944279..f69ea94511 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 477d2ad4ca..4802526d2c 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": { diff --git a/static/code/stackblitz/v9/react/package.json b/static/code/stackblitz/v9/react/package.json index af3d933fcb..b4e1004d07 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 69dfa77ece..bdfba70c54 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 442ab4287f..9528839e8b 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" }, From 165c15ee71b5140ff12545b832873f0f790bf116 Mon Sep 17 00:00:00 2001 From: Brandy Smith Date: Wed, 16 Sep 2026 15:19:07 -0400 Subject: [PATCH 08/10] docs(modal): reorganize Styling and add Sizing to Content section (#4689) Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> --- docs/api/modal.mdx | 52 ++++++++++----- .../angular/example_component_css.md | 8 +++ .../angular/example_component_html.md | 32 ++++++++++ .../angular/example_component_ts.md | 23 +++++++ .../modal/styling/sizing-to-content/demo.html | 61 ++++++++++++++++++ .../modal/styling/sizing-to-content/index.mdx | 35 +++++++++++ .../styling/sizing-to-content/javascript.md | 47 ++++++++++++++ .../sizing-to-content/react/main_css.md | 8 +++ .../sizing-to-content/react/main_tsx.md | 63 +++++++++++++++++++ .../v9/modal/styling/sizing-to-content/vue.md | 59 +++++++++++++++++ versioned_docs/version-v6/api/modal.mdx | 26 ++++---- versioned_docs/version-v7/api/modal.mdx | 26 ++++---- versioned_docs/version-v8/api/modal.mdx | 24 +++---- 13 files changed, 410 insertions(+), 54 deletions(-) create mode 100644 static/usage/v9/modal/styling/sizing-to-content/angular/example_component_css.md create mode 100644 static/usage/v9/modal/styling/sizing-to-content/angular/example_component_html.md create mode 100644 static/usage/v9/modal/styling/sizing-to-content/angular/example_component_ts.md create mode 100644 static/usage/v9/modal/styling/sizing-to-content/demo.html create mode 100644 static/usage/v9/modal/styling/sizing-to-content/index.mdx create mode 100644 static/usage/v9/modal/styling/sizing-to-content/javascript.md create mode 100644 static/usage/v9/modal/styling/sizing-to-content/react/main_css.md create mode 100644 static/usage/v9/modal/styling/sizing-to-content/react/main_tsx.md create mode 100644 static/usage/v9/modal/styling/sizing-to-content/vue.md diff --git a/docs/api/modal.mdx b/docs/api/modal.mdx index e68e368290..c42f823e77 100644 --- a/docs/api/modal.mdx +++ b/docs/api/modal.mdx @@ -127,7 +127,7 @@ import CardExample from '@site/static/usage/v9/modal/card/basic/index.mdx'; :::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. ::: @@ -175,34 +175,58 @@ import SheetScrollingContentExample from '@site/static/usage/v9/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 -::: +Modals expose [CSS Custom Properties](#css-custom-properties) and [CSS Shadow Parts](#css-shadow-parts) for customizing their appearance. -:::note +import ThemeExample from '@site/static/usage/v9/modal/styling/theming/index.mdx'; -`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/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 +## Animations The enter and leave animations can be customized by using our animation builder and assigning animations to `enterAnimation` and `leaveAnimation`. @@ -220,7 +244,7 @@ import CustomDialogs from '@site/static/usage/v9/modal/custom-dialogs/index.mdx' A few things to keep in mind when creating custom dialogs: -- `ion-content` is intended to be used in full-page modals, cards, and sheets. If your custom dialog has a dynamic or unknown size, `ion-content` should not be used. +- `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/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 0000000000..92b72024d7 --- /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 0000000000..3e5f8f3d89 --- /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 0000000000..45071ee743 --- /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 0000000000..33eab3e0af --- /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 0000000000..2421774fa2 --- /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 0000000000..abbaaaaa6c --- /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 0000000000..92b72024d7 --- /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 0000000000..834160ac40 --- /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 0000000000..33dedffb3a --- /dev/null +++ b/static/usage/v9/modal/styling/sizing-to-content/vue.md @@ -0,0 +1,59 @@ +```vue + + + + + +``` diff --git a/versioned_docs/version-v6/api/modal.mdx b/versioned_docs/version-v6/api/modal.mdx index e9f562d368..2f37874f04 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-v7/api/modal.mdx b/versioned_docs/version-v7/api/modal.mdx index c098fe75b2..1ec436cd96 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-v8/api/modal.mdx b/versioned_docs/version-v8/api/modal.mdx index 8f38444c64..f352f77999 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`. From dbb3f42599acb7810d387330597a37370a814dd0 Mon Sep 17 00:00:00 2001 From: Brandy Smith Date: Wed, 16 Sep 2026 15:27:51 -0400 Subject: [PATCH 09/10] fix(playground): strip extra lines before passing code blocks (#4695) Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> --- src/components/global/Playground/index.tsx | 43 ++++++++++++---------- 1 file changed, 24 insertions(+), 19 deletions(-) diff --git a/src/components/global/Playground/index.tsx b/src/components/global/Playground/index.tsx index b5c117ffc8..10b61dd4a9 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 }), {}); From 90892bce35330da866fcb1edc8694824ed5b3657 Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 16 Sep 2026 13:51:17 -0700 Subject: [PATCH 10/10] fix(links): drop the hardcoded baseUrl and repair stale anchors (#4736) --- docs/angular/add-to-existing.mdx | 16 ++-- docs/angular/lifecycle.mdx | 2 +- docs/angular/navigation.mdx | 2 +- docs/angular/overview.mdx | 6 +- docs/angular/quickstart.mdx | 18 ++-- docs/angular/your-first-app.mdx | 4 +- .../your-first-app/2-taking-photos.mdx | 2 +- .../your-first-app/3-saving-photos.mdx | 2 +- .../your-first-app/4-loading-photos.mdx | 2 +- docs/angular/zoneless.mdx | 4 +- docs/api.mdx | 2 +- docs/api/col.mdx | 2 +- docs/api/content.mdx | 4 +- docs/api/fab.mdx | 2 +- docs/api/infinite-scroll-content.mdx | 2 +- docs/api/input-password-toggle.mdx | 2 +- docs/api/input.mdx | 2 +- docs/api/item.mdx | 4 +- docs/api/refresher-content.mdx | 2 +- docs/api/row.mdx | 2 +- docs/api/select.mdx | 2 +- docs/api/text.mdx | 2 +- docs/api/title.mdx | 2 +- docs/cli.mdx | 10 +-- docs/cli/configuration.mdx | 2 +- docs/cli/livereload.mdx | 2 +- docs/core-concepts/fundamentals.mdx | 4 +- docs/developing/config.mdx | 80 +++++++++--------- docs/developing/config/per-platform/index.mdx | 8 +- docs/developing/scaffolding.mdx | 4 +- docs/intro/cdn.mdx | 2 +- docs/javascript/overview.mdx | 6 +- docs/javascript/quickstart.mdx | 18 ++-- docs/layout/dynamic-font-scaling.mdx | 4 +- docs/layout/global-stylesheets.mdx | 6 +- docs/react/add-to-existing.mdx | 14 ++-- docs/react/overview.mdx | 6 +- docs/react/quickstart.mdx | 18 ++-- docs/react/your-first-app.mdx | 4 +- docs/react/your-first-app/2-taking-photos.mdx | 2 +- docs/react/your-first-app/3-saving-photos.mdx | 2 +- .../react/your-first-app/4-loading-photos.mdx | 2 +- docs/reference/glossary.mdx | 2 +- docs/reference/support.mdx | 2 +- docs/theming/advanced.mdx | 4 +- docs/theming/dark-mode.mdx | 6 +- docs/troubleshooting/build.mdx | 2 +- docs/troubleshooting/cors.mdx | 2 +- docs/troubleshooting/native.mdx | 2 +- docs/troubleshooting/runtime.mdx | 2 +- docs/updating/6-0.mdx | 4 +- docs/updating/8-0.mdx | 12 +-- docs/updating/9-0.mdx | 4 +- docs/vue/add-to-existing.mdx | 14 ++-- docs/vue/overview.mdx | 6 +- docs/vue/quickstart.mdx | 18 ++-- docs/vue/troubleshooting.mdx | 4 +- docs/vue/utility-functions.mdx | 2 +- docs/vue/your-first-app.mdx | 4 +- docs/vue/your-first-app/2-taking-photos.mdx | 2 +- docs/vue/your-first-app/3-saving-photos.mdx | 2 +- docs/vue/your-first-app/4-loading-photos.mdx | 2 +- .../index.js | 19 ++++- sidebars.js | 2 +- .../page/reference/ReleaseNotes/index.tsx | 24 ++---- versioned_docs/version-v5/api.mdx | 2 +- versioned_docs/version-v5/cli.mdx | 10 +-- .../version-v5/core-concepts/fundamentals.mdx | 4 +- versioned_docs/version-v5/index.mdx | 2 +- .../version-v5/intro/environment.mdx | 2 +- .../version-v5/layout/global-stylesheets.mdx | 4 +- versioned_docs/version-v5/native.mdx | 2 +- versioned_docs/version-v5/react.mdx | 4 +- .../version-v5/reference/migration.mdx | 4 +- .../version-v5/reference/support.mdx | 2 +- .../version-v5/theming/advanced.mdx | 4 +- .../version-v5/troubleshooting/build.mdx | 2 +- .../version-v5/troubleshooting/cors.mdx | 2 +- versioned_docs/version-v5/vue/quickstart.mdx | 2 +- .../version-v6/angular/navigation.mdx | 2 +- .../version-v6/angular/overview.mdx | 6 +- versioned_docs/version-v6/api.mdx | 2 +- versioned_docs/version-v6/api/col.mdx | 2 +- versioned_docs/version-v6/api/content.mdx | 2 +- .../version-v6/api/datetime-button.mdx | 2 +- versioned_docs/version-v6/api/datetime.mdx | 2 +- .../api/infinite-scroll-content.mdx | 2 +- versioned_docs/version-v6/api/item.mdx | 2 +- versioned_docs/version-v6/api/loading.mdx | 2 +- .../version-v6/api/refresher-content.mdx | 2 +- versioned_docs/version-v6/api/row.mdx | 2 +- versioned_docs/version-v6/api/select.mdx | 4 +- versioned_docs/version-v6/api/text.mdx | 2 +- versioned_docs/version-v6/api/title.mdx | 2 +- versioned_docs/version-v6/cli.mdx | 10 +-- .../version-v6/core-concepts/fundamentals.mdx | 4 +- .../version-v6/developing/config.mdx | 2 +- .../developing/config/per-platform/index.mdx | 6 +- versioned_docs/version-v6/index.mdx | 4 +- .../version-v6/intro/upgrading-to-ionic-6.mdx | 4 +- .../version-v6/layout/global-stylesheets.mdx | 4 +- versioned_docs/version-v6/react/overview.mdx | 6 +- .../version-v6/react/quickstart.mdx | 18 ++-- .../version-v6/reference/migration.mdx | 6 +- .../version-v6/reference/support.mdx | 2 +- .../version-v6/theming/advanced.mdx | 4 +- .../version-v6/troubleshooting/build.mdx | 2 +- .../version-v6/troubleshooting/cors.mdx | 4 +- versioned_docs/version-v6/vue/overview.mdx | 6 +- versioned_docs/version-v6/vue/quickstart.mdx | 18 ++-- .../version-v6/vue/troubleshooting.mdx | 4 +- .../version-v6/vue/utility-functions.mdx | 2 +- .../version-v7/angular/navigation.mdx | 2 +- .../version-v7/angular/overview.mdx | 6 +- .../version-v7/angular/quickstart.mdx | 18 ++-- versioned_docs/version-v7/api.mdx | 2 +- versioned_docs/version-v7/api/col.mdx | 2 +- versioned_docs/version-v7/api/content.mdx | 4 +- versioned_docs/version-v7/api/datetime.mdx | 2 +- versioned_docs/version-v7/api/fab.mdx | 2 +- .../api/infinite-scroll-content.mdx | 2 +- versioned_docs/version-v7/api/input.mdx | 2 +- versioned_docs/version-v7/api/item.mdx | 4 +- .../version-v7/api/refresher-content.mdx | 2 +- versioned_docs/version-v7/api/row.mdx | 2 +- versioned_docs/version-v7/api/select.mdx | 4 +- versioned_docs/version-v7/api/text.mdx | 2 +- versioned_docs/version-v7/api/title.mdx | 2 +- versioned_docs/version-v7/cli.mdx | 10 +-- .../version-v7/core-concepts/fundamentals.mdx | 4 +- .../version-v7/developing/config.mdx | 2 +- .../developing/config/per-platform/index.mdx | 8 +- versioned_docs/version-v7/index.mdx | 4 +- .../version-v7/layout/global-stylesheets.mdx | 4 +- .../version-v7/react/add-to-existing.mdx | 14 ++-- versioned_docs/version-v7/react/overview.mdx | 6 +- .../version-v7/react/quickstart.mdx | 18 ++-- .../version-v7/reference/glossary.mdx | 2 +- .../version-v7/reference/support.mdx | 2 +- .../version-v7/theming/advanced.mdx | 4 +- .../version-v7/troubleshooting/build.mdx | 2 +- .../version-v7/troubleshooting/cors.mdx | 2 +- .../version-v7/troubleshooting/native.mdx | 2 +- .../version-v7/troubleshooting/runtime.mdx | 2 +- versioned_docs/version-v7/updating/6-0.mdx | 4 +- versioned_docs/version-v7/vue/overview.mdx | 6 +- versioned_docs/version-v7/vue/quickstart.mdx | 18 ++-- .../version-v7/vue/troubleshooting.mdx | 4 +- .../version-v7/vue/utility-functions.mdx | 2 +- .../version-v8/angular/add-to-existing.mdx | 14 ++-- .../version-v8/angular/navigation.mdx | 2 +- .../version-v8/angular/overview.mdx | 6 +- .../version-v8/angular/quickstart.mdx | 18 ++-- .../version-v8/angular/your-first-app.mdx | 4 +- .../your-first-app/2-taking-photos.mdx | 2 +- .../your-first-app/3-saving-photos.mdx | 2 +- .../your-first-app/4-loading-photos.mdx | 2 +- versioned_docs/version-v8/api.mdx | 2 +- versioned_docs/version-v8/api/col.mdx | 2 +- versioned_docs/version-v8/api/content.mdx | 4 +- versioned_docs/version-v8/api/fab.mdx | 2 +- .../api/infinite-scroll-content.mdx | 2 +- .../version-v8/api/input-password-toggle.mdx | 2 +- versioned_docs/version-v8/api/input.mdx | 2 +- versioned_docs/version-v8/api/item.mdx | 4 +- .../version-v8/api/refresher-content.mdx | 2 +- versioned_docs/version-v8/api/row.mdx | 2 +- versioned_docs/version-v8/api/text.mdx | 2 +- versioned_docs/version-v8/api/title.mdx | 2 +- versioned_docs/version-v8/cli.mdx | 10 +-- .../version-v8/cli/configuration.mdx | 2 +- versioned_docs/version-v8/cli/livereload.mdx | 2 +- .../version-v8/core-concepts/fundamentals.mdx | 4 +- .../version-v8/developing/config.mdx | 84 +++++++++---------- .../developing/config/per-platform/index.mdx | 8 +- .../version-v8/developing/scaffolding.mdx | 4 +- versioned_docs/version-v8/intro/cdn.mdx | 2 +- .../version-v8/javascript/overview.mdx | 6 +- .../version-v8/javascript/quickstart.mdx | 18 ++-- .../layout/dynamic-font-scaling.mdx | 4 +- .../version-v8/layout/global-stylesheets.mdx | 6 +- .../version-v8/react/add-to-existing.mdx | 14 ++-- versioned_docs/version-v8/react/overview.mdx | 6 +- .../version-v8/react/quickstart.mdx | 18 ++-- .../version-v8/react/your-first-app.mdx | 4 +- .../react/your-first-app/2-taking-photos.mdx | 2 +- .../react/your-first-app/3-saving-photos.mdx | 2 +- .../react/your-first-app/4-loading-photos.mdx | 2 +- .../version-v8/reference/glossary.mdx | 2 +- .../version-v8/reference/support.mdx | 2 +- .../version-v8/theming/advanced.mdx | 4 +- .../version-v8/theming/dark-mode.mdx | 6 +- .../version-v8/troubleshooting/build.mdx | 2 +- .../version-v8/troubleshooting/cors.mdx | 2 +- .../version-v8/troubleshooting/native.mdx | 2 +- .../version-v8/troubleshooting/runtime.mdx | 2 +- versioned_docs/version-v8/updating/6-0.mdx | 4 +- versioned_docs/version-v8/updating/8-0.mdx | 12 +-- .../version-v8/vue/add-to-existing.mdx | 14 ++-- versioned_docs/version-v8/vue/overview.mdx | 6 +- versioned_docs/version-v8/vue/quickstart.mdx | 18 ++-- .../version-v8/vue/troubleshooting.mdx | 4 +- .../version-v8/vue/utility-functions.mdx | 2 +- .../version-v8/vue/your-first-app.mdx | 4 +- .../vue/your-first-app/2-taking-photos.mdx | 2 +- .../vue/your-first-app/3-saving-photos.mdx | 2 +- .../vue/your-first-app/4-loading-photos.mdx | 2 +- versioned_sidebars/version-v6-sidebars.json | 2 +- versioned_sidebars/version-v7-sidebars.json | 2 +- versioned_sidebars/version-v8-sidebars.json | 2 +- 210 files changed, 585 insertions(+), 578 deletions(-) diff --git a/docs/angular/add-to-existing.mdx b/docs/angular/add-to-existing.mdx index bf2ab3d2ef..4b958cf5c3 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 324c78f0a6..c6a7a79aab 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 b26fec782e..06d08641a9 100644 --- a/docs/angular/navigation.mdx +++ b/docs/angular/navigation.mdx @@ -231,7 +231,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/overview.mdx b/docs/angular/overview.mdx index 7cf13ffcdb..923c4b5410 100644 --- a/docs/angular/overview.mdx +++ b/docs/angular/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular Version Support -Ionic Angular v9 supports Angular versions 18 through 22. For detailed information on supported versions and our support policy, refer to the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v9 supports Angular versions 18 through 22. 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/docs/angular/quickstart.mdx b/docs/angular/quickstart.mdx index 4ba89d6935..121ab4048a 100644 --- a/docs/angular/quickstart.mdx +++ b/docs/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/docs/angular/your-first-app.mdx b/docs/angular/your-first-app.mdx index 24a55a9da3..9da4af2492 100644 --- a/docs/angular/your-first-app.mdx +++ b/docs/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/docs/angular/your-first-app/2-taking-photos.mdx b/docs/angular/your-first-app/2-taking-photos.mdx index d99b1f934a..2da3b1d7f7 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: 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/docs/angular/your-first-app/3-saving-photos.mdx b/docs/angular/your-first-app/3-saving-photos.mdx index d8bed67ff4..9cd3743f41 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 8dba930324..3ff9608ebc 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: 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/docs/angular/zoneless.mdx b/docs/angular/zoneless.mdx index 0d96147481..90ad3c2bf9 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.mdx b/docs/api.mdx index 45e4c1d8d1..161ba1b8a3 100644 --- a/docs/api.mdx +++ b/docs/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/docs/api/col.mdx b/docs/api/col.mdx index 920d47f0a0..c3e78aa9ed 100644 --- a/docs/api/col.mdx +++ b/docs/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/docs/api/content.mdx b/docs/api/content.mdx index de088591af..7d0549c001 100644 --- a/docs/api/content.mdx +++ b/docs/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/v9/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/docs/api/fab.mdx b/docs/api/fab.mdx index de6f6ac059..c22200152e 100644 --- a/docs/api/fab.mdx +++ b/docs/api/fab.mdx @@ -47,7 +47,7 @@ import Positioning from '@site/static/usage/v9/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/docs/api/infinite-scroll-content.mdx b/docs/api/infinite-scroll-content.mdx index d7e7581209..a455a3aa50 100644 --- a/docs/api/infinite-scroll-content.mdx +++ b/docs/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/docs/api/input-password-toggle.mdx b/docs/api/input-password-toggle.mdx index b7f918cc63..095b96b876 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/input.mdx b/docs/api/input.mdx index e24b08c4a9..9755f8b317 100644 --- a/docs/api/input.mdx +++ b/docs/api/input.mdx @@ -109,7 +109,7 @@ import HelperError from '@site/static/usage/v9/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/v9/input/counter/index.mdx'; diff --git a/docs/api/item.mdx b/docs/api/item.mdx index 33657e1637..fbed7cb48e 100644 --- a/docs/api/item.mdx +++ b/docs/api/item.mdx @@ -30,7 +30,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/v9/item/basic/index.mdx'; @@ -253,7 +253,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/docs/api/refresher-content.mdx b/docs/api/refresher-content.mdx index 3e800e9cc8..6df0454eb1 100644 --- a/docs/api/refresher-content.mdx +++ b/docs/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/docs/api/row.mdx b/docs/api/row.mdx index 5f38aa554c..14e5faedb9 100644 --- a/docs/api/row.mdx +++ b/docs/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/docs/api/select.mdx b/docs/api/select.mdx index 5dc4f80d88..89f173bdec 100644 --- a/docs/api/select.mdx +++ b/docs/api/select.mdx @@ -211,7 +211,7 @@ import StartEndSlots from '@site/static/usage/v9/select/start-end-slots/index.md :::important -Rich content in select options is disabled by default. Set [`innerHTMLTemplatesEnabled`](/docs/developing/config.mdx#ionicconfig) to `true` in your [global Ionic config](/docs/developing/config.mdx#global-config). Markup inside options is treated as plain text when it is disabled. Refer to [Security](/docs/techniques/security.mdx) for sanitization guidance when enabling custom HTML. +Rich content in select options is disabled by default. Set [`innerHTMLTemplatesEnabled`](/developing/config.mdx#ionicconfig) to `true` in your [global Ionic config](/developing/config.mdx#global-config). Markup inside options is treated as plain text when it is disabled. Refer to [Security](/techniques/security.mdx) for sanitization guidance when enabling custom HTML. ::: diff --git a/docs/api/text.mdx b/docs/api/text.mdx index c9827689c1..f3132c2f8e 100644 --- a/docs/api/text.mdx +++ b/docs/api/text.mdx @@ -31,7 +31,7 @@ import Basic from '@site/static/usage/v9/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/docs/api/title.mdx b/docs/api/title.mdx index 3f9d36b425..b31c3f8a91 100644 --- a/docs/api/title.mdx +++ b/docs/api/title.mdx @@ -45,7 +45,7 @@ import CollapsibleLargeTitle from '@site/static/usage/v9/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/v9/title/collapsible-large-title/buttons/index.mdx'; diff --git a/docs/cli.mdx b/docs/cli.mdx index 879738c919..e6cf8f5d29 100644 --- a/docs/cli.mdx +++ b/docs/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/docs/cli/configuration.mdx b/docs/cli/configuration.mdx index 48c5608607..f1699b37c0 100644 --- a/docs/cli/configuration.mdx +++ b/docs/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/docs/cli/livereload.mdx b/docs/cli/livereload.mdx index e8baecdb27..3e011e637e 100644 --- a/docs/cli/livereload.mdx +++ b/docs/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/docs/core-concepts/fundamentals.mdx b/docs/core-concepts/fundamentals.mdx index 6630422a91..0d13c696ab 100644 --- a/docs/core-concepts/fundamentals.mdx +++ b/docs/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/docs/developing/config.mdx b/docs/developing/config.mdx index d19bddf32b..0bd00df19b 100644 --- a/docs/developing/config.mdx +++ b/docs/developing/config.mdx @@ -170,43 +170,43 @@ 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-select-option`, `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. | -| `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-select-option`, `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. | +| `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/docs/developing/config/per-platform/index.mdx b/docs/developing/config/per-platform/index.mdx index 4b49ceac71..310f8bc1d2 100644 --- a/docs/developing/config/per-platform/index.mdx +++ b/docs/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. ::: @@ -46,7 +46,7 @@ import { isPlatform, IonicModule } from '@ionic/angular/lazy'; 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. ::: @@ -68,7 +68,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. ::: @@ -85,7 +85,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/docs/developing/scaffolding.mdx b/docs/developing/scaffolding.mdx index b1ba4685af..7f69b5ccae 100644 --- a/docs/developing/scaffolding.mdx +++ b/docs/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/docs/intro/cdn.mdx b/docs/intro/cdn.mdx index 868fcd99ea..55aad3c90c 100644 --- a/docs/intro/cdn.mdx +++ b/docs/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/docs/javascript/overview.mdx b/docs/javascript/overview.mdx index 36d298730d..0023d09aaa 100644 --- a/docs/javascript/overview.mdx +++ b/docs/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/docs/javascript/quickstart.mdx b/docs/javascript/quickstart.mdx index 0f51f82b72..abe763bb9f 100644 --- a/docs/javascript/quickstart.mdx +++ b/docs/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/docs/vue/overview.mdx b/docs/vue/overview.mdx index d6f8d92416..06bbb5624a 100644 --- a/docs/vue/overview.mdx +++ b/docs/vue/overview.mdx @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Vue Version Support -Ionic Vue v9 supports Vue 3.5 and later. For detailed information on supported versions and our support policy, refer to the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue). +Ionic Vue v9 supports Vue 3.5 and later. 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/docs/vue/quickstart.mdx b/docs/vue/quickstart.mdx index bea913c090..662f393d58 100644 --- a/docs/vue/quickstart.mdx +++ b/docs/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/docs/vue/troubleshooting.mdx b/docs/vue/troubleshooting.mdx index a0f82ac90a..9e38bc58bb 100644 --- a/docs/vue/troubleshooting.mdx +++ b/docs/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/docs/vue/utility-functions.mdx b/docs/vue/utility-functions.mdx index e0c6b57337..60004dfd99 100644 --- a/docs/vue/utility-functions.mdx +++ b/docs/vue/utility-functions.mdx @@ -113,7 +113,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/docs/vue/your-first-app.mdx b/docs/vue/your-first-app.mdx index 981c5ed8a3..0cc59b68e5 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. @@ -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/docs/vue/your-first-app/2-taking-photos.mdx b/docs/vue/your-first-app/2-taking-photos.mdx index e383d9abbc..051055075c 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: 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/docs/vue/your-first-app/3-saving-photos.mdx b/docs/vue/your-first-app/3-saving-photos.mdx index 23ab479871..1d8e539c26 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 53e340e4ae..9884db3c6f 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: 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/plugins/docusaurus-plugin-ionic-component-api/index.js b/plugins/docusaurus-plugin-ionic-component-api/index.js index 93e40557be..da189cf7d6 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 @@ -22,7 +37,7 @@ module.exports = function (context, options) { 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) @@ -204,7 +219,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 66f05c6b82..96c7adb61c 100644 --- a/sidebars.js +++ b/sidebars.js @@ -38,7 +38,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/page/reference/ReleaseNotes/index.tsx b/src/components/page/reference/ReleaseNotes/index.tsx index eb3d3757c7..5f8cfcc03e 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/versioned_docs/version-v5/api.mdx b/versioned_docs/version-v5/api.mdx index 1225bdeda8..b0203d54b9 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 0594d11c7b..8f1eb1c943 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 caf6eefe54..d985f3e106 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 607bf8ce35..e7bda1fa23 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 9da996cfc6..0fc1bea4bc 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 7c327fbe4b..216e881f71 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 4a6e958660..229ac6130c 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 64907072b1..dd0b7f5c8e 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 165d7fc0b1..ad70e59ed9 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 3021ae77d2..27d2a72cbf 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 16c9460666..103d0237d1 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 baa75a99c0..0e93ce9fb2 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 8cb6a32131..073881d828 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 aa5efc9d5c..aae5e20f56 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 9ac7059bde..2fba1ed815 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 bde8adb522..247fac5f34 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 45e4c1d8d1..161ba1b8a3 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 7ddf8fc1c5..c595f97023 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 8112d0c0c8..7209180e87 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 667009f257..62903a275e 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 d7293c8946..37a2dc7adb 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 c6318535f5..7879619ef0 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 77074b4292..97f4a88cac 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 925f1a0742..7b5b211ac7 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/refresher-content.mdx b/versioned_docs/version-v6/api/refresher-content.mdx index 3031a3c62f..1a36aba1df 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 1f0c285d1d..3d3ef9f940 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 8b36bc4c9d..f0f9a1af1e 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 c73ca6d521..db2693dc88 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 468114988d..3984e7a1c2 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 fe10210fbc..b854ff5b65 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 dd38a67081..c292657569 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 0d4dacdf25..eabbb07063 100644 --- a/versioned_docs/version-v6/developing/config.mdx +++ b/versioned_docs/version-v6/developing/config.mdx @@ -129,7 +129,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-v6/developing/config/per-platform/index.mdx b/versioned_docs/version-v6/developing/config/per-platform/index.mdx index 3deba7540b..f16d18c00b 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 02471ee43c..a86d0a0c2a 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/intro/upgrading-to-ionic-6.mdx b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx index 011970e1d6..87b3260682 100644 --- a/versioned_docs/version-v6/intro/upgrading-to-ionic-6.mdx +++ b/versioned_docs/version-v6/intro/upgrading-to-ionic-6.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-v6/layout/global-stylesheets.mdx b/versioned_docs/version-v6/layout/global-stylesheets.mdx index 6235408e6b..ae1b81a723 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 2eabc37608..fee0eca0a5 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 0809bfb10f..d7c3555d94 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 f0d8b15645..aba8e8f2d9 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 9c7a24bb7c..48fef0e1bb 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 fa77538d10..f0c9dab341 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 f2304bccb8..c7eddca391 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 5b497f74a1..22d0717e3d 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 6bf1e7b111..b1172f6942 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 f6f87a69b5..545afdd466 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 b0f5d6486e..c57e31a951 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 d5461a255a..87575066e9 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 9b07fa2986..c365e9901a 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 edae3e6e2c..4a15f21316 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 3332c74ab3..1ea401941e 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 45e4c1d8d1..161ba1b8a3 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 53687ada2d..979812ac05 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 7303ceda04..fd01943bd3 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 c553c9f3cf..2642d2907d 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 437741dcd1..699a32068b 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 ccd6b839c4..403e8bd582 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 e873ccb37a..ecb23e66d1 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 463f056f4f..1cfee5cc1b 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/refresher-content.mdx b/versioned_docs/version-v7/api/refresher-content.mdx index 6fbb80c726..77b706c601 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 557ca356e8..dc3337d379 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 792031ba37..128c18a9d1 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 b15e5fff4a..ba18a0f731 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 d25641bc8d..17e4cc31de 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 c976b1a9f8..0abb1f1d44 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 dd38a67081..c292657569 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 232d8bfc41..fc8d038eb0 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 b088a7e6bf..3c7615067f 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 7359c57326..1fac0aea02 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 bad0140302..52c538380f 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 858c520f97..e7f6188ead 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 2eabc37608..fee0eca0a5 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 0809bfb10f..d7c3555d94 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 6df9ec4309..ea3512bcb8 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 d1776ff002..c5dc8107b8 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 51514954b0..9d5e8f565a 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 1f19102d13..7a0897fc9d 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 061236ad28..7961c7e0a7 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 e0680cf3c5..265ea7ecce 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 7b5d045015..f6972d50ae 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 b4176cdb84..d89dd4c91c 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 e752c1103d..6c94378e71 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 f6f87a69b5..545afdd466 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 dea452fca4..b81fa42360 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 6d17583067..08ae825642 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 d92c594017..affb5f900e 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 e8a53511f7..556bddd727 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 6605cdbfd3..73ca3b40bf 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 49f7cb269a..4e801cbc63 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 beaaa889c3..4b38c246a4 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 bf357f59e2..fdb7b7e3f3 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 72d809be23..f1364c137e 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 1cd887d84d..90a215e87f 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 45e4c1d8d1..161ba1b8a3 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 6988d34688..5709e350a9 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 fe6c1064a7..3c24e82d6d 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 e41a13bb25..c75fad7736 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 2aa0d4ee5e..3fd1cf7104 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 4a8ca029f8..d56f29278a 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 02823e780c..28d8a250b1 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 6cd87130d5..5f090c6197 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/refresher-content.mdx b/versioned_docs/version-v8/api/refresher-content.mdx index 2b96e85b1f..f346f9c24b 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 5cfc142879..919e8a31c2 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 5a201e39c3..06043c5829 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 663f938a62..2c14a7b629 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 879738c919..e6cf8f5d29 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 48c5608607..f1699b37c0 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 e8baecdb27..3e011e637e 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 6630422a91..0d13c696ab 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 70d2d89cfa..e783892692 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 a5f815dae5..feb1d4429b 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 b1ba4685af..7f69b5ccae 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 868fcd99ea..55aad3c90c 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 36d298730d..0023d09aaa 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 0f51f82b72..abe763bb9f 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 dc55a8fc89..56dce2486a 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 bea913c090..662f393d58 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 a0f82ac90a..9e38bc58bb 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 0f6d152fc4..1a5c65a923 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 981c5ed8a3..0cc59b68e5 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 b6cc75d03b..0ef6ab705b 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 bd7c36b4ee..50bd5b75df 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 1eb0571823..736c414d88 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 64b5961501..f85a6fb19c 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 e0627cbdb3..20ac21b7c9 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 721bec24a6..dfe0970e65 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",