diff --git a/docs/angular/injection-tokens.md b/docs/angular/injection-tokens.md
new file mode 100644
index 00000000000..c7c775fd69c
--- /dev/null
+++ b/docs/angular/injection-tokens.md
@@ -0,0 +1,177 @@
+---
+title: Angular Injection Tokens
+sidebar_label: Injection Tokens
+---
+
+
+ Angular Injection Tokens | Access Ionic Elements via Dependency Injection
+
+
+
+Ionic provides Angular injection tokens that allow you to access Ionic elements through Angular's dependency injection system. This provides a more Angular-idiomatic way to interact with Ionic components programmatically.
+
+## Benefits
+
+Using injection tokens provides several advantages:
+
+- **Type Safety**: Full TypeScript support with proper typing for the modal element
+- **Angular Integration**: Works seamlessly with Angular's dependency injection system
+- **Simplified Code**: Eliminates the need for `ViewChild` queries or manual element references
+- **Better Testing**: Easier to mock and test components that use injection tokens
+
+## IonModalToken
+
+The `IonModalToken` injection token allows you to inject a reference to the current modal element directly into your Angular components. This is particularly useful when you need to programmatically control modal behavior, listen to modal events, or access modal properties.
+
+Starting in `@ionic/angular` v8.7.0, you can use this injection token to streamline modal interactions in your Angular applications.
+
+### Basic Usage
+
+To use the `IonModalToken`, inject it into your component's constructor:
+
+```tsx
+import { Component, inject } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-modal',
+ template: `
+
+
+ Modal Content
+
+
+
+
This is modal content
+ Close Modal
+
+ `,
+ imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
+})
+export class ModalComponent {
+ private modalToken = inject(IonModalToken);
+
+ closeModal() {
+ this.modalToken.dismiss();
+ }
+}
+```
+
+### Listening to Modal Events
+
+You can use the injected modal reference to listen to modal lifecycle events:
+
+```tsx
+import { Component, inject, OnInit } from '@angular/core';
+import { IonButton, IonContent, IonHeader, IonModalToken, IonTitle, IonToolbar } from '@ionic/angular/standalone';
+
+@Component({
+ selector: 'app-modal',
+ template: `
+
+
+ Modal with Events
+
+
+
+
+ Toggle Backdrop Dismiss: {{ backdropDismiss }}
+
+ `,
+ imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton],
+})
+export class ModalComponent implements OnInit {
+ private modalToken = inject(IonModalToken);
+
+ modalId = '';
+ backdropDismiss = true;
+
+ ngOnInit() {
+ this.modalId = this.modalToken.id || 'No ID';
+ this.backdropDismiss = this.modalToken.backdropDismiss;
+ }
+
+ toggleBackdropDismiss() {
+ this.backdropDismiss = !this.backdropDismiss;
+ this.modalToken.backdropDismiss = this.backdropDismiss;
+ }
+}
+```
+
+### Opening a Modal with Injection Token Content
+
+When opening a modal that uses the injection token, you can pass the component directly to the modal controller:
+
+```tsx
+import { Component, inject } from '@angular/core';
+import { IonContent, IonButton, ModalController } from '@ionic/angular/standalone';
+import { ModalComponent } from './modal.component';
+
+@Component({
+ selector: 'app-home',
+ template: `
+
+ Open Modal
+
+ `,
+})
+export class HomePage {
+ private modalController = inject(ModalController);
+
+ async openModal() {
+ const myModal = await this.modalController.create({
+ component: ModalComponent,
+ componentProps: {
+ // Any props you want to pass to the modal content
+ },
+ });
+
+ await myModal.present();
+ }
+}
+```
diff --git a/docs/api/checkbox.md b/docs/api/checkbox.md
index a7b733f201d..ddc9331f50e 100644
--- a/docs/api/checkbox.md
+++ b/docs/api/checkbox.md
@@ -65,7 +65,7 @@ import Justify from '@site/static/usage/v8/checkbox/justify/index.md';
import Indeterminate from '@site/static/usage/v8/checkbox/indeterminate/index.md';
-
+
## Links inside of Labels
Checkbox labels can sometimes be accompanied with links. These links can provide more information related to the checkbox. However, clicking the link should not check the checkbox. To achieve this, we can use [stopPropagation](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation) to prevent the click event from bubbling. When using this approach, the rest of the label still remains clickable.
@@ -114,30 +114,6 @@ interface CheckboxCustomEvent extends CustomEvent {
}
```
-## Migrating from Legacy Checkbox Syntax
-
-A simpler checkbox syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup a checkbox, resolves accessibility issues, and improves the developer experience.
-
-Developers can perform this migration one checkbox at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
-
-### Using the Modern Syntax
-
-Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-checkbox`. The placement of the label can be configured using the `labelPlacement` property on `ion-checkbox`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-checkbox`.
-
-import Migration from '@site/static/usage/v8/checkbox/migration/index.md';
-
-
-
-
-:::note
-In past versions of Ionic, `ion-item` was required for `ion-checkbox` to function properly. Starting in Ionic 7.0, `ion-checkbox` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-checkbox` to function properly.
-:::
-
-### Using the Legacy Syntax
-
-Ionic uses heuristics to detect if an app is using the modern checkbox syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-checkbox` to `true` to force that instance of the checkbox to use the legacy syntax.
-
-
## Properties
diff --git a/docs/api/input.md b/docs/api/input.md
index 78059609d8e..18d71de4eb8 100644
--- a/docs/api/input.md
+++ b/docs/api/input.md
@@ -188,28 +188,6 @@ import CSSProps from '@site/static/usage/v8/input/theming/css-properties/index.m
-## Migrating from Legacy Input Syntax
-
-A simpler input syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an input, resolves accessibility issues, and improves the developer experience.
-
-Developers can perform this migration one input at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
-
-### Using the Modern Syntax
-
-Using the modern syntax involves three steps:
-
-1. Remove `ion-label` and use the `label` property on `ion-input` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-input`.
-2. Move input-specific properties from `ion-item` on to `ion-input`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
-3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-input` instead.
-
-import Migration from '@site/static/usage/v8/input/migration/index.md';
-
-
-
-### Using the Legacy Syntax
-
-Ionic uses heuristics to detect if an app is using the modern input syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-input` to `true` to force that instance of the input to use the legacy syntax.
-
## Interfaces
### InputChangeEventDetail
diff --git a/docs/api/radio.md b/docs/api/radio.md
index fb717c14835..62a86923dda 100644
--- a/docs/api/radio.md
+++ b/docs/api/radio.md
@@ -36,6 +36,14 @@ import LabelPlacement from '@site/static/usage/v8/radio/label-placement/index.md
+## Label Wrapping
+
+Regardless of label placement, long text will not wrap by default. If the width of the radio is constrained, overflowing text will be truncated with an ellipsis. You can enable text wrapping by adding the `ion-text-wrap` class to a wrapper around the radio text or styling the `label` shadow part using the `::part()` selector.
+
+import LabelWrap from '@site/static/usage/v8/radio/label-wrap/index.md';
+
+
+
## Object Value References
By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
@@ -107,31 +115,6 @@ import CSSParts from '@site/static/usage/v8/radio/theming/css-shadow-parts/index
-## Migrating from Legacy Radio Syntax
-
-A simpler radio syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an radio, resolves accessibility issues, and improves the developer experience.
-
-Developers can perform this migration one radio at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
-
-### Using the Modern Syntax
-
-Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-radio`. The placement of the label can be configured using the `labelPlacement` property on `ion-radio`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-radio`.
-
-import Migration from '@site/static/usage/v8/radio/migration/index.md';
-
-
-
-
-:::note
-In past versions of Ionic, `ion-item` was required for `ion-radio` to function properly. Starting in Ionic 7.0, `ion-radio` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-radio` to function properly.
-:::
-
-### Using the Legacy Syntax
-
-Ionic uses heuristics to detect if an app is using the modern radio syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-radio` to `true` to force that instance of the radio to use the legacy syntax.
-
-
-
## Properties
diff --git a/docs/api/range.md b/docs/api/range.md
index 838b981be05..fdb042bb3e9 100644
--- a/docs/api/range.md
+++ b/docs/api/range.md
@@ -128,32 +128,6 @@ import CSSParts from '@site/static/usage/v8/range/theming/css-shadow-parts/index
-## Migrating from Legacy Range Syntax
-
-A simpler range syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an range, resolves accessibility issues, and improves the developer experience.
-
-Developers can perform this migration one range at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
-
-### Using the Modern Syntax
-
-Using the modern syntax involves removing the `ion-label` and passing the label to `ion-range` using the `label` property. The placement of the label can be configured using the `labelPlacement` property.
-
-If custom HTML is needed for the label, it can be passed directly inside the `ion-range` using the `label` slot instead.
-
-import Migration from '@site/static/usage/v8/range/migration/index.md';
-
-
-
-
-:::note
-In past versions of Ionic, `ion-item` was required for `ion-range` to function properly. Starting in Ionic 7.0, `ion-range` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-range` to function properly.
-:::
-
-### Using the Legacy Syntax
-
-Ionic uses heuristics to detect if an app is using the modern range syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-range` to `true` to force that instance of the range to use the legacy syntax.
-
-
## Interfaces
### RangeChangeEventDetail
diff --git a/docs/api/reorder-group.md b/docs/api/reorder-group.md
index c3c6c4e9508..2d1d7f73fd3 100644
--- a/docs/api/reorder-group.md
+++ b/docs/api/reorder-group.md
@@ -16,27 +16,71 @@ import Slots from '@ionic-internal/component-api/v8/reorder-group/slots.md';
import EncapsulationPill from '@components/page/api/EncapsulationPill';
-The reorder group is a container for items using the [reorder](./reorder) component. When the user drags an item and drops it in a new position, the `ionItemReorder` event is dispatched. A handler for this event should be implemented that calls the `complete` method.
+The reorder group is a container for items using the [reorder](./reorder) component. When the user drags an item and drops it, the `ionReorderEnd` event is dispatched. A handler for this event should be implemented that calls the `complete` method.
-The `detail` property of the `ionItemReorder` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` a new index. For example usage of the reorder group, see the [reorder](./reorder) documentation.
+The `detail` property of the `ionReorderEnd` event includes all of the relevant information about the reorder operation, including the `from` and `to` indexes. In the context of reordering, an item moves `from` an index `to` an index. For example usage of the reorder group, see the [reorder](./reorder) documentation.
## Interfaces
-### ItemReorderEventDetail
+### ReorderMoveEventDetail
```typescript
-interface ItemReorderEventDetail {
+interface ReorderMoveEventDetail {
+ from: number;
+ to: number;
+}
+```
+
+### ReorderEndEventDetail
+
+```typescript
+interface ReorderEndEventDetail {
from: number;
to: number;
complete: (data?: boolean | any[]) => any;
}
```
-### ItemReorderCustomEvent
+### ReorderMoveCustomEvent
+
+While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+
+```typescript
+interface ReorderMoveCustomEvent extends CustomEvent {
+ detail: ReorderMoveEventDetail;
+ target: HTMLIonReorderGroupElement;
+}
+
+```
+
+### ReorderEndCustomEvent
While not required, this interface can be used in place of the `CustomEvent` interface for stronger typing with Ionic events emitted from this component.
+```typescript
+interface ReorderEndCustomEvent extends CustomEvent {
+ detail: ReorderEndEventDetail;
+ target: HTMLIonReorderGroupElement;
+}
+```
+
+### ItemReorderEventDetail (deprecated)
+
+**_Deprecated_** — Use the `ionReorderEnd` event with `ReorderEndEventDetail` instead.
+
+```typescript
+interface ItemReorderEventDetail {
+ from: number;
+ to: number;
+ complete: (data?: boolean | any[]) => any;
+}
+```
+
+### ItemReorderCustomEvent (deprecated)
+
+**_Deprecated_** — Use the `ionReorderEnd` event with `ReorderEndCustomEvent` instead.
+
```typescript
interface ItemReorderCustomEvent extends CustomEvent {
detail: ItemReorderEventDetail;
diff --git a/docs/api/reorder.md b/docs/api/reorder.md
index ad07a4290ea..5f771c9badf 100644
--- a/docs/api/reorder.md
+++ b/docs/api/reorder.md
@@ -20,7 +20,7 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
Reorder is a component that allows an item to be dragged to change its order within a group of items. It must be used within a [reorder group](./reorder-group) to provide a visual drag and drop interface.
-The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionItemReorder` event will be dispatched from the reorder group and the `complete` method needs to be called.
+The reorder is the anchor used to drag and drop the items. Once the reorder is complete, the `ionReorderEnd` event will be dispatched from the reorder group and the `complete` method needs to be called.
## Basic Usage
@@ -73,6 +73,29 @@ import UpdatingData from '@site/static/usage/v8/reorder/updating-data/index.md';
+## Event Handling
+
+### Using `ionReorderStart` and `ionReorderEnd`
+
+The `ionReorderStart` event is emitted when the user begins a reorder gesture. This event fires when the user taps and holds an item, before any movement occurs. This is useful for preparing the UI for the reorder operation, such as hiding certain elements or updating the visual state of items. For example, icons in list items can be hidden while they are being dragged and shown again when the reorder is complete.
+
+The `ionReorderEnd` event is emitted when the user completes the reorder gesture. This occurs when the user releases the item they are dragging, for example by lifting their finger on a touch screen or releasing the mouse button. The event includes the `from` and `to` indices of the item, as well as the `complete` method that should be called to finalize the reorder operation. The `from` index will always be the position of the item when the gesture started, while the `to` index will be its final position. This event will fire even if no items have changed position, in which case the `from` and `to` indices will be the same.
+
+import ReorderStartEndEvents from '@site/static/usage/v8/reorder/reorder-start-end-events/index.md';
+
+
+
+### Using `ionReorderMove`
+
+The `ionReorderMove` event is emitted continuously during the reorder gesture as the user drags an item. The event includes the `from` and `to` indices of the item. Unlike `ionReorderEnd`, the `from` index in this event represents the last known position of the item (which updates as the item moves), while the `to` index represents its current position. If the item has not changed position since the last event, the `from` and `to` indices will be the same. This event is useful for tracking position changes during the drag operation. For example, the ranking or numbering of items can be updated in real-time as they are being dragged to maintain a logical ascending order.
+
+:::warning
+Do not call the `complete` method during the `ionReorderMove` event as it can break the gesture.
+:::
+
+import ReorderMoveEvent from '@site/static/usage/v8/reorder/reorder-move-event/index.md';
+
+
## Usage with Virtual Scroll
diff --git a/docs/api/select.md b/docs/api/select.md
index 0642c6e701d..2ee43b4751e 100644
--- a/docs/api/select.md
+++ b/docs/api/select.md
@@ -284,28 +284,6 @@ interface SelectCustomEvent extends CustomEvent {
}
```
-## Migrating from Legacy Select Syntax
-
-A simpler select syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an select, resolves accessibility issues, and improves the developer experience.
-
-Developers can perform this migration one select at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
-
-
-### Using the Modern Syntax
-
-Using the modern syntax involves two steps:
-
-1. Remove `ion-label` and use the `label` property on `ion-select` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-select`.
-2. Move any usage of `fill` and `shape` from `ion-item` on to `ion-select`.
-
-import Migration from '@site/static/usage/v8/select/migration/index.md';
-
-
-
-### Using the Legacy Syntax
-
-Ionic uses heuristics to detect if an app is using the modern select syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-select` to `true` to force that instance of the input to use the legacy syntax.
-
## Accessibility
### Keyboard Interactions
diff --git a/docs/api/textarea.md b/docs/api/textarea.md
index 5e34e78a72a..feed4b04bee 100644
--- a/docs/api/textarea.md
+++ b/docs/api/textarea.md
@@ -127,29 +127,6 @@ import StartEndSlots from '@site/static/usage/v8/textarea/start-end-slots/index.
-## Migrating from Legacy Textarea Syntax
-
-A simpler textarea syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an textarea, resolves accessibility issues, and improves the developer experience.
-
-Developers can perform this migration one textarea at a time. While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
-
-
-### Using the Modern Syntax
-
-Using the modern syntax involves three steps:
-
-1. Remove `ion-label` and use the `label` property on `ion-textarea` instead. The placement of the label can be configured using the `labelPlacement` property on `ion-textarea`.
-2. Move textarea-specific properties from `ion-item` on to `ion-textarea`. This includes the `counter`, `counterFormatter`, `fill`, and `shape` properties.
-3. Remove usages of the `helper` and `error` slots on `ion-item` and use the `helperText` and `errorText` properties on `ion-textarea` instead.
-
-import Migration from '@site/static/usage/v8/textarea/migration/index.md';
-
-
-
-### Using the Legacy Syntax
-
-Ionic uses heuristics to detect if an app is using the modern textarea syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-textarea` to `true` to force that instance of the textarea to use the legacy syntax.
-
## Theming
import ThemingPlayground from '@site/static/usage/v8/textarea/theming/index.md';
diff --git a/docs/api/toggle.md b/docs/api/toggle.md
index c0b7445b2ac..ad2ebe3554e 100644
--- a/docs/api/toggle.md
+++ b/docs/api/toggle.md
@@ -107,29 +107,6 @@ import CSSParts from '@site/static/usage/v8/toggle/theming/css-shadow-parts/inde
-## Migrating from Legacy Toggle Syntax
-
-A simpler toggle syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an toggle, resolves accessibility issues, and improves the developer experience.
-
-While developers can continue using the legacy syntax, we recommend migrating as soon as possible.
-
-### Using the Modern Syntax
-
-Using the modern syntax involves removing the `ion-label` and passing the label directly inside of `ion-toggle`. The placement of the label can be configured using the `labelPlacement` property on `ion-toggle`. The way the label and the control are packed on a line can be controlled using the `justify` property on `ion-toggle`.
-
-import Migration from '@site/static/usage/v8/toggle/migration/index.md';
-
-
-
-
-:::note
-In past versions of Ionic, `ion-item` was required for `ion-toggle` to function properly. Starting in Ionic 7.0, `ion-toggle` should only be used in an `ion-item` when the item is placed in an `ion-list`. Additionally, `ion-item` is no longer required for `ion-toggle` to function properly.
-:::
-
-### Using the Legacy Syntax
-
-Ionic uses heuristics to detect if an app is using the modern toggle syntax. In some instances, it may be preferable to continue using the legacy syntax. Developers can set the `legacy` property on `ion-toggle` to `true` to force that instance of the toggle to use the legacy syntax.
-
## Interfaces
### ToggleChangeEventDetail
diff --git a/docs/layout/css-utilities.md b/docs/layout/css-utilities.md
index 29ad62298b4..3bafb37362a 100644
--- a/docs/layout/css-utilities.md
+++ b/docs/layout/css-utilities.md
@@ -12,13 +12,13 @@ title: CSS Utilities
Ionic Framework provides a set of CSS utility classes that can be used on any element in order to modify the text, element placement or adjust the padding and margin.
-:::note
+:::important
If your app was not started using an available Ionic Framework starter, the stylesheets listed in the [optional section of the global stylesheets](global-stylesheets.md#optional) will need to be included in order for these styles to work.
:::
## Text Modification
-### Text Alignment
+### Text Align
```html
@@ -76,7 +76,7 @@ If your app was not started using an available Ionic Framework starter, the styl
| `.ion-text-wrap` | `white-space: normal` | Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes. |
| `.ion-text-nowrap` | `white-space: nowrap` | Collapses whitespace as for `normal`, but suppresses line breaks (text wrapping) within text. |
-### Text Transformation
+### Text Transform
```html
@@ -125,9 +125,9 @@ The table below shows the default behavior, where `{modifier}` is any of the fol
## Element Placement
-### Float Elements
+### Float
-The float CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. This way, the element is taken from the normal flow of the web page, though still remaining a part of the flow, contrary to absolute positioning.
+The [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float) CSS property specifies that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. This way, the element is taken from the normal flow of the web page, though still remaining a part of the flow, contrary to absolute positioning.
```html
@@ -188,45 +188,59 @@ The table below shows the default behavior, where `{modifier}` is any of the fol
## Element Display
-The display CSS property determines if an element should be visible or not. The element will still be in the DOM, but not rendered, if it is hidden.
+### Display
-```html
-
-
-
-
-
hidden
- You can't see me.
-
-
-
-
-
not-hidden
- You can see me!
-
-
-
-
-```
+The [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) CSS property sets whether an element is treated as a block or inline box and the layout used for its children, such as flow layout, grid or flex. It can also be used to completely hide an element from the layout.
+
+Ionic provides the following utility classes for `display`:
+
+| Class | Style Rule | Description |
+| --------------------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `.ion-display-none` | `display: none` | Turns off the display of an element so that it has no effect on layout (the document is rendered as though the element did not exist). |
+| `.ion-display-inline` | `display: inline` | The element behaves as an inline element that does not create line breaks before or after itself. |
+| `.ion-display-inline-block` | `display: inline-block` | The element behaves as a block element that flows with surrounding content as if it were a single inline box. |
+| `.ion-display-block` | `display: block` | The element behaves as a block element, creating line breaks both before and after itself when in the normal flow. |
+| `.ion-display-flex` | `display: flex` | The element behaves like a block element and lays out its content according to the flexbox model. |
+| `.ion-display-inline-flex` | `display: inline-flex` | The element behaves like an inline element and lays out its content according to the flexbox model. |
+| `.ion-display-grid` | `display: grid` | The element behaves like a block element and lays out its content according to the grid model. |
+| `.ion-display-inline-grid` | `display: inline-grid` | The element behaves like an inline element and lays out its content according to the grid model. |
+| `.ion-display-table` | `display: table` | The element behaves like an HTML `
` element. It defines a block-level box. |
+| `.ion-display-table-cell` | `display: table-cell` | The element behaves like an HTML `
` element. |
+| `.ion-display-table-row` | `display: table-row` | The element behaves like an HTML `
` element. |
+
+### Responsive Display Classes
+
+All of the display classes listed above have additional classes to modify the display based on the screen size. Instead of `display-` in each class, use `display-{breakpoint}-` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints).
-| Class | Style Rule | Description |
-| ----------- | --------------- | --------------------------- |
-| `.ion-hide` | `display: none` | The element will be hidden. |
+The table below shows the default behavior, where `{modifier}` is any of the following: `none`, `inline`, `inline-block`, `block`, `flex`, `inline-flex`, `grid`, `inline-grid`, `table`, `table-cell`, `table-row`, as they are described above.
-### Responsive Display Attributes
+| Class | Description |
+| ---------------------------- | ------------------------------------------------------------- |
+| `.ion-display-{modifier}` | Applies the modifier to the element on all screen sizes. |
+| `.ion-display-sm-{modifier}` | Applies the modifier to the element when `min-width: 576px`. |
+| `.ion-display-md-{modifier}` | Applies the modifier to the element when `min-width: 768px`. |
+| `.ion-display-lg-{modifier}` | Applies the modifier to the element when `min-width: 992px`. |
+| `.ion-display-xl-{modifier}` | Applies the modifier to the element when `min-width: 1200px`. |
-There are also additional classes to modify the visibility based on the screen size. Instead of just `.ion-hide` for all screen sizes, use `.ion-hide-{breakpoint}-{dir}` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints), and `{dir}` is whether the element should be hidden on all screen sizes above (`up`) or below (`down`) the specified breakpoint.
+### Deprecated Classes
+
+:::warning Deprecation Notice
+
+The following classes are deprecated and will be removed in the next major release. Use the recommended `.ion-display-*` classes instead.
+
+:::
-| Class | Description |
-| -------------------- | ---------------------------------------------------------------------------------------------------- |
-| `.ion-hide-sm-{dir}` | Applies the modifier to the element when `min-width: 576px` (`up`) or `max-width: 576px` (`down`). |
-| `.ion-hide-md-{dir}` | Applies the modifier to the element when `min-width: 768px` (`up`) or `max-width: 768px` (`down`). |
-| `.ion-hide-lg-{dir}` | Applies the modifier to the element when `min-width: 992px` (`up`) or `max-width: 992px` (`down`). |
-| `.ion-hide-xl-{dir}` | Applies the modifier to the element when `min-width: 1200px` (`up`) or `max-width: 1200px` (`down`). |
+| Class | Description |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `.ion-hide` | Applies `display: none` to the element on all screen sizes. **Deprecated** — Use the `ion-display-none` class instead. |
+| `.ion-hide-sm-{dir}` | Applies the modifier to the element when `min-width: 576px` (`up`) or `max-width: 576px` (`down`). **Deprecated** — Use the `ion-display-sm-{modifier}` classes instead. |
+| `.ion-hide-md-{dir}` | Applies the modifier to the element when `min-width: 768px` (`up`) or `max-width: 768px` (`down`). **Deprecated** — Use the `ion-display-md-{modifier}` classes instead. |
+| `.ion-hide-lg-{dir}` | Applies the modifier to the element when `min-width: 992px` (`up`) or `max-width: 992px` (`down`). **Deprecated** — Use the `ion-display-lg-{modifier}` classes instead. |
+| `.ion-hide-xl-{dir}` | Applies the modifier to the element when `min-width: 1200px` (`up`) or `max-width: 1200px` (`down`). **Deprecated** — Use the `ion-display-xl-{modifier}` classes instead. |
## Content Space
-### Element Padding
+### Padding
The padding class sets the padding area of an element. The padding area is the space between the content of the element and its border.
@@ -276,7 +290,7 @@ The default amount of `padding` to be applied is `16px` and is set by the `--ion
| `.ion-padding-horizontal` | `padding: 0 16px` | Applies padding to the left and right. |
| `.ion-no-padding` | `padding: 0` | Applies no padding to all sides. |
-### Element Margin
+### Margin
The margin area extends the border area with an empty area used to separate the element from its neighbors.
@@ -326,146 +340,54 @@ The default amount of `margin` to be applied is `16px` and is set by the `--ion-
| `.ion-margin-horizontal` | `margin: 0 16px` | Applies margin to the left and right. |
| `.ion-no-margin` | `margin: 0` | Applies no margin to all sides. |
-## Flex Properties
+## Flex Container Properties
+
+Flexbox properties are divided into two categories: **container properties** that control the layout of all flex items, and **item properties** that control individual flex items. See [Flex Item Properties](#flex-item-properties) for item-level alignment.
-### Flex Container Properties
+### Align Items
-```html
-
-
-
-
1 of 2
-
-
-
2 of 2
-
-
+The [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) CSS property sets the [align-self](#align-self) value on all direct children as a group. In flexbox, it controls the alignment of items on the cross axis. In grid layout, it controls the alignment of items on the block axis within their grid areas.
-
-
-
1 of 2
-
-
-
2 of 2
-
-
+
-
-
-
1 of 2
-
-
-
2 of 2
-
-
+Ionic provides the following utility classes for `align-items`:
-
-
-
1 of 2
-
-
-
2 of 2
-
-
+| Class | Style Rule | Description |
+| --------------------------- | ------------------------- | ---------------------------------------------------- |
+| `.ion-align-items-start` | `align-items: flex-start` | Items are packed toward the start on the cross axis. |
+| `.ion-align-items-end` | `align-items: flex-end` | Items are packed toward the end on the cross axis. |
+| `.ion-align-items-center` | `align-items: center` | Items are centered along the cross axis. |
+| `.ion-align-items-baseline` | `align-items: baseline` | Items are aligned so that their baselines align. |
+| `.ion-align-items-stretch` | `align-items: stretch` | Items are stretched to fill the container. |
-
-
-
1 of 2
-
-
-
2 of 2
-
-
+### Align Content
-
-
-
1 of 2
-
-
-
2 of 2
-
-
-
+The [align-content](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content) CSS property sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.
-
-
-
-
1 of 4
-
-
-
2 of 4
-
-
-
3 of 4
-
-
-
4 of 4 # # #
-
-
+This property has no effect on single line flex containers (i.e., ones with `flex-wrap: nowrap`).
-
-
-
1 of 4
-
-
-
2 of 4
-
-
-
3 of 4
-
-
-
4 of 4 # # #
-
-
+
-
-
-
1 of 4
-
-
-
2 of 4
-
-
-
3 of 4
-
-
-
4 of 4 # # #
-
-
+Ionic provides the following utility classes for `align-content`:
-
-
-
1 of 4
-
-
-
2 of 4
-
-
-
3 of 4
-
-
-
4 of 4 # # #
-
-
+| Class | Style Rule | Description |
+| ---------------------------- | ------------------------------ | ---------------------------------------------------------- |
+| `.ion-align-content-start` | `align-content: flex-start` | Lines are packed toward the start of the cross axis. |
+| `.ion-align-content-end` | `align-content: flex-end` | Lines are packed toward the end of the cross axis. |
+| `.ion-align-content-center` | `align-content: center` | Lines are centered along the cross axis. |
+| `.ion-align-content-stretch` | `align-content: stretch` | Lines are stretched to fill the container. |
+| `.ion-align-content-between` | `align-content: space-between` | Lines are evenly distributed on the cross axis. |
+| `.ion-align-content-around` | `align-content: space-around` | Lines are evenly distributed with equal space around them. |
-
-
-
1 of 4
-
-
-
2 of 4
-
-
-
3 of 4
-
-
-
4 of 4 # # #
-
-
-
-```
+### Justify Content
+
+The [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) CSS property defines how the browser distributes space between and around content items along the main axis of a flex container and the inline axis of grid and multi-column containers.
+
+
+
+Ionic provides the following utility classes for `justify-content`:
| Class | Style Rule | Description |
| ------------------------------ | -------------------------------- | --------------------------------------------------------------------------- |
@@ -475,35 +397,77 @@ The default amount of `margin` to be applied is `16px` and is set by the `--ion-
| `.ion-justify-content-around` | `justify-content: space-around` | Items are evenly distributed on the main axis with equal space around them. |
| `.ion-justify-content-between` | `justify-content: space-between` | Items are evenly distributed on the main axis. |
| `.ion-justify-content-evenly` | `justify-content: space-evenly` | Items are distributed so that the spacing between any two items is equal. |
-| `.ion-align-items-start` | `align-items: flex-start` | Items are packed toward the start on the cross axis. |
-| `.ion-align-items-end` | `align-items: flex-end` | Items are packed toward the end on the cross axis. |
-| `.ion-align-items-center` | `align-items: center` | Items are centered along the cross axis. |
-| `.ion-align-items-baseline` | `align-items: baseline` | Items are aligned so that their baselines align. |
-| `.ion-align-items-stretch` | `align-items: stretch` | Items are stretched to fill the container. |
-| `.ion-nowrap` | `flex-wrap: nowrap` | Items will all be on one line. |
-| `.ion-wrap` | `flex-wrap: wrap` | Items will wrap onto multiple lines, from top to bottom. |
-| `.ion-wrap-reverse` | `flex-wrap: wrap-reverse` | Items will wrap onto multiple lines, from bottom to top. |
-### Flex Item Properties
+### Flex Direction
-```html
-
-
-
-
+
+
+
+ Truncated with ellipsis by default
+
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
+
Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+
+
+
+
+
diff --git a/static/usage/v8/radio/label-wrap/index.md b/static/usage/v8/radio/label-wrap/index.md
new file mode 100644
index 00000000000..95f743485e5
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/index.md
@@ -0,0 +1,34 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+
+import react_main_tsx from './react/main_tsx.md';
+import react_main_css from './react/main_css.md';
+
+import vue from './vue.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/v8/radio/label-wrap/javascript.md b/static/usage/v8/radio/label-wrap/javascript.md
new file mode 100644
index 00000000000..1bce1a8fd7a
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/javascript.md
@@ -0,0 +1,27 @@
+```html
+
+
+
+ Truncated with ellipsis by default
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/radio/label-wrap/react/main_css.md b/static/usage/v8/radio/label-wrap/react/main_css.md
new file mode 100644
index 00000000000..ec109440a50
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/react/main_css.md
@@ -0,0 +1,9 @@
+```css
+ion-list {
+ width: 250px;
+}
+
+ion-radio.wrapped::part(label) {
+ white-space: normal;
+}
+```
diff --git a/static/usage/v8/radio/label-wrap/react/main_tsx.md b/static/usage/v8/radio/label-wrap/react/main_tsx.md
new file mode 100644
index 00000000000..25b4d4618dc
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/react/main_tsx.md
@@ -0,0 +1,29 @@
+```tsx
+import React from 'react';
+import { IonList, IonItem, IonRadio, IonRadioGroup } from '@ionic/react';
+
+import './main.css';
+
+function Example() {
+ return (
+
+
+
+ Truncated with ellipsis by default
+
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
+
Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+ );
+}
+export default Example;
+```
diff --git a/static/usage/v8/radio/label-wrap/vue.md b/static/usage/v8/radio/label-wrap/vue.md
new file mode 100644
index 00000000000..ecabbadb8b1
--- /dev/null
+++ b/static/usage/v8/radio/label-wrap/vue.md
@@ -0,0 +1,38 @@
+```html
+
+
+
+
+ Truncated with ellipsis by default
+
+
+ Wrapping with text-wrap applied to label shadow part
+
+
+
+
Wrapping with ion-text-wrap class applied wrapper element
+
+
+
+
+
+
+
+
+
+```
diff --git a/static/usage/v8/reorder/basic/angular/example_component_html.md b/static/usage/v8/reorder/basic/angular/example_component_html.md
index 60795eaa3ff..8b1294bd101 100644
--- a/static/usage/v8/reorder/basic/angular/example_component_html.md
+++ b/static/usage/v8/reorder/basic/angular/example_component_html.md
@@ -2,7 +2,7 @@
-
+ Item 1
diff --git a/static/usage/v8/reorder/basic/angular/example_component_ts.md b/static/usage/v8/reorder/basic/angular/example_component_ts.md
index 541fd9c6df3..5553891178a 100644
--- a/static/usage/v8/reorder/basic/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/basic/angular/example_component_ts.md
@@ -1,12 +1,12 @@
```ts
import { Component } from '@angular/core';
import {
- ItemReorderEventDetail,
IonItem,
IonLabel,
IonList,
IonReorder,
IonReorderGroup,
+ ReorderEndCustomEvent,
} from '@ionic/angular/standalone';
@Component({
@@ -16,14 +16,14 @@ import {
imports: [IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
})
export class ExampleComponent {
- handleReorder(event: CustomEvent) {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
- // by the reorder group
+ // by the reorder group.
event.detail.complete();
}
}
diff --git a/static/usage/v8/reorder/basic/demo.html b/static/usage/v8/reorder/basic/demo.html
index f9afb7d750a..7b8abca0b96 100644
--- a/static/usage/v8/reorder/basic/demo.html
+++ b/static/usage/v8/reorder/basic/demo.html
@@ -11,7 +11,7 @@
@@ -56,14 +56,14 @@
diff --git a/static/usage/v8/reorder/basic/javascript.md b/static/usage/v8/reorder/basic/javascript.md
index fe805d10fc6..4b07e8ad210 100644
--- a/static/usage/v8/reorder/basic/javascript.md
+++ b/static/usage/v8/reorder/basic/javascript.md
@@ -32,14 +32,14 @@
diff --git a/static/usage/v8/reorder/basic/react.md b/static/usage/v8/reorder/basic/react.md
index abe3b187294..397ebc395d7 100644
--- a/static/usage/v8/reorder/basic/react.md
+++ b/static/usage/v8/reorder/basic/react.md
@@ -1,23 +1,23 @@
```tsx
import React from 'react';
-import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
function Example() {
- function handleReorder(event: CustomEvent) {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
- // by the reorder group
+ // by the reorder group.
event.detail.complete();
}
return (
{/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-
+ Item 1
diff --git a/static/usage/v8/reorder/basic/vue.md b/static/usage/v8/reorder/basic/vue.md
index 0ac2374089f..285a1c347be 100644
--- a/static/usage/v8/reorder/basic/vue.md
+++ b/static/usage/v8/reorder/basic/vue.md
@@ -2,7 +2,7 @@
-
+ Item 1
@@ -32,24 +32,24 @@
diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
index 6d1fb8960bd..cc6692c862d 100644
--- a/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
+++ b/static/usage/v8/reorder/custom-icon/angular/example_component_html.md
@@ -2,7 +2,7 @@
-
+ Item 1
diff --git a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
index e9bdafd6df8..4d0472c0bd3 100644
--- a/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-icon/angular/example_component_ts.md
@@ -1,13 +1,13 @@
```ts
import { Component } from '@angular/core';
import {
- ItemReorderEventDetail,
IonIcon,
IonItem,
IonLabel,
IonList,
IonReorder,
IonReorderGroup,
+ ReorderEndCustomEvent,
} from '@ionic/angular/standalone';
import { addIcons } from 'ionicons';
@@ -29,14 +29,14 @@ export class ExampleComponent {
addIcons({ pizza });
}
- handleReorder(event: CustomEvent) {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
- // by the reorder group
+ // by the reorder group.
event.detail.complete();
}
}
diff --git a/static/usage/v8/reorder/custom-icon/demo.html b/static/usage/v8/reorder/custom-icon/demo.html
index ab2c55b9423..b089815bd07 100644
--- a/static/usage/v8/reorder/custom-icon/demo.html
+++ b/static/usage/v8/reorder/custom-icon/demo.html
@@ -11,7 +11,7 @@
@@ -66,14 +66,14 @@
diff --git a/static/usage/v8/reorder/custom-icon/javascript.md b/static/usage/v8/reorder/custom-icon/javascript.md
index d7aa87d8f64..8535da7544a 100644
--- a/static/usage/v8/reorder/custom-icon/javascript.md
+++ b/static/usage/v8/reorder/custom-icon/javascript.md
@@ -42,14 +42,14 @@
diff --git a/static/usage/v8/reorder/custom-icon/javascript/index_html.md b/static/usage/v8/reorder/custom-icon/javascript/index_html.md
index d7aa87d8f64..8535da7544a 100644
--- a/static/usage/v8/reorder/custom-icon/javascript/index_html.md
+++ b/static/usage/v8/reorder/custom-icon/javascript/index_html.md
@@ -42,14 +42,14 @@
diff --git a/static/usage/v8/reorder/custom-icon/react.md b/static/usage/v8/reorder/custom-icon/react.md
index 9103db6029d..f5fe620035b 100644
--- a/static/usage/v8/reorder/custom-icon/react.md
+++ b/static/usage/v8/reorder/custom-icon/react.md
@@ -1,24 +1,24 @@
```tsx
import React from 'react';
-import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ItemReorderEventDetail } from '@ionic/react';
+import { IonIcon, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup, ReorderEndCustomEvent } from '@ionic/react';
import { pizza } from 'ionicons/icons';
function Example() {
- function handleReorder(event: CustomEvent) {
+ function handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
- // by the reorder group
+ // by the reorder group.
event.detail.complete();
}
return (
{/* The reorder gesture is disabled by default, enable it to drag and drop items */}
-
+ Item 1
diff --git a/static/usage/v8/reorder/custom-icon/vue.md b/static/usage/v8/reorder/custom-icon/vue.md
index 87d77e33048..eec6b5222a9 100644
--- a/static/usage/v8/reorder/custom-icon/vue.md
+++ b/static/usage/v8/reorder/custom-icon/vue.md
@@ -2,7 +2,7 @@
-
+ Item 1
@@ -42,24 +42,24 @@
diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
index 2296a5506c4..73fc3967021 100644
--- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
+++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_html.md
@@ -4,7 +4,7 @@
-
+ Item 1
diff --git a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
index bdd83c0417f..84dedb755b1 100644
--- a/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
+++ b/static/usage/v8/reorder/custom-scroll-target/angular/example_component_ts.md
@@ -1,7 +1,7 @@
```ts
import { Component } from '@angular/core';
import {
- ItemReorderEventDetail,
+ ReorderEndCustomEvent,
IonContent,
IonItem,
IonLabel,
@@ -17,14 +17,14 @@ import {
imports: [IonContent, IonItem, IonLabel, IonList, IonReorder, IonReorderGroup],
})
export class ExampleComponent {
- handleReorder(event: CustomEvent) {
+ handleReorderEnd(event: ReorderEndCustomEvent) {
// The `from` and `to` properties contain the index of the item
// when the drag started and ended, respectively
console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
// Finish the reorder and position the item in the DOM based on
// where the gesture ended. This method can also be called directly
- // by the reorder group
+ // by the reorder group.
event.detail.complete();
}
}
diff --git a/static/usage/v8/reorder/custom-scroll-target/demo.html b/static/usage/v8/reorder/custom-scroll-target/demo.html
index 760fb525d79..fb66a69e0ce 100644
--- a/static/usage/v8/reorder/custom-scroll-target/demo.html
+++ b/static/usage/v8/reorder/custom-scroll-target/demo.html
@@ -10,16 +10,17 @@
+
+
+
+
+
+
.default})
-### Flex Container Properties
+### Align Items
-```html
-.default})
- .default})
- .default})
+
+Ionic provides the following utility classes for `justify-content`:
| Class | Style Rule | Description |
| ------------------------------ | -------------------------------- | --------------------------------------------------------------------------- |
@@ -475,35 +397,77 @@ The default amount of `margin` to be applied is `16px` and is set by the `--ion-
| `.ion-justify-content-around` | `justify-content: space-around` | Items are evenly distributed on the main axis with equal space around them. |
| `.ion-justify-content-between` | `justify-content: space-between` | Items are evenly distributed on the main axis. |
| `.ion-justify-content-evenly` | `justify-content: space-evenly` | Items are distributed so that the spacing between any two items is equal. |
-| `.ion-align-items-start` | `align-items: flex-start` | Items are packed toward the start on the cross axis. |
-| `.ion-align-items-end` | `align-items: flex-end` | Items are packed toward the end on the cross axis. |
-| `.ion-align-items-center` | `align-items: center` | Items are centered along the cross axis. |
-| `.ion-align-items-baseline` | `align-items: baseline` | Items are aligned so that their baselines align. |
-| `.ion-align-items-stretch` | `align-items: stretch` | Items are stretched to fill the container. |
-| `.ion-nowrap` | `flex-wrap: nowrap` | Items will all be on one line. |
-| `.ion-wrap` | `flex-wrap: wrap` | Items will wrap onto multiple lines, from top to bottom. |
-| `.ion-wrap-reverse` | `flex-wrap: wrap-reverse` | Items will wrap onto multiple lines, from bottom to top. |
-### Flex Item Properties
+### Flex Direction
-```html
-.default})
+
+Ionic provides the following utility classes for `flex-direction`:
+
+| Class | Style Rule | Description |
+| -------------------------- | -------------------------------- | ----------------------------------------------------------------- |
+| `.ion-flex-row` | `flex-direction: row` | Items are placed in the same direction as the text direction. |
+| `.ion-flex-row-reverse` | `flex-direction: row-reverse` | Items are placed in the opposite direction as the text direction. |
+| `.ion-flex-column` | `flex-direction: column` | Items are placed vertically. |
+| `.ion-flex-column-reverse` | `flex-direction: column-reverse` | Items are placed vertically in reverse order. |
+
+### Flex Wrap
+
+The [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
+
+.default})
+
+Ionic provides the following utility classes for `flex-wrap`:
+
+| Class | Style Rule | Description |
+| ------------------------ | ------------------------- | -------------------------------------------------------- |
+| `.ion-flex-nowrap` | `flex-wrap: nowrap` | Items will all be on one line. |
+| `.ion-flex-wrap` | `flex-wrap: wrap` | Items will wrap onto multiple lines, from top to bottom. |
+| `.ion-flex-wrap-reverse` | `flex-wrap: wrap-reverse` | Items will wrap onto multiple lines, from bottom to top. |
+
+### Responsive Flex Container Classes
+
+All of the flex container classes listed above have additional classes to modify the properties based on the screen size. Instead of the base class name, use `{property}-{breakpoint}-{modifier}` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints).
+
+The table below shows the default behavior, where `{property}` is one of the following: `justify-content`, `align-content`, `align-items`, `flex`, or `flex-wrap`, and `{modifier}` is the corresponding value as described above.
+
+| Class | Description |
+| ------------------------------- | ------------------------------------------------------------- |
+| `.ion-{property}-{modifier}` | Applies the modifier to the element on all screen sizes. |
+| `.ion-{property}-sm-{modifier}` | Applies the modifier to the element when `min-width: 576px`. |
+| `.ion-{property}-md-{modifier}` | Applies the modifier to the element when `min-width: 768px`. |
+| `.ion-{property}-lg-{modifier}` | Applies the modifier to the element when `min-width: 992px`. |
+| `.ion-{property}-xl-{modifier}` | Applies the modifier to the element when `min-width: 1200px`. |
+
+### Deprecated Classes
+
+:::warning Deprecation Notice
+
+The following classes are deprecated and will be removed in the next major release. Use the recommended `.ion-flex-*` classes instead.
+
+:::
+
+| Class | Description |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `.ion-nowrap` | Items will all be on one line..default})
+
+Ionic provides the following utility classes for `align-self`:
| Class | Style Rule | Description |
| -------------------------- | ------------------------ | ---------------------------------------------------------------------- |
@@ -514,9 +478,90 @@ The default amount of `margin` to be applied is `16px` and is set by the `--ion-
| `.ion-align-self-stretch` | `align-self: stretch` | Item is stretched to fill the container. |
| `.ion-align-self-auto` | `align-self: auto` | Item is positioned according to the parent's `align-items` value. |
+### Flex
+
+The [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) CSS property is a shorthand property for `flex-grow`, `flex-shrink` and `flex-basis`. It sets how a flex item will grow or shrink to fit the space available in its flex container.
+
+.default})
+
+Ionic provides the following utility classes for `flex`:
+
+| Class | Style Rule | Description |
+| ------------------- | --------------- | ----------------------------------------------------------- |
+| `.ion-flex-1` | `flex: 1` | Item grows and shrinks equally with other flex items. |
+| `.ion-flex-auto` | `flex: auto` | Item grows and shrinks based on its content size. |
+| `.ion-flex-initial` | `flex: initial` | Item shrinks to its minimum content size but does not grow. |
+| `.ion-flex-none` | `flex: none` | Item does not grow or shrink. |
+
+### Flex Grow
+
+The [flex-grow](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow) CSS property sets the flex grow factor, which specifies how much of the flex container's positive free space, if any, should be assigned to the flex item's main size.
+
+.default})
+
+Ionic provides the following utility classes for `flex-grow`:
+
+| Class | Style Rule | Description |
+| ------------------ | -------------- | -------------------------------------------------- |
+| `.ion-flex-grow-0` | `flex-grow: 0` | Item does not grow beyond its content size. |
+| `.ion-flex-grow-1` | `flex-grow: 1` | Item grows to fill available space proportionally. |
+
+### Flex Shrink
+
+The [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink) CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their `flex-shrink` value. Each flex line's negative free space is distributed between the line's flex items that have a `flex-shrink` value greater than `0`.
+
+.default})
+
+Ionic provides the following utility classes for `flex-shrink`:
+
+| Class | Style Rule | Description |
+| -------------------- | ---------------- | -------------------------------------------------------- |
+| `.ion-flex-shrink-0` | `flex-shrink: 0` | Item does not shrink below its content size. |
+| `.ion-flex-shrink-1` | `flex-shrink: 1` | Item shrinks proportionally when container is too small. |
+
+### Order
+
+The [order](https://developer.mozilla.org/en-US/docs/Web/CSS/order) CSS property sets the order to lay out an item in a flex or grid container. Items in a container are sorted by ascending `order` value and then by their source code order. Items not given an explicit `order` value are assigned the default value of `0`.
+
+.default})
+
+Ionic provides the following utility classes for `order`:
+
+| Class | Style Rule | Description |
+| ------------------ | ----------- | ----------------------------------------- |
+| `.ion-order-first` | `order: -1` | Item appears first in the flex container. |
+| `.ion-order-0` | `order: 0` | Item appears in its natural order. |
+| `.ion-order-1` | `order: 1` | Item appears after items with order 0. |
+| `.ion-order-2` | `order: 2` | Item appears after items with order 1. |
+| `.ion-order-3` | `order: 3` | Item appears after items with order 2. |
+| `.ion-order-4` | `order: 4` | Item appears after items with order 3. |
+| `.ion-order-5` | `order: 5` | Item appears after items with order 4. |
+| `.ion-order-6` | `order: 6` | Item appears after items with order 5. |
+| `.ion-order-7` | `order: 7` | Item appears after items with order 6. |
+| `.ion-order-8` | `order: 8` | Item appears after items with order 7. |
+| `.ion-order-9` | `order: 9` | Item appears after items with order 8. |
+| `.ion-order-10` | `order: 10` | Item appears after items with order 9. |
+| `.ion-order-11` | `order: 11` | Item appears after items with order 10. |
+| `.ion-order-12` | `order: 12` | Item appears after items with order 11. |
+| `.ion-order-last` | `order: 13` | Item appears last in the flex container. |
+
+### Responsive Flex Item Classes
+
+All of the flex item classes listed above have additional classes to modify the properties based on the screen size. Instead of the base class name, use `{property}-{breakpoint}-{modifier}` to only use the class on specific screen sizes, where `{breakpoint}` is one of the breakpoint names listed in [Ionic Breakpoints](#ionic-breakpoints).
+
+The table below shows the default behavior, where `{property}` is one of the following: `align-self`, `flex`, `flex-grow`, `flex-shrink`, or `order`, and `{modifier}` is the corresponding value as described above.
+
+| Class | Description |
+| ------------------------------- | ------------------------------------------------------------- |
+| `.ion-{property}-{modifier}` | Applies the modifier to the element on all screen sizes. |
+| `.ion-{property}-sm-{modifier}` | Applies the modifier to the element when `min-width: 576px`. |
+| `.ion-{property}-md-{modifier}` | Applies the modifier to the element when `min-width: 768px`. |
+| `.ion-{property}-lg-{modifier}` | Applies the modifier to the element when `min-width: 992px`. |
+| `.ion-{property}-xl-{modifier}` | Applies the modifier to the element when `min-width: 1200px`. |
+
## Border Display
-The border display CSS property determines if the border should be visible or not. The property can be applied to the ion-header and the ion-footer.
+The `.ion-no-border` utility class can be used to remove borders from Ionic components. This class can be applied to the `ion-header` and `ion-footer` components.
```html