ionic-team / ionic-team/ionic-framework
feat: Add row-gap/column-gap (gutters) to ion-grid/ion-row
- Ngôn ngữ chính
- TypeScript
- Star
- 52.7k
- Fork
- 13.3k
- Merge trung bình
- 1 ngày 14 giờ
- Pull request đã merge (30 ngày)
- 50
Mô tả
### 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_
Hướng dẫn đóng góp
Hướng nghiên cứu
Bắt đầu bằng cách xác định các phần triển khai của các component ion-grid và ion-row, đồng thời xem xét cách việc định kích thước ion-col hiện đang hoạt động. Xác định và xác thực hành vi row-gap và column-gap được yêu cầu, bao gồm các tên định kích thước được đề xuất, mà không làm hỏng các bố cục grid hiện có.
Do mô hình lập chỉ mục viết ra từ nội dung của issue.
Đánh giá
- Công nghệ
- typescript
- Lĩnh vực
- frontend
- Loại issue
- Tính năng
- Độ khó
- 5/5
- Thời gian dự kiến
- Hơn một tuần
- Mức độ hoạt động
- Đình trệ
- Độ rõ ràng
- Khá rõ ràng
- Mức phù hợp với người mới
- 38/100