diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 6452724858e..6f589964046 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,21 +2,24 @@ Thanks for your interest in contributing to Ionic's documentation! :tada: Check the guidelines below for suggestions and requirements before submitting your contribution. -- [Contributing Guide](#contributing-guide) - - [Development Workflow](#development-workflow) - - [Previewing Changes](#previewing-changes) - - [Linting Documentation](#linting-documentation) - - [Spell Check](#spell-check) - - [Using VS Code on Windows](#using-vs-code-on-windows) - - [Project Structure](#project-structure) - - [Directories](#directories) - - [Authoring Content](#authoring-content) - - [Authoring Locally](#authoring-locally) - - [Translation](#translation) - - [Reporting Issues](#reporting-issues) - - [Pull Request Guidelines](#pull-request-guidelines) - - [Deploying](#deploying) - - [License](#license) + + TABLE OF CONTENTS + + +- [Development Workflow](#development-workflow) + - [Previewing Changes](#previewing-changes) + - [Linting Documentation](#linting-documentation) + - [Spell Check](#spell-check) +- [Using VS Code on Windows](#using-vs-code-on-windows) +- [Project Structure](#project-structure) + - [Directories](#directories) +- [Authoring Content](#authoring-content) + - [Reference Content](#reference-content) +- [Translation](#translation) +- [Reporting Issues](#reporting-issues) +- [Pull Request Guidelines](#pull-request-guidelines) +- [Deploying](#deploying) +- [License](#license) --- diff --git a/docs/components.md b/docs/components.md index d951640a809..66f5a4d0b13 100644 --- a/docs/components.md +++ b/docs/components.md @@ -24,9 +24,13 @@ Ionic apps are made of high-level building blocks called Components, which allow - -

Action Sheets display a set of options with the ability to confirm or cancel an action.

- + +

Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information.

+ + + +

Action Sheets display a set of options with the ability to confirm or cancel an action.

+

Alerts are a great way to offer the user the ability to choose a specific action or list of actions.

@@ -36,6 +40,10 @@ Ionic apps are made of high-level building blocks called Components, which allow

Badges are a small component that typically communicate a numerical value to the user.

 + +

Breadcrumbs are navigation items that are used to indicate where a user is on an app.

+ +

Buttons let your users take action. They're an essential way to interact with and navigate through an app.

 @@ -57,7 +65,7 @@ Ionic apps are made of high-level building blocks called Components, which allow

Content is the quintessential way to interact with and navigate through an app.

- +

Date & time pickers are used to present an interface that makes it easy for users to select dates and times.

 @@ -65,14 +73,14 @@ Ionic apps are made of high-level building blocks called Components, which allow

Floating action buttons are circular buttons that perform a primary action on a screen.

 - -

Beautifully designed icons for use in web, iOS, and Android apps.

- -

The grid is a powerful mobile-first system for building custom layouts.

 + +

Beautifully designed icons for use in web, iOS, and Android apps.

+ +

Infinite scroll allows you to load new data as the user scrolls through your app.

 @@ -81,16 +89,22 @@ Ionic apps are made of high-level building blocks called Components, which allow

Inputs provides a way for users to enter data in your app.

- -

Items are an all-purpose UI container that can be used as part of a list.

+ +

+ Items are elements that can contain text, icons, avatars, images, inputs, and any other native or custom elements. + Items can be swiped, deleted, reordered, edited, and more. +

Lists can display rows of information, such as a contact list, playlist, or menu.

 - -

Navigation is how users move between different pages in your app.

+ +

+ A collection of media components, including avatars, icons, images, and thumbnails, designed to enhance visual + content. +

@@ -101,6 +115,14 @@ Ionic apps are made of high-level building blocks called Components, which allow

Modals slide in and off screen to display a temporary UI and are often used for login or sign-up pages.

 + +

Navigation is how users move between different pages in your app.

+ + + +

OTP inputs offer a simple way to enter one-time passwords using multiple boxes with automatic focus.

+ +

Popover provides an easy way to present information or options without changing contexts.

 @@ -113,14 +135,10 @@ Ionic apps are made of high-level building blocks called Components, which allow

Radio inputs allow you to present a set of exclusive options.

 - +

Refresher provides pull-to-refresh functionality on a content component.

 - -

Searchbar is used to search or filter items, usually from a toolbar.

- -

Reorder lets users drag and drop to reorder a list of items.

 @@ -129,6 +147,10 @@ Ionic apps are made of high-level building blocks called Components, which allow

Routing allows navigation based on the current path.

 + +

Searchbar is used to search or filter items, usually from a toolbar.

+ +

Segments provide a set of exclusive buttons that can be used as a filter or view switcher.

 @@ -149,7 +171,11 @@ Ionic apps are made of high-level building blocks called Components, which allow

Toggles are an input for binary options, often used for options and switches.

 - -

Toolbars are used to house information and actions relating to your app.

- + +

Toolbars are used to house information and actions relating to your app.

+ + + +

Text is used to style or change the color of text within an application.

