diff --git a/docs/api/fab.mdx b/docs/api/fab.mdx index 20014dcfbb5..8664d5c5af9 100644 --- a/docs/api/fab.mdx +++ b/docs/api/fab.mdx @@ -89,6 +89,18 @@ import ButtonSizing from '@site/static/usage/v9/fab/button-sizing/index.mdx'; +## Animation {/* #animation */} + +By default, the main fab button rotates and scales between its content and the close icon when a fab list opens. Setting the `animated` property of a fab button to `false` turns off its transitions. Each fab button has its own transitions, so set `animated` on the buttons in the fab list too. Setting the `animated` [global config](/developing/config.mdx#global-config) to `false` turns off the transitions for every fab button in the app. In `md` mode, the ripple effect still plays when a fab button's `animated` property is `false`, but the global config turns it off too. + +When the user has turned on reduced motion in their operating system, the content and close icon fade instead of rotating and scaling. The button's other state transitions, such as background and shadow changes, are turned off, and the button doesn't grow while pressed in `ios` mode. + +In the following example, the fab on the left uses the default transitions, and the fab on the right sets `animated` to `false` on every fab button. + +import Animation from '@site/static/usage/v9/fab/animation/index.mdx'; + + + ## Theming {/* #theming */} ### Colors {/* #colors */} diff --git a/static/code/stackblitz/v9/angular/package-lock.json b/static/code/stackblitz/v9/angular/package-lock.json index 0272d75d9e5..1370cb5c7f3 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.8", - "@ionic/core": "9.0.8", + "@ionic/angular": "9.0.11-dev.11794501674.16819717", + "@ionic/core": "9.0.11-dev.11794501674.16819717", "ionicons": "8.1.0", "rxjs": "^7.8.1", "tslib": "^2.5.0" @@ -2578,12 +2578,12 @@ } }, "node_modules/@ionic/angular": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-9.0.8.tgz", - "integrity": "sha512-eCgXKqezRdWyjQ1FBsY2X6kYQ4X4yJVmca4JzA8a+05+IxDrQUxzCpe/IjmOo0d0bxufEGpCnxRol0Dn152jdw==", + "version": "9.0.11-dev.11794501674.16819717", + "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-9.0.11-dev.11794501674.16819717.tgz", + "integrity": "sha512-gXi70iVG13IzJ/PwKaGLT6G+Rz/4JcWPgNIupFMipMFZvQVAcC3sfmFQMfw+Y+K0X8p3H0tna7d8cTClNjpcTg==", "license": "MIT", "dependencies": { - "@ionic/core": "9.0.8", + "@ionic/core": "9.0.11-dev.11794501674.16819717", "ionicons": "^8.0.13", "jsonc-parser": "^3.0.0", "tslib": "^2.3.0" @@ -2602,9 +2602,9 @@ } }, "node_modules/@ionic/core": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.8.tgz", - "integrity": "sha512-0KmlxdVWb8dryWTyX69bnH54764jiQnqxX9RHZE313xpyunxDl8UfdxpLiKRWKocawOWa/YgOI4GaHX2RODEGw==", + "version": "9.0.11-dev.11794501674.16819717", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.11-dev.11794501674.16819717.tgz", + "integrity": "sha512-T4CZjVIis5w/CJL1QvI/6a8z29wI2nTAK5bHlFGTQv9T0TXCTqG6X8wm5AkPlNBAJ9jPzPZknG6zNqQHU9e8mQ==", "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 16258af55a1..a115df07694 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.8", - "@ionic/core": "9.0.8", + "@ionic/angular": "9.0.11-dev.11794501674.16819717", + "@ionic/core": "9.0.11-dev.11794501674.16819717", "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 44feac9de64..56c537eb894 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.8", + "@ionic/core": "9.0.11-dev.11794501674.16819717", "ionicons": "8.1.0" }, "devDependencies": { @@ -16,9 +16,9 @@ } }, "node_modules/@ionic/core": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.8.tgz", - "integrity": "sha512-0KmlxdVWb8dryWTyX69bnH54764jiQnqxX9RHZE313xpyunxDl8UfdxpLiKRWKocawOWa/YgOI4GaHX2RODEGw==", + "version": "9.0.11-dev.11794501674.16819717", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.11-dev.11794501674.16819717.tgz", + "integrity": "sha512-T4CZjVIis5w/CJL1QvI/6a8z29wI2nTAK5bHlFGTQv9T0TXCTqG6X8wm5AkPlNBAJ9jPzPZknG6zNqQHU9e8mQ==", "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 f18500d3da3..e6c64b5004d 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.8", + "@ionic/core": "9.0.11-dev.11794501674.16819717", "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 3ca1a22e70d..1ed508d60ed 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.8", - "@ionic/react-router": "9.0.8", + "@ionic/react": "9.0.11-dev.11794501674.16819717", + "@ionic/react-router": "9.0.11-dev.11794501674.16819717", "@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.8", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.8.tgz", - "integrity": "sha512-0KmlxdVWb8dryWTyX69bnH54764jiQnqxX9RHZE313xpyunxDl8UfdxpLiKRWKocawOWa/YgOI4GaHX2RODEGw==", + "version": "9.0.11-dev.11794501674.16819717", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.11-dev.11794501674.16819717.tgz", + "integrity": "sha512-T4CZjVIis5w/CJL1QvI/6a8z29wI2nTAK5bHlFGTQv9T0TXCTqG6X8wm5AkPlNBAJ9jPzPZknG6zNqQHU9e8mQ==", "license": "MIT", "dependencies": { "@stencil/core": "^4.44.2", @@ -268,12 +268,12 @@ } }, "node_modules/@ionic/react": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@ionic/react/-/react-9.0.8.tgz", - "integrity": "sha512-8N9l+SA2VdcpX6lT9C6bH7brdHfekdbbRmjvXOU4kl86KHdVeqirkkt63iyLWm6VoEKLc2OuAfy4tjUSnlv0rw==", + "version": "9.0.11-dev.11794501674.16819717", + "resolved": "https://registry.npmjs.org/@ionic/react/-/react-9.0.11-dev.11794501674.16819717.tgz", + "integrity": "sha512-btyG8hsEGcBNoLoqh36QJDyWBJs3hLCGRJGAx32NvgbAb/X5q80B/TEaSTRtC0ziA2bWfRRs3yN8Hckab0jXTg==", "license": "MIT", "dependencies": { - "@ionic/core": "9.0.8", + "@ionic/core": "9.0.11-dev.11794501674.16819717", "@stencil/react-output-target": "^1.6.2", "ionicons": "^8.0.13", "tslib": "*" @@ -284,13 +284,13 @@ } }, "node_modules/@ionic/react-router": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-9.0.8.tgz", - "integrity": "sha512-5keNmGpmlUKIn+IrXQhW0ZhglKB9kT2mSQYR7FwuhiPlYDXHDIA4Re2w+u6lLr5FbQVQpx9q9AUujIItYgvL7g==", + "version": "9.0.11-dev.11794501674.16819717", + "resolved": "https://registry.npmjs.org/@ionic/react-router/-/react-router-9.0.11-dev.11794501674.16819717.tgz", + "integrity": "sha512-MYG4xg+M14R0ESNaea3FQVdDUOSaFzJQJAAifJ57QIfQ4tFLZY/tSRIrEvSSyXBVinpBxvli3XaVr2graHmFnQ==", "license": "MIT", "dependencies": { - "@ionic/core": "9.0.8", - "@ionic/react": "9.0.8", + "@ionic/core": "9.0.11-dev.11794501674.16819717", + "@ionic/react": "9.0.11-dev.11794501674.16819717", "tslib": "*" }, "peerDependencies": { diff --git a/static/code/stackblitz/v9/react/package.json b/static/code/stackblitz/v9/react/package.json index 4fe40e75e38..2aedeb207e2 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.8", - "@ionic/react-router": "9.0.8", + "@ionic/react": "9.0.11-dev.11794501674.16819717", + "@ionic/react-router": "9.0.11-dev.11794501674.16819717", "@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 2dd2bbac5a5..26bf3713a54 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.8", - "@ionic/vue-router": "9.0.8", + "@ionic/vue": "9.0.11-dev.11794501674.16819717", + "@ionic/vue-router": "9.0.11-dev.11794501674.16819717", "vue": "^3.2.25", "vue-router": "5.4.0" }, @@ -63,9 +63,9 @@ } }, "node_modules/@ionic/core": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.8.tgz", - "integrity": "sha512-0KmlxdVWb8dryWTyX69bnH54764jiQnqxX9RHZE313xpyunxDl8UfdxpLiKRWKocawOWa/YgOI4GaHX2RODEGw==", + "version": "9.0.11-dev.11794501674.16819717", + "resolved": "https://registry.npmjs.org/@ionic/core/-/core-9.0.11-dev.11794501674.16819717.tgz", + "integrity": "sha512-T4CZjVIis5w/CJL1QvI/6a8z29wI2nTAK5bHlFGTQv9T0TXCTqG6X8wm5AkPlNBAJ9jPzPZknG6zNqQHU9e8mQ==", "license": "MIT", "dependencies": { "@stencil/core": "^4.44.2", @@ -77,23 +77,23 @@ } }, "node_modules/@ionic/vue": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-9.0.8.tgz", - "integrity": "sha512-SpHWvKU2a3t2x03cFQt5mLNBbxuPsNtwiJvOhzfZdmEfnyj7bN0zJkevwToiGyYdmBh7kWuuq4wrUohdtzEwgA==", + "version": "9.0.11-dev.11794501674.16819717", + "resolved": "https://registry.npmjs.org/@ionic/vue/-/vue-9.0.11-dev.11794501674.16819717.tgz", + "integrity": "sha512-JAr/1nMKT0E2m/0e1hjMcNhN48Zx0+mE2azzUbZtK16js1femzTOwGzd8OKc22uQwYCXAUZkwb5rmfBUaM0Q1A==", "license": "MIT", "dependencies": { - "@ionic/core": "9.0.8", + "@ionic/core": "9.0.11-dev.11794501674.16819717", "@stencil/vue-output-target": "0.14.2", "ionicons": "^8.0.13" } }, "node_modules/@ionic/vue-router": { - "version": "9.0.8", - "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-9.0.8.tgz", - "integrity": "sha512-RmgLVk+cXHl+c01aBF0ujtoeO18peNBQ2FnWNgMxGskBxztv2DMNCM7lxstuAwaRGPOGWAKshqMHzuyX/vfHwg==", + "version": "9.0.11-dev.11794501674.16819717", + "resolved": "https://registry.npmjs.org/@ionic/vue-router/-/vue-router-9.0.11-dev.11794501674.16819717.tgz", + "integrity": "sha512-1Ja2xXmMfF+skA/7msg72Qdjb6PpBljHqYAg08j4ojj/EWbmGhE+ztj/6Ipt+Qxu10VGI+01IXFkFSdQKzBQdg==", "license": "MIT", "dependencies": { - "@ionic/vue": "9.0.8" + "@ionic/vue": "9.0.11-dev.11794501674.16819717" } }, "node_modules/@jridgewell/gen-mapping": { diff --git a/static/code/stackblitz/v9/vue/package.json b/static/code/stackblitz/v9/vue/package.json index 99aa65f043d..f11efcb7ac2 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.8", - "@ionic/vue-router": "9.0.8", + "@ionic/vue": "9.0.11-dev.11794501674.16819717", + "@ionic/vue-router": "9.0.11-dev.11794501674.16819717", "vue": "^3.2.25", "vue-router": "5.4.0" }, diff --git a/static/usage/v9/fab/animation/angular/example_component_html.md b/static/usage/v9/fab/animation/angular/example_component_html.md new file mode 100644 index 00000000000..d8bb589ee42 --- /dev/null +++ b/static/usage/v9/fab/animation/angular/example_component_html.md @@ -0,0 +1,37 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/animation/angular/example_component_ts.md b/static/usage/v9/fab/animation/angular/example_component_ts.md new file mode 100644 index 00000000000..cb2160b4647 --- /dev/null +++ b/static/usage/v9/fab/animation/angular/example_component_ts.md @@ -0,0 +1,24 @@ +```ts +import { Component } from '@angular/core'; +import { IonContent, IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/angular'; + +import { addIcons } from 'ionicons'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', + styleUrls: ['example.component.css'], + imports: [IonContent, IonFab, IonFabButton, IonFabList, IonIcon], +}) +export class ExampleComponent { + constructor() { + /** + * Any icons you want to use in your application + * can be registered in app.component.ts and then + * referenced by name anywhere in your application. + */ + addIcons({ add, colorPalette, document, globe }); + } +} +``` diff --git a/static/usage/v9/fab/animation/demo.html b/static/usage/v9/fab/animation/demo.html new file mode 100644 index 00000000000..7bef1b30b4c --- /dev/null +++ b/static/usage/v9/fab/animation/demo.html @@ -0,0 +1,58 @@ + + + + + + Fab + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/usage/v9/fab/animation/index.mdx b/static/usage/v9/fab/animation/index.mdx new file mode 100644 index 00000000000..62e14f1c22b --- /dev/null +++ b/static/usage/v9/fab/animation/index.mdx @@ -0,0 +1,32 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript_index_html from './javascript/index_html.md'; +import javascript_index_ts from './javascript/index_ts.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/v9/fab/animation/javascript/index_html.md b/static/usage/v9/fab/animation/javascript/index_html.md new file mode 100644 index 00000000000..d2782a2f208 --- /dev/null +++ b/static/usage/v9/fab/animation/javascript/index_html.md @@ -0,0 +1,37 @@ +```html + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` diff --git a/static/usage/v9/fab/animation/javascript/index_ts.md b/static/usage/v9/fab/animation/javascript/index_ts.md new file mode 100644 index 00000000000..3f824e83770 --- /dev/null +++ b/static/usage/v9/fab/animation/javascript/index_ts.md @@ -0,0 +1,46 @@ +```ts +import { defineCustomElements } from '@ionic/core/loader'; + +import { addIcons } from 'ionicons'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +/* Core CSS required for Ionic components to work properly */ +import '@ionic/core/css/core.css'; + +/* Basic CSS for apps built with Ionic */ +import '@ionic/core/css/normalize.css'; +import '@ionic/core/css/structure.css'; +import '@ionic/core/css/typography.css'; + +/* Optional CSS utils that can be commented out */ +import '@ionic/core/css/padding.css'; +import '@ionic/core/css/float-elements.css'; +import '@ionic/core/css/text-alignment.css'; +import '@ionic/core/css/text-transformation.css'; +import '@ionic/core/css/flex-utils.css'; +import '@ionic/core/css/display.css'; + +/** + * Ionic Dark Palette + * ----------------------------------------------------- + * For more information, please see: + * https://ionicframework.com/docs/theming/dark-mode + */ + +// import '@ionic/core/css/palettes/dark.always.css'; +// import '@ionic/core/css/palettes/dark.class.css'; +import '@ionic/core/css/palettes/dark.system.css'; + +/* Theme variables */ +import './theme/variables.css'; + +/** + * On Ionicons 7.2+ these icons + * get mapped to a kebab-case key. + * Alternatively, developers can do: + * addIcons({ 'add': add, 'color-palette': colorPalette, 'document': document, 'globe': globe }); + */ +addIcons({ add, colorPalette, document, globe }); + +defineCustomElements(); +``` diff --git a/static/usage/v9/fab/animation/react.md b/static/usage/v9/fab/animation/react.md new file mode 100644 index 00000000000..8cadb97ad58 --- /dev/null +++ b/static/usage/v9/fab/animation/react.md @@ -0,0 +1,46 @@ +```tsx +import React from 'react'; +import { IonContent, IonFab, IonFabButton, IonFabList, IonIcon } from '@ionic/react'; +import { add, colorPalette, document, globe } from 'ionicons/icons'; + +function Example() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v9/fab/animation/vue.md b/static/usage/v9/fab/animation/vue.md new file mode 100644 index 00000000000..b1db8de9d47 --- /dev/null +++ b/static/usage/v9/fab/animation/vue.md @@ -0,0 +1,44 @@ +```html + + + +```