feat(col): modernizing Grid component #30658
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
bot
added
package: core
core/src/components/col/col.scss
Outdated
| /** | ||
| * @prop --col-unit-size: The size of each Column unit. | ||
| */ | ||
| --col-unit-size: calc((100% - (var(--ion-grid-columns, 12) - 1) * var(--ion-grid-gap)) / var(--ion-grid-columns, 12)); |
There was a problem hiding this comment.
Would it make sense to instead of 12, add a --grid-type variable here, that by default would be 12?
There was a problem hiding this comment.
But what where would --grid-type variable come from?
I can also simply delete the the constant 12, as the variable --ion-grid-columns will be initialized with 12.
There was a problem hiding this comment.
Yes I was suggesting something like that, just create a variable to leave it open for the future, with default value set to 12. If anyone wants they can change that variable to also change the grid columns
There was a problem hiding this comment.
As discussed, this is an existing ionic variable --ion-grid-columns. We are just using it. The default 12, was removed from the implementation. Thank you for the feedback.
| <h4 id="version-9x-grid">Grid</h4> | ||
| - The properties `pull` and `push`, have been removed. The similar look can be achieved with the newly added property `order`. | ||
|
|
||
| <h5>Example 1: Swap two columns</h5> |
There was a problem hiding this comment.
Can we add an example for migrating this:
<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>| <ion-col size="3" order="1">2</ion-col> | ||
| </ion-row> | ||
| </ion-grid> | ||
| ``` |
There was a problem hiding this comment.
Can we add an example for migrating size & push/pull with breakpoints:
<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>Co-authored-by: Brandy Smith <[email protected]>
What is the current behavior?
The existing grid component (
ion-grid,ion-row, andion-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?
--ion-grid-gap: this new CSS variable, will indicate the gap size in the grid. Defaults to0px- the current value.ion-col: has a new way to calculate the width of the column. Additionally a new propertyorder(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?
The properties
pullandpushfromion-col, have been removed. The functionality achieved with them, is now achieved with the new propertyorderand the existingsize. More information and migration examples can be read inBREAKING.mdfile.Other information