Skip to content

BREAKING.md

Latest commit

 

History

History
137 lines (118 loc) · 3.97 KB

BREAKING.md

File metadata and controls

137 lines (118 loc) · 3.97 KB

Breaking Changes

This is a comprehensive list of the breaking changes introduced in the major version releases of Ionic Framework.

Versions

Version 9.x

Components

Button

  • The border-radius of the ios and md button now defaults to 6px and 999px instead of 14px and 4px, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the shape to "soft" for md and override the --border-radius CSS variable for ios to 14px, or set it to a different value entirely.

Card

  • The border-radius of the ios and md card now defaults to 14px and 12px instead of 8px and 4px, respectively, in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the shape to "soft", or override the --border-radius CSS variable to specify a different value.

Chip

  • The border-radius of the ios and md chip now defaults to 10px and 8px, respectively, instead of 16px in accordance with the iOS and Material Design 3 guidelines. To revert to the previous appearance, set the shape to "round", or override the --border-radius CSS variable to specify a different value.

Grid

  • The properties pull and push have been deprecated and no longer work. A similar look can be achieved with the newly added property order.
Example 1: Swap two columns

Version up to 8.x

<ion-grid>
  <ion-row>
    <ion-col push="4">1</ion-col>
    <ion-col pull="4">2</ion-col>
    <ion-col>3</ion-col>
  </ion-row>
</ion-grid>

Version 9.x+

<ion-grid>
  <ion-row>
    <ion-col order="2">1</ion-col>
    <ion-col order="1">2</ion-col>
    <ion-col order="3">3</ion-col>
  </ion-row>
</ion-grid>
Example 2: Reorder columns with specific sizes
To reorder two columns where column 1 has `size="9" push="3"` and column 2 has `size="3" pull="9"`:

Version up to 8.x

<ion-grid>
  <ion-row>
    <ion-col push="3">1</ion-col>
    <ion-col pull="9">2</ion-col>
  </ion-row>
</ion-grid>

Version 9.x+

<ion-grid>
  <ion-row>
    <ion-col order="2">1</ion-col>
    <ion-col size="3" order="1">2</ion-col>
  </ion-row>
</ion-grid>
Example 3: Push
```html
ion-col push 1
ion-col push 1
``` **Version 9.x+** ```html
ion-col size="auto" offset="1"
ion-col size="auto"
```
Example 4: Push and Pull
```html
ion-col size="3" size-md="6" push="9" push-md="6"
ion-col size="9" size-md="6" pull="3" pull-md="6"
``` **Version 9.x+** ```html
ion-col size="auto" order="2" order-md="2"
ion-col size="auto" order="1" order-md="1"
```