mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-06 06:09:31 +08:00
3cc0353d6b
<!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> The existing grid component (`ion-grid`, `ion-row`, and `ion-col`) in Ionic was developed several years ago and has not received significant updates since then. As a result, it does not leverage modern CSS features. For example, the gutter (spacing) between columns is implemented using the border property, which is an outdated technique. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - `--ion-grid-gap`: this new CSS variable, will indicate the gap size in the grid. Defaults to `0px` - the current value. - `ion-col`: has a new way to calculate the width of the column. Additionally a new property `order` (and responsive variants) was added, and will control the order of the column. - `ion-row`: uses the newly introduced custom property `--ion-grid-gap`. This property will indicate the gap size in the grid. ## Does this introduce a breaking change? - [x] Yes - [ ] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer for more information. --> The properties `pull` and `push` from `ion-col`, have been removed. The functionality achieved with them, is now achieved with the new property `order` and the existing `size`. More information and migration examples can be read in `BREAKING.md` file. ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com> Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Shane <shane@shanessite.net>
137 lines
4.0 KiB
Markdown
137 lines
4.0 KiB
Markdown
# Breaking Changes
|
|
|
|
This is a comprehensive list of the breaking changes introduced in the major version releases of Ionic Framework.
|
|
|
|
## Versions
|
|
|
|
- [Version 9.x](#version-9x)
|
|
- [Version 8.x](./BREAKING_ARCHIVE/v8.md)
|
|
- [Version 7.x](./BREAKING_ARCHIVE/v7.md)
|
|
- [Version 6.x](./BREAKING_ARCHIVE/v6.md)
|
|
- [Version 5.x](./BREAKING_ARCHIVE/v5.md)
|
|
- [Version 4.x](./BREAKING_ARCHIVE/v4.md)
|
|
- [Legacy](https://github.com/ionic-team/ionic-v3/blob/master/CHANGELOG.md)
|
|
|
|
## Version 9.x
|
|
|
|
- [Components](#version-9x-components)
|
|
- [Button](#version-9x-button)
|
|
- [Card](#version-9x-card)
|
|
- [Chip](#version-9x-chip)
|
|
- [Grid](#version-9x-grid)
|
|
|
|
<h2 id="version-9x-components">Components</h2>
|
|
|
|
<h4 id="version-9x-button">Button</h4>
|
|
|
|
- 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.
|
|
|
|
<h4 id="version-9x-card">Card</h4>
|
|
|
|
- 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.
|
|
|
|
<h4 id="version-9x-chip">Chip</h4>
|
|
|
|
- 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.
|
|
|
|
<h4 id="version-9x-grid">Grid</h4>
|
|
|
|
- The properties `pull` and `push` have been deprecated and no longer work. A similar look can be achieved with the newly added property `order`.
|
|
|
|
<h5>Example 1: Swap two columns</h5>
|
|
|
|
**Version up to 8.x**
|
|
```html
|
|
<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+**
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
<h5>Example 2: Reorder columns with specific sizes</h5>
|
|
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**
|
|
```html
|
|
<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+**
|
|
```html
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col order="2">1</ion-col>
|
|
<ion-col size="3" order="1">2</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
```
|
|
<h5>Example 3: Push</h5>
|
|
```html
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col size="auto" push="1">
|
|
<div>ion-col push 1</div>
|
|
</ion-col>
|
|
<ion-col size="auto" push="1">
|
|
<div>ion-col push 1</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
```
|
|
**Version 9.x+**
|
|
```html
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col size="auto" offset="1">
|
|
<div>ion-col size="auto" offset="1"</div>
|
|
</ion-col>
|
|
<ion-col size="auto">
|
|
<div>ion-col size="auto"</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
```
|
|
|
|
<h5>Example 4: Push and Pull</h5>
|
|
```html
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col size="3" size-md="6" push="9" push-md="6">
|
|
<div>ion-col size="3" size-md="6" push="9" push-md="6"</div>
|
|
</ion-col>
|
|
<ion-col size="9" size-md="6" pull="3" pull-md="6">
|
|
<div>ion-col size="9" size-md="6" pull="3" pull-md="6"</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
```
|
|
**Version 9.x+**
|
|
```html
|
|
<ion-grid>
|
|
<ion-row>
|
|
<ion-col size="auto" order="2" order-md="2">
|
|
<div>ion-col size="auto" order="2" order-md="2"</div>
|
|
</ion-col>
|
|
<ion-col size="auto" order="1" order-md="1">
|
|
<div>ion-col size="auto" order="1" order-md="1"</div>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-grid>
|
|
``` |