ionic-team / ionic-team/ionic-framework

feat: Add row-gap/column-gap (gutters) to ion-grid/ion-row

Offen
#26,661 5 Kommentare 6 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
package: core type: feature request
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

`ion-grid` and related components don't provide an easy way to add space between items, something commonly found in other frameworks that have a layout grid, such as Bootstrap. Request is to add this.

### Describe the Use Case

It is very common in UI layouts to want items to size flush with the sides of their container while having space in-between them. This is not easy to do at all with ion-grid.

### Describe Preferred Solution

Leveraging existing sizing names, `tiny`, `small`, `medium`, etc.

``

Or

``

(Row gets row-gap because it can technically contain multiple rows)

### Describe Alternatives

The major problem with attempting add column gaps to ion-grid via custom styles in CSS, is that `ion-col` adds **inline styles** to size the width of the columns, which is horrible (refactor to set CSS variables instead please). It makes it impossible to identify the column size in a stylesheet to be able to work around it.

### Related Code

CSS

```
ion-row[column-gap] {
column-gap: var(--column-gap);
}
ion-row[column-gap] > ion-col {
/* Can't do anything here because ion-col uses inline styles to set widths */
}
ion-row[column-gap="small"] {
--column-gap: var(--ion-spacing-small);
}
ion-row[column-gap="medium"] {
--column-gap: var(--ion-spacing-medium);
}
```

Problem with this example, of course, is the inline styles on `ion-col` set a fixed width that cannot be modified because CSS cannot identify the original column size it was supposed to be.

I mean, some ugly hack like `ion-col[style*="4 / var(--ion-grid-columns"]` could be done, but that is just working around the current implementation; targeting attributes like this is extremely non-performant.

### Additional Information

_No response_

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.