+ diff --git a/docs/developing/config.md b/docs/developing/config.md index 0f70b8da46d..6cce3de4a1d 100644 --- a/docs/developing/config.md +++ b/docs/developing/config.md @@ -51,6 +51,14 @@ import PerPlatformOverridesExample from '@site/docs/developing/config/per-platfo +## Accessing the Mode + +In some cases, you may need to access the current Ionic mode programmatically within your application logic. This can be useful for applying conditional behavior, fetching specific assets, or performing other actions based on the active styling mode. + +import IonicMode from '@site/static/usage/v8/config/mode/index.md'; + + + ## Reading the Config (Angular) Ionic Angular provides a `Config` provider for accessing the Ionic Config. diff --git a/docs/theming/high-contrast-mode.md b/docs/theming/high-contrast-mode.md index 9896eac1180..148f7c72157 100644 --- a/docs/theming/high-contrast-mode.md +++ b/docs/theming/high-contrast-mode.md @@ -120,7 +120,7 @@ This approach activates the high contrast palette when the [CSS media query for The following example uses the system settings to decide when to show high contrast mode. :::info -Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](hhttps://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac). +Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac). ::: import SystemHighContrastMode from '@site/static/usage/v8/theming/system-high-contrast-mode/index.md'; @@ -178,7 +178,7 @@ This approach activates the high contrast palette when the `.ion-palette-high-co The following example combines site settings, system settings, and the toggle to decide when to show high contrast mode. The site's palette takes precedence over system settings. If your system settings differ from the site's palette when the demo loads, it will use the site's palette. :::info -Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](hhttps://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac). +Not sure how to change the system settings? Here's how to enable high contrast mode on [Windows 11](https://support.microsoft.com/en-us/windows/turn-high-contrast-mode-on-or-off-in-windows-909e9d89-a0f9-a3a9-b993-7a6dcee85025) and on [macOS](https://support.apple.com/guide/mac-help/change-display-settings-for-accessibility-unac089/mac). ::: import ClassHighContrastMode from '@site/static/usage/v8/theming/class-high-contrast-mode/index.md'; diff --git a/renovate.json b/renovate.json index 8847d1082e2..2e83911a07d 100644 --- a/renovate.json +++ b/renovate.json @@ -22,6 +22,13 @@ "matchPackageNames": ["react", "react-dom"], "groupName": "react" }, + { + "matchPackageNames": ["vite", "vite-plugin-static-copy"], + "groupName": "vite-html", + "matchFileNames": [ + "static/code/stackblitz/**/html/package.json" + ] + }, { "matchPackageNames": ["vite", "@vitejs/plugin-react"], "groupName": "vite-react", diff --git a/src/components/global/Playground/stackblitz.utils.ts b/src/components/global/Playground/stackblitz.utils.ts index aed074d6328..2adb362df0d 100644 --- a/src/components/global/Playground/stackblitz.utils.ts +++ b/src/components/global/Playground/stackblitz.utils.ts @@ -54,20 +54,32 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => { options?.includeIonContent ? 'html/index.withContent.html' : 'html/index.html', 'html/variables.css', 'html/package.json', + 'html/tsconfig.json', + 'html/vite.config.ts', ], options.version ); + const package_json = JSON.parse(defaultFiles[3]); + + if (options?.dependencies) { + package_json.dependencies = { + ...package_json.dependencies, + ...options.dependencies, + }; + } + const indexHtml = 'index.html'; const files = { + 'package.json': JSON.stringify(package_json, null, 2), 'index.ts': defaultFiles[0], [indexHtml]: defaultFiles[1], 'theme/variables.css': defaultFiles[2], + 'tsconfig.json': defaultFiles[4], + 'vite.config.ts': defaultFiles[5], ...options?.files, }; - const package_json = defaultFiles[3]; - files[indexHtml] = defaultFiles[1].replace(/{{ TEMPLATE }}/g, code).replace( '', ` @@ -82,23 +94,11 @@ const openHtmlEditor = async (code: string, options?: EditorOptions) => { ` ); - let dependencies = {}; - try { - dependencies = { - ...dependencies, - ...JSON.parse(package_json).dependencies, - ...options?.dependencies, - }; - } catch (e) { - console.error('Failed to parse package.json contents', e); - } - sdk.openProject({ - template: 'typescript', + template: 'node', title: options?.title ?? DEFAULT_EDITOR_TITLE, description: options?.description ?? DEFAULT_EDITOR_DESCRIPTION, files, - dependencies, }); }; diff --git a/static/code/stackblitz/v7/angular/package.json b/static/code/stackblitz/v7/angular/package.json index 34470f65907..4d2e6bc8be1 100644 --- a/static/code/stackblitz/v7/angular/package.json +++ b/static/code/stackblitz/v7/angular/package.json @@ -17,7 +17,7 @@ "@angular/router": "^20.0.0", "@ionic/angular": "^7.0.0", "@ionic/core": "^7.0.0", - "ionicons": "8.0.9", + "ionicons": "8.0.10", "rxjs": "^7.8.1", "tslib": "^2.5.0", "zone.js": "~0.15.0" diff --git a/static/code/stackblitz/v7/html/index.html b/static/code/stackblitz/v7/html/index.html index 5e77463a672..fb14e96ba98 100644 --- a/static/code/stackblitz/v7/html/index.html +++ b/static/code/stackblitz/v7/html/index.html @@ -1,14 +1,19 @@ - + + - - + + + + Ionic App {{ TEMPLATE }} + + diff --git a/static/code/stackblitz/v7/html/index.withContent.html b/static/code/stackblitz/v7/html/index.withContent.html index 242233075dc..404344868cd 100644 --- a/static/code/stackblitz/v7/html/index.withContent.html +++ b/static/code/stackblitz/v7/html/index.withContent.html @@ -1,8 +1,11 @@ - + + - - + + + + Ionic App @@ -11,6 +14,8 @@ {{ TEMPLATE }} + + diff --git a/static/code/stackblitz/v7/html/package.json b/static/code/stackblitz/v7/html/package.json index 7b9f1727b1c..5e36316ec48 100644 --- a/static/code/stackblitz/v7/html/package.json +++ b/static/code/stackblitz/v7/html/package.json @@ -1,6 +1,20 @@ { + "name": "html-starter", + "private": true, + "type": "module", + "main": "index.ts", + "scripts": { + "dev": "vite", + "build": "vite build", + "start": "vite preview" + }, "dependencies": { "@ionic/core": "^7.0.0", - "ionicons": "8.0.9" + "ionicons": "8.0.10" + }, + "devDependencies": { + "typescript": "^5.0.0", + "vite": "^7.0.0", + "vite-plugin-static-copy": "^3.1.0" } } diff --git a/static/code/stackblitz/v7/html/tsconfig.json b/static/code/stackblitz/v7/html/tsconfig.json new file mode 100644 index 00000000000..0b999e71b8e --- /dev/null +++ b/static/code/stackblitz/v7/html/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "target": "esnext", + "module": "nodenext", + "moduleResolution": "nodenext", + "outDir": "dist", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "lib": ["esnext", "dom"], + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "isolatedModules": true, + "types": ["node"] + }, + "include": ["src/**/*.ts"] +} diff --git a/static/code/stackblitz/v7/html/vite.config.ts b/static/code/stackblitz/v7/html/vite.config.ts new file mode 100644 index 00000000000..3e356ac9e72 --- /dev/null +++ b/static/code/stackblitz/v7/html/vite.config.ts @@ -0,0 +1,18 @@ +import { defineConfig } from 'vite'; +import { viteStaticCopy } from 'vite-plugin-static-copy'; + +export default defineConfig({ + optimizeDeps: { + exclude: ['@ionic/core'], + }, + plugins: [ + viteStaticCopy({ + targets: [ + { + src: 'node_modules/ionicons/dist/svg/*', + dest: 'svg' + } + ] + }) + ] +}); diff --git a/static/code/stackblitz/v7/react/package-lock.json b/static/code/stackblitz/v7/react/package-lock.json index 39a3442c710..9bb41383d50 100644 --- a/static/code/stackblitz/v7/react/package-lock.json +++ b/static/code/stackblitz/v7/react/package-lock.json @@ -1047,9 +1047,9 @@ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==" }, "node_modules/@types/node": { - "version": "22.15.33", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.33.tgz", - "integrity": "sha512-wzoocdnnpSxZ+6CjW4ADCK1jVmd1S/J3ArNWfn8FDDQtRm8dkDg7TA+mvek2wNrfCgwuZxqEOiB9B1XCJ6+dbw==", + "version": "22.16.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.16.0.tgz", + "integrity": "sha512-B2egV9wALML1JCpv3VQoQ+yesQKAmNMBIAY7OteVrikcOcAkWm+dGL6qpeCktPjAv6N1JLnhbNiqS35UpFyBsQ==", "dependencies": { "undici-types": "~6.21.0" } @@ -1691,9 +1691,9 @@ "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" }, "node_modules/vite": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz", - "integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz", + "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", @@ -2349,9 +2349,9 @@ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==" }, "@types/node": { - "version": "22.15.33", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.33.tgz", - "integrity": "sha512-wzoocdnnpSxZ+6CjW4ADCK1jVmd1S/J3ArNWfn8FDDQtRm8dkDg7TA+mvek2wNrfCgwuZxqEOiB9B1XCJ6+dbw==", + "version": "22.16.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.16.0.tgz", + "integrity": "sha512-B2egV9wALML1JCpv3VQoQ+yesQKAmNMBIAY7OteVrikcOcAkWm+dGL6qpeCktPjAv6N1JLnhbNiqS35UpFyBsQ==", "requires": { "undici-types": "~6.21.0" } @@ -2800,9 +2800,9 @@ "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" }, "vite": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz", - "integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz", + "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", "requires": { "esbuild": "^0.25.0", "fdir": "^6.4.6", diff --git a/static/code/stackblitz/v7/vue/package-lock.json b/static/code/stackblitz/v7/vue/package-lock.json index bec257c24a8..12e45b5ba18 100644 --- a/static/code/stackblitz/v7/vue/package-lock.json +++ b/static/code/stackblitz/v7/vue/package-lock.json @@ -1278,9 +1278,9 @@ } }, "node_modules/vite": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz", - "integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz", + "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", "dev": true, "dependencies": { "esbuild": "^0.25.0", @@ -2194,9 +2194,9 @@ "devOptional": true }, "vite": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz", - "integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz", + "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", "dev": true, "requires": { "esbuild": "^0.25.0", diff --git a/static/code/stackblitz/v8/angular/package.json b/static/code/stackblitz/v8/angular/package.json index f13be41d5e3..8f8566fb2e6 100644 --- a/static/code/stackblitz/v8/angular/package.json +++ b/static/code/stackblitz/v8/angular/package.json @@ -15,9 +15,9 @@ "@angular/platform-browser": "^20.0.0", "@angular/platform-browser-dynamic": "^20.0.0", "@angular/router": "^20.0.0", - "@ionic/angular": "8.6.2", - "@ionic/core": "8.6.2", - "ionicons": "8.0.9", + "@ionic/angular": "8.6.3", + "@ionic/core": "8.6.3", + "ionicons": "8.0.10", "rxjs": "^7.8.1", "tslib": "^2.5.0", "zone.js": "~0.15.0" diff --git a/static/code/stackblitz/v8/html/index.html b/static/code/stackblitz/v8/html/index.html index 34f05146a9a..fb14e96ba98 100644 --- a/static/code/stackblitz/v8/html/index.html +++ b/static/code/stackblitz/v8/html/index.html @@ -1,14 +1,19 @@ - + + - - + + + + Ionic App {{ TEMPLATE }} + + diff --git a/static/code/stackblitz/v8/html/index.withContent.html b/static/code/stackblitz/v8/html/index.withContent.html index af371907653..404344868cd 100644 --- a/static/code/stackblitz/v8/html/index.withContent.html +++ b/static/code/stackblitz/v8/html/index.withContent.html @@ -1,8 +1,11 @@ - + + - - + + + + Ionic App @@ -11,6 +14,8 @@ {{ TEMPLATE }} + + diff --git a/static/code/stackblitz/v8/html/package.json b/static/code/stackblitz/v8/html/package.json index f32b562a61f..9d0858b633a 100644 --- a/static/code/stackblitz/v8/html/package.json +++ b/static/code/stackblitz/v8/html/package.json @@ -1,6 +1,20 @@ { + "name": "html-starter", + "private": true, + "type": "module", + "main": "index.ts", + "scripts": { + "dev": "vite", + "build": "vite build", + "start": "vite preview" + }, "dependencies": { - "@ionic/core": "8.6.2", - "ionicons": "8.0.9" + "@ionic/core": "8.6.3", + "ionicons": "8.0.10" + }, + "devDependencies": { + "typescript": "^5.0.0", + "vite": "^7.0.0", + "vite-plugin-static-copy": "^3.1.0" } } diff --git a/static/code/stackblitz/v8/html/tsconfig.json b/static/code/stackblitz/v8/html/tsconfig.json new file mode 100644 index 00000000000..0b999e71b8e --- /dev/null +++ b/static/code/stackblitz/v8/html/tsconfig.json @@ -0,0 +1,19 @@ +{ + "compilerOptions": { + "baseUrl": "./", + "target": "esnext", + "module": "nodenext", + "moduleResolution": "nodenext", + "outDir": "dist", + "strict": true, + "esModuleInterop": true, + "skipLibCheck": true, + "forceConsistentCasingInFileNames": true, + "lib": ["esnext", "dom"], + "resolveJsonModule": true, + "allowSyntheticDefaultImports": true, + "isolatedModules": true, + "types": ["node"] + }, + "include": ["src/**/*.ts"] +} diff --git a/static/code/stackblitz/v8/html/vite.config.ts b/static/code/stackblitz/v8/html/vite.config.ts new file mode 100644 index 00000000000..3e356ac9e72 --- /dev/null +++ b/static/code/stackblitz/v8/html/vite.config.ts @@ -0,0 +1,18 @@ +import { defineConfig } from 'vite'; +import { viteStaticCopy } from 'vite-plugin-static-copy'; + +export default defineConfig({ + optimizeDeps: { + exclude: ['@ionic/core'], + }, + plugins: [ + viteStaticCopy({ + targets: [ + { + src: 'node_modules/ionicons/dist/svg/*', + dest: 'svg' + } + ] + }) + ] +}); diff --git a/static/code/stackblitz/v8/react/package-lock.json b/static/code/stackblitz/v8/react/package-lock.json index 2c477241a81..f2055d41f5f 100644 --- a/static/code/stackblitz/v8/react/package-lock.json +++ b/static/code/stackblitz/v8/react/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-react-typescript", "version": "0.1.0", "dependencies": { - "@ionic/react": "8.6.2", - "@ionic/react-router": "8.6.2", + "@ionic/react": "8.6.3", + "@ionic/react-router": "8.6.3", "@types/node": "^22.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", @@ -661,9 +661,9 @@ } }, "node_modules/@ionic/core": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.6.2.tgz", - "integrity": "sha512-CGZ9CDp/XHtm9WrK3wt0ZtR2f2B76qEvJIaF/juCqmpza9Al6u2L9R/NTEwInDRCWfbkAIF22nHNH54/VvN78Q==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.6.3.tgz", + "integrity": "sha512-N/mkw+sPecLEoO1lrnKDS0uZgl6PWSyFprCkkqoK1nHlfBkgFiHm5M9rvWlnGaFC/5xrhNGHdUtYHDFM+F8gRw==", "dependencies": { "@stencil/core": "4.33.1", "ionicons": "^7.2.2", @@ -671,11 +671,11 @@ } }, "node_modules/@ionic/react": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.6.2.tgz", - "integrity": "sha512-SXE1RnzGqj0MGKGs6D4UCk4rOghbLYI5qwANdZJuBxlIcrcBJuAySjneuTGt+Y3UHS8W3YZHFujRv2Gvb+zvqQ==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.6.3.tgz", + "integrity": "sha512-wBFn6cOKuRKJfUNBz1SyexLkqs+QdaSImEJJ5wepaIF5A94rKlG0JQGCCZjT0KaLbJ+UaQuCgRRQWUrT0XJKDQ==", "dependencies": { - "@ionic/core": "8.6.2", + "@ionic/core": "8.6.3", "ionicons": "^7.0.0", "tslib": "*" }, @@ -685,11 +685,11 @@ } }, "node_modules/@ionic/react-router": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.6.2.tgz", - "integrity": "sha512-wNVYZHEHkRkNimiK24bJ8KsWjuQyug7C+J/rNER7BKtZDzU3kWKVjvzD3P7kaiOf/DtVo+OrZNvYQJOuoIEhWg==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.6.3.tgz", + "integrity": "sha512-hjBTtvltDccgBkZbZRgvnHAB+IxtjXBIJVuRRWAgyTovlJJAdm7oP8RxabblsZqYgdAup9LTI/L5X/uLDlzGIg==", "dependencies": { - "@ionic/react": "8.6.2", + "@ionic/react": "8.6.3", "tslib": "*" }, "peerDependencies": { @@ -1153,9 +1153,9 @@ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==" }, "node_modules/@types/node": { - "version": "22.15.33", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.33.tgz", - "integrity": "sha512-wzoocdnnpSxZ+6CjW4ADCK1jVmd1S/J3ArNWfn8FDDQtRm8dkDg7TA+mvek2wNrfCgwuZxqEOiB9B1XCJ6+dbw==", + "version": "22.16.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.16.0.tgz", + "integrity": "sha512-B2egV9wALML1JCpv3VQoQ+yesQKAmNMBIAY7OteVrikcOcAkWm+dGL6qpeCktPjAv6N1JLnhbNiqS35UpFyBsQ==", "dependencies": { "undici-types": "~6.21.0" } @@ -1797,9 +1797,9 @@ "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" }, "node_modules/vite": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz", - "integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz", + "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.6", @@ -2215,9 +2215,9 @@ "optional": true }, "@ionic/core": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.6.2.tgz", - "integrity": "sha512-CGZ9CDp/XHtm9WrK3wt0ZtR2f2B76qEvJIaF/juCqmpza9Al6u2L9R/NTEwInDRCWfbkAIF22nHNH54/VvN78Q==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.6.3.tgz", + "integrity": "sha512-N/mkw+sPecLEoO1lrnKDS0uZgl6PWSyFprCkkqoK1nHlfBkgFiHm5M9rvWlnGaFC/5xrhNGHdUtYHDFM+F8gRw==", "requires": { "@stencil/core": "4.33.1", "ionicons": "^7.2.2", @@ -2225,21 +2225,21 @@ } }, "@ionic/react": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.6.2.tgz", - "integrity": "sha512-SXE1RnzGqj0MGKGs6D4UCk4rOghbLYI5qwANdZJuBxlIcrcBJuAySjneuTGt+Y3UHS8W3YZHFujRv2Gvb+zvqQ==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-8.6.3.tgz", + "integrity": "sha512-wBFn6cOKuRKJfUNBz1SyexLkqs+QdaSImEJJ5wepaIF5A94rKlG0JQGCCZjT0KaLbJ+UaQuCgRRQWUrT0XJKDQ==", "requires": { - "@ionic/core": "8.6.2", + "@ionic/core": "8.6.3", "ionicons": "^7.0.0", "tslib": "*" } }, "@ionic/react-router": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.6.2.tgz", - "integrity": "sha512-wNVYZHEHkRkNimiK24bJ8KsWjuQyug7C+J/rNER7BKtZDzU3kWKVjvzD3P7kaiOf/DtVo+OrZNvYQJOuoIEhWg==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-8.6.3.tgz", + "integrity": "sha512-hjBTtvltDccgBkZbZRgvnHAB+IxtjXBIJVuRRWAgyTovlJJAdm7oP8RxabblsZqYgdAup9LTI/L5X/uLDlzGIg==", "requires": { - "@ionic/react": "8.6.2", + "@ionic/react": "8.6.3", "tslib": "*" } }, @@ -2515,9 +2515,9 @@ "integrity": "sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==" }, "@types/node": { - "version": "22.15.33", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.33.tgz", - "integrity": "sha512-wzoocdnnpSxZ+6CjW4ADCK1jVmd1S/J3ArNWfn8FDDQtRm8dkDg7TA+mvek2wNrfCgwuZxqEOiB9B1XCJ6+dbw==", + "version": "22.16.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.16.0.tgz", + "integrity": "sha512-B2egV9wALML1JCpv3VQoQ+yesQKAmNMBIAY7OteVrikcOcAkWm+dGL6qpeCktPjAv6N1JLnhbNiqS35UpFyBsQ==", "requires": { "undici-types": "~6.21.0" } @@ -2966,9 +2966,9 @@ "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==" }, "vite": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz", - "integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz", + "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", "requires": { "esbuild": "^0.25.0", "fdir": "^6.4.6", diff --git a/static/code/stackblitz/v8/react/package.json b/static/code/stackblitz/v8/react/package.json index 8491f5fd6e5..352ee595212 100644 --- a/static/code/stackblitz/v8/react/package.json +++ b/static/code/stackblitz/v8/react/package.json @@ -3,8 +3,8 @@ "version": "0.1.0", "private": true, "dependencies": { - "@ionic/react": "8.6.2", - "@ionic/react-router": "8.6.2", + "@ionic/react": "8.6.3", + "@ionic/react-router": "8.6.3", "@types/node": "^22.0.0", "@types/react": "^19.0.0", "@types/react-dom": "^19.0.0", diff --git a/static/code/stackblitz/v8/vue/package-lock.json b/static/code/stackblitz/v8/vue/package-lock.json index b8a14f759b9..c43dcb7d660 100644 --- a/static/code/stackblitz/v8/vue/package-lock.json +++ b/static/code/stackblitz/v8/vue/package-lock.json @@ -8,8 +8,8 @@ "name": "vite-vue-starter", "version": "0.0.0", "dependencies": { - "@ionic/vue": "8.6.2", - "@ionic/vue-router": "8.6.2", + "@ionic/vue": "8.6.3", + "@ionic/vue-router": "8.6.3", "vue": "^3.2.25", "vue-router": "4.5.1" }, @@ -463,9 +463,9 @@ } }, "node_modules/@ionic/core": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.6.2.tgz", - "integrity": "sha512-CGZ9CDp/XHtm9WrK3wt0ZtR2f2B76qEvJIaF/juCqmpza9Al6u2L9R/NTEwInDRCWfbkAIF22nHNH54/VvN78Q==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.6.3.tgz", + "integrity": "sha512-N/mkw+sPecLEoO1lrnKDS0uZgl6PWSyFprCkkqoK1nHlfBkgFiHm5M9rvWlnGaFC/5xrhNGHdUtYHDFM+F8gRw==", "dependencies": { "@stencil/core": "4.33.1", "ionicons": "^7.2.2", @@ -473,21 +473,21 @@ } }, "node_modules/@ionic/vue": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.6.2.tgz", - "integrity": "sha512-bqhKOxKwxp/aK9DR8NkXeaaPyth0TjgIGpzy28JKd/Q3fJ5eICkEn+gctRlC1L/4nBr6DponSEHfncSeEBQfoQ==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.6.3.tgz", + "integrity": "sha512-vQb0lMs3TKbcEZQz1SF7E4TzZf0wRf3elJaIFd0PRa4+Shcn5zpliid8uCJTlPY5k943axIrPNxKaQPJFQXdrw==", "dependencies": { - "@ionic/core": "8.6.2", + "@ionic/core": "8.6.3", "@stencil/vue-output-target": "0.10.7", "ionicons": "^7.0.0" } }, "node_modules/@ionic/vue-router": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.6.2.tgz", - "integrity": "sha512-Qx+xhNgqLqACH665vMKP4ZjIagqepKCXJ9cyCpwKaS76SeXxTK4OLSSGv6oOT7UIjGAe8xZH8DQ6LRLFpvvEtw==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.6.3.tgz", + "integrity": "sha512-WRGPfwCiBjX84Hi55pitRknmnXtOA4VnejU8SSz3tP4tnvFwfLnT7YZcpV9HSMEthb7epHoW9/R2GyZQA3puTA==", "dependencies": { - "@ionic/vue": "8.6.2" + "@ionic/vue": "8.6.3" } }, "node_modules/@jridgewell/sourcemap-codec": { @@ -1406,9 +1406,9 @@ } }, "node_modules/vite": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz", - "integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz", + "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", "dev": true, "dependencies": { "esbuild": "^0.25.0", @@ -1757,9 +1757,9 @@ "optional": true }, "@ionic/core": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.6.2.tgz", - "integrity": "sha512-CGZ9CDp/XHtm9WrK3wt0ZtR2f2B76qEvJIaF/juCqmpza9Al6u2L9R/NTEwInDRCWfbkAIF22nHNH54/VvN78Q==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-8.6.3.tgz", + "integrity": "sha512-N/mkw+sPecLEoO1lrnKDS0uZgl6PWSyFprCkkqoK1nHlfBkgFiHm5M9rvWlnGaFC/5xrhNGHdUtYHDFM+F8gRw==", "requires": { "@stencil/core": "4.33.1", "ionicons": "^7.2.2", @@ -1767,21 +1767,21 @@ } }, "@ionic/vue": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.6.2.tgz", - "integrity": "sha512-bqhKOxKwxp/aK9DR8NkXeaaPyth0TjgIGpzy28JKd/Q3fJ5eICkEn+gctRlC1L/4nBr6DponSEHfncSeEBQfoQ==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-8.6.3.tgz", + "integrity": "sha512-vQb0lMs3TKbcEZQz1SF7E4TzZf0wRf3elJaIFd0PRa4+Shcn5zpliid8uCJTlPY5k943axIrPNxKaQPJFQXdrw==", "requires": { - "@ionic/core": "8.6.2", + "@ionic/core": "8.6.3", "@stencil/vue-output-target": "0.10.7", "ionicons": "^7.0.0" } }, "@ionic/vue-router": { - "version": "8.6.2", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.6.2.tgz", - "integrity": "sha512-Qx+xhNgqLqACH665vMKP4ZjIagqepKCXJ9cyCpwKaS76SeXxTK4OLSSGv6oOT7UIjGAe8xZH8DQ6LRLFpvvEtw==", + "version": "8.6.3", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-8.6.3.tgz", + "integrity": "sha512-WRGPfwCiBjX84Hi55pitRknmnXtOA4VnejU8SSz3tP4tnvFwfLnT7YZcpV9HSMEthb7epHoW9/R2GyZQA3puTA==", "requires": { - "@ionic/vue": "8.6.2" + "@ionic/vue": "8.6.3" } }, "@jridgewell/sourcemap-codec": { @@ -2389,9 +2389,9 @@ "devOptional": true }, "vite": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz", - "integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==", + "version": "7.0.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz", + "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", "dev": true, "requires": { "esbuild": "^0.25.0", diff --git a/static/code/stackblitz/v8/vue/package.json b/static/code/stackblitz/v8/vue/package.json index e62f0405cae..bbae5db5630 100644 --- a/static/code/stackblitz/v8/vue/package.json +++ b/static/code/stackblitz/v8/vue/package.json @@ -8,8 +8,8 @@ "preview": "vite preview" }, "dependencies": { - "@ionic/vue": "8.6.2", - "@ionic/vue-router": "8.6.2", + "@ionic/vue": "8.6.3", + "@ionic/vue-router": "8.6.3", "vue": "^3.2.25", "vue-router": "4.5.1" }, diff --git a/static/icons/component-action-sheet-icon.png b/static/icons/component-action-sheet-icon.png new file mode 100644 index 00000000000..50dee9de006 Binary files /dev/null and b/static/icons/component-action-sheet-icon.png differ diff --git a/static/icons/component-breadcrumbs-icon.png b/static/icons/component-breadcrumbs-icon.png new file mode 100644 index 00000000000..2e7a4165fcf Binary files /dev/null and b/static/icons/component-breadcrumbs-icon.png differ diff --git a/static/icons/component-icons-icon.png b/static/icons/component-icons-icon.png new file mode 100644 index 00000000000..1e444bc4e3e Binary files /dev/null and b/static/icons/component-icons-icon.png differ diff --git a/static/icons/component-input-otp-icon.png b/static/icons/component-input-otp-icon.png new file mode 100644 index 00000000000..416847abf39 Binary files /dev/null and b/static/icons/component-input-otp-icon.png differ diff --git a/static/icons/component-media-icon.png b/static/icons/component-media-icon.png index 3c21044bfad..7534e9f6944 100644 Binary files a/static/icons/component-media-icon.png and b/static/icons/component-media-icon.png differ diff --git a/static/icons/component-navigation-icon.png b/static/icons/component-navigation-icon.png new file mode 100644 index 00000000000..e0c808a709c Binary files /dev/null and b/static/icons/component-navigation-icon.png differ diff --git a/static/icons/component-searchbar-icon.png b/static/icons/component-searchbar-icon.png new file mode 100644 index 00000000000..4341738560d Binary files /dev/null and b/static/icons/component-searchbar-icon.png differ diff --git a/static/icons/component-typography-icon.png b/static/icons/component-typography-icon.png index d2632af52fc..c375549eda8 100644 Binary files a/static/icons/component-typography-icon.png and b/static/icons/component-typography-icon.png differ diff --git a/static/icons/feature-component-accordion-icon.png b/static/icons/feature-component-accordion-icon.png new file mode 100644 index 00000000000..847a1095418 Binary files /dev/null and b/static/icons/feature-component-accordion-icon.png differ diff --git a/static/icons/feature-component-datetime-icon.png b/static/icons/feature-component-datetime-icon.png new file mode 100644 index 00000000000..b6838937042 Binary files /dev/null and b/static/icons/feature-component-datetime-icon.png differ diff --git a/static/icons/feature-component-item-icon.png b/static/icons/feature-component-item-icon.png new file mode 100644 index 00000000000..c3353db553b Binary files /dev/null and b/static/icons/feature-component-item-icon.png differ diff --git a/static/icons/feature-component-refresher-icon.png b/static/icons/feature-component-refresher-icon.png new file mode 100644 index 00000000000..528354fbad0 Binary files /dev/null and b/static/icons/feature-component-refresher-icon.png differ diff --git a/static/usage/v7/config/mode/angular/example_component_html.md b/static/usage/v7/config/mode/angular/example_component_html.md new file mode 100644 index 00000000000..759329a97da --- /dev/null +++ b/static/usage/v7/config/mode/angular/example_component_html.md @@ -0,0 +1,5 @@ +```html + + Current mode: {{ mode }} + +``` diff --git a/static/usage/v7/config/mode/angular/example_component_ts.md b/static/usage/v7/config/mode/angular/example_component_ts.md new file mode 100644 index 00000000000..5f0d31b1a3c --- /dev/null +++ b/static/usage/v7/config/mode/angular/example_component_ts.md @@ -0,0 +1,16 @@ +```ts +import { Component } from '@angular/core'; +import { Config, IonButton } from '@ionic/angular/standalone'; + +@Component({ + selector: 'app-example', + templateUrl: './example.component.html', + imports: [IonButton], +}) +export class ExampleComponent { + mode: string; + constructor(public config: Config) { + this.mode = this.config.get('mode'); + } +} +``` diff --git a/static/usage/v7/config/mode/demo.html b/static/usage/v7/config/mode/demo.html new file mode 100644 index 00000000000..8762f394ba5 --- /dev/null +++ b/static/usage/v7/config/mode/demo.html @@ -0,0 +1,41 @@ + + + + + + Ionic Config Mode + + + + + + + + + +
+ +
+ + + + + diff --git a/static/usage/v7/config/mode/index.md b/static/usage/v7/config/mode/index.md new file mode 100644 index 00000000000..f81cca1df75 --- /dev/null +++ b/static/usage/v7/config/mode/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/config/mode/javascript.md b/static/usage/v7/config/mode/javascript.md new file mode 100644 index 00000000000..86b8b111d5f --- /dev/null +++ b/static/usage/v7/config/mode/javascript.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v7/config/mode/react.md b/static/usage/v7/config/mode/react.md new file mode 100644 index 00000000000..3699e778a85 --- /dev/null +++ b/static/usage/v7/config/mode/react.md @@ -0,0 +1,25 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { IonButton } from '@ionic/react'; +import { getMode } from '@ionic/core'; + +function Example() { + const [mode, setMode] = useState(''); + + useEffect(() => { + const mode = getMode() || 'md'; + setMode(mode); + }, []); + + const color = mode === 'ios' ? 'secondary' : 'tertiary'; + const fill = mode === 'ios' ? 'outline' : 'solid'; + + return ( + + Current mode: {mode} + + ); +} + +export default Example; +``` diff --git a/static/usage/v7/config/mode/vue.md b/static/usage/v7/config/mode/vue.md new file mode 100644 index 00000000000..a227337a408 --- /dev/null +++ b/static/usage/v7/config/mode/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v7/refresher/advanced/angular/example_component_ts.md b/static/usage/v7/refresher/advanced/angular/example_component_ts.md index db6bd8d6099..b7d91143633 100644 --- a/static/usage/v7/refresher/advanced/angular/example_component_ts.md +++ b/static/usage/v7/refresher/advanced/angular/example_component_ts.md @@ -11,6 +11,7 @@ import { IonRefresherContent, IonTitle, IonToolbar, + RefresherCustomEvent, } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; @@ -82,10 +83,10 @@ export class ExampleComponent { } } - handleRefresh(event: CustomEvent) { + handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { this.addItems(3, true); - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/advanced/react/main_tsx.md b/static/usage/v7/refresher/advanced/react/main_tsx.md index f4cdf27d4eb..2ddb57ac50a 100644 --- a/static/usage/v7/refresher/advanced/react/main_tsx.md +++ b/static/usage/v7/refresher/advanced/react/main_tsx.md @@ -11,7 +11,7 @@ import { IonRefresherContent, IonTitle, IonToolbar, - RefresherEventDetail, + RefresherCustomEvent, } from '@ionic/react'; import { ellipse } from 'ionicons/icons'; @@ -44,7 +44,7 @@ function Example() { } }, []); - function handleRefresh(event: CustomEvent) { + function handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { addItems(3, true); event.detail.complete(); diff --git a/static/usage/v7/refresher/advanced/vue.md b/static/usage/v7/refresher/advanced/vue.md index c5ec3047d44..8a34a29f86e 100644 --- a/static/usage/v7/refresher/advanced/vue.md +++ b/static/usage/v7/refresher/advanced/vue.md @@ -51,6 +51,7 @@ IonRefresherContent, IonTitle, IonToolbar, + RefresherCustomEvent, }, setup() { const names = [ @@ -82,7 +83,7 @@ addItems(5); - const handleRefresh = (event: CustomEvent) => { + const handleRefresh = (event: RefresherCustomEvent) => { setTimeout(() => { addItems(3, true); event.target.complete(); diff --git a/static/usage/v7/refresher/basic/angular/example_component_ts.md b/static/usage/v7/refresher/basic/angular/example_component_ts.md index 8edb4e4dc1f..da27a11e0af 100644 --- a/static/usage/v7/refresher/basic/angular/example_component_ts.md +++ b/static/usage/v7/refresher/basic/angular/example_component_ts.md @@ -7,6 +7,7 @@ import { IonRefresherContent, IonTitle, IonToolbar, + RefresherCustomEvent, } from '@ionic/angular/standalone'; @Component({ @@ -16,10 +17,10 @@ import { imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event: CustomEvent) { + handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v7/refresher/basic/react.md b/static/usage/v7/refresher/basic/react.md index 02b0504208b..bcdd53422d8 100644 --- a/static/usage/v7/refresher/basic/react.md +++ b/static/usage/v7/refresher/basic/react.md @@ -7,11 +7,11 @@ import { IonRefresherContent, IonTitle, IonToolbar, - RefresherEventDetail, + RefresherCustomEvent, } from '@ionic/react'; function Example() { - function handleRefresh(event: CustomEvent) { + function handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here event.detail.complete(); diff --git a/static/usage/v7/refresher/basic/vue.md b/static/usage/v7/refresher/basic/vue.md index 870081dcfbf..fceacabdd6c 100644 --- a/static/usage/v7/refresher/basic/vue.md +++ b/static/usage/v7/refresher/basic/vue.md @@ -16,13 +16,21 @@ + + + + + + + +
+ +
+ + + + + diff --git a/static/usage/v8/config/mode/index.md b/static/usage/v8/config/mode/index.md new file mode 100644 index 00000000000..2a39f7cc794 --- /dev/null +++ b/static/usage/v8/config/mode/index.md @@ -0,0 +1,24 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v8/config/mode/javascript.md b/static/usage/v8/config/mode/javascript.md new file mode 100644 index 00000000000..86b8b111d5f --- /dev/null +++ b/static/usage/v8/config/mode/javascript.md @@ -0,0 +1,12 @@ +```html + + + +``` diff --git a/static/usage/v8/config/mode/react.md b/static/usage/v8/config/mode/react.md new file mode 100644 index 00000000000..3de2faf85a1 --- /dev/null +++ b/static/usage/v8/config/mode/react.md @@ -0,0 +1,24 @@ +```tsx +import React, { useState, useEffect } from 'react'; +import { IonButton } from '@ionic/react'; +import { getMode } from '@ionic/core'; + +function Example() { + const [mode, setMode] = useState(''); + + useEffect(() => { + const mode = getMode() || 'md'; + setMode(mode); + }, []); + + const color = mode === 'ios' ? 'secondary' : 'tertiary'; + const fill = mode === 'ios' ? 'outline' : 'solid'; + + return ( + + Current mode: {mode} + + ); +} +export default Example; +``` diff --git a/static/usage/v8/config/mode/vue.md b/static/usage/v8/config/mode/vue.md new file mode 100644 index 00000000000..a227337a408 --- /dev/null +++ b/static/usage/v8/config/mode/vue.md @@ -0,0 +1,20 @@ +```html + + + +``` diff --git a/static/usage/v8/refresher/advanced/angular/example_component_ts.md b/static/usage/v8/refresher/advanced/angular/example_component_ts.md index db6bd8d6099..b7d91143633 100644 --- a/static/usage/v8/refresher/advanced/angular/example_component_ts.md +++ b/static/usage/v8/refresher/advanced/angular/example_component_ts.md @@ -11,6 +11,7 @@ import { IonRefresherContent, IonTitle, IonToolbar, + RefresherCustomEvent, } from '@ionic/angular/standalone'; import { addIcons } from 'ionicons'; @@ -82,10 +83,10 @@ export class ExampleComponent { } } - handleRefresh(event: CustomEvent) { + handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { this.addItems(3, true); - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/advanced/react/main_tsx.md b/static/usage/v8/refresher/advanced/react/main_tsx.md index f4cdf27d4eb..2ddb57ac50a 100644 --- a/static/usage/v8/refresher/advanced/react/main_tsx.md +++ b/static/usage/v8/refresher/advanced/react/main_tsx.md @@ -11,7 +11,7 @@ import { IonRefresherContent, IonTitle, IonToolbar, - RefresherEventDetail, + RefresherCustomEvent, } from '@ionic/react'; import { ellipse } from 'ionicons/icons'; @@ -44,7 +44,7 @@ function Example() { } }, []); - function handleRefresh(event: CustomEvent) { + function handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { addItems(3, true); event.detail.complete(); diff --git a/static/usage/v8/refresher/advanced/vue.md b/static/usage/v8/refresher/advanced/vue.md index c5ec3047d44..8a34a29f86e 100644 --- a/static/usage/v8/refresher/advanced/vue.md +++ b/static/usage/v8/refresher/advanced/vue.md @@ -51,6 +51,7 @@ IonRefresherContent, IonTitle, IonToolbar, + RefresherCustomEvent, }, setup() { const names = [ @@ -82,7 +83,7 @@ addItems(5); - const handleRefresh = (event: CustomEvent) => { + const handleRefresh = (event: RefresherCustomEvent) => { setTimeout(() => { addItems(3, true); event.target.complete(); diff --git a/static/usage/v8/refresher/basic/angular/example_component_ts.md b/static/usage/v8/refresher/basic/angular/example_component_ts.md index 8edb4e4dc1f..da27a11e0af 100644 --- a/static/usage/v8/refresher/basic/angular/example_component_ts.md +++ b/static/usage/v8/refresher/basic/angular/example_component_ts.md @@ -7,6 +7,7 @@ import { IonRefresherContent, IonTitle, IonToolbar, + RefresherCustomEvent, } from '@ionic/angular/standalone'; @Component({ @@ -16,10 +17,10 @@ import { imports: [IonContent, IonHeader, IonRefresher, IonRefresherContent, IonTitle, IonToolbar], }) export class ExampleComponent { - handleRefresh(event: CustomEvent) { + handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here - (event.target as HTMLIonRefresherElement).complete(); + event.target.complete(); }, 2000); } } diff --git a/static/usage/v8/refresher/basic/react.md b/static/usage/v8/refresher/basic/react.md index 02b0504208b..bcdd53422d8 100644 --- a/static/usage/v8/refresher/basic/react.md +++ b/static/usage/v8/refresher/basic/react.md @@ -7,11 +7,11 @@ import { IonRefresherContent, IonTitle, IonToolbar, - RefresherEventDetail, + RefresherCustomEvent, } from '@ionic/react'; function Example() { - function handleRefresh(event: CustomEvent) { + function handleRefresh(event: RefresherCustomEvent) { setTimeout(() => { // Any calls to load data go here event.detail.complete(); diff --git a/static/usage/v8/refresher/basic/vue.md b/static/usage/v8/refresher/basic/vue.md index 870081dcfbf..fceacabdd6c 100644 --- a/static/usage/v8/refresher/basic/vue.md +++ b/static/usage/v8/refresher/basic/vue.md @@ -16,13 +16,21 @@