ionic-team / ionic-team/ionic-framework

feat: ion-list on ios should have top and bottom borders

Đang mở
#21,656 2 bình luận 0 reaction 0 người được giao Xem trên GitHub
package: core type: feature request
Ngôn ngữ chính
TypeScript
Star
52.7k
Fork
13.3k
Merge trung bình
1 ngày 15 giờ
Pull request đã merge (30 ngày)
51

Mô tả

# Bug Report

**Ionic version:**

[ ] **4.x**
[x] **5.x**

**Current behavior:**

In native IOS apps there are two full lines on top and bottom of a list. In Ionic the top line is completely missing and bottom line is inset.

### Native IOS list

### Ionic list

**Expected behavior:**

Without providing any attributes to ion-list and ion-item, the default list should look like in first screenshot:
- line on top and bottom of a list is full
- item lines are inset

**Steps to reproduce:**

**Related code:**

Just copy paste this snippet to latest Ionic version.

```



example@mail.net

25



```

***My current workaround***

### .html

```





example@mail.net
25




```

### .css

```
.ios-list {
border: solid;
border-color: var(
--ion-item-border-color,
var(--ion-border-color, var(--ion-color-step-250, #c8c7cc))
);
border-width: 0.55px 0px 0.55px 0px;
}
```
**Ionic info:**

```
Ionic:

Ionic CLI : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics : 8.3.26
@angular/cli : 9.1.7
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.0.1
@capacitor/core : 2.0.1

Utility:

cordova-res (update available: 0.15.1) : 0.14.0
native-run : not installed

System:

NodeJS : v12.16.0 (/usr/local/bin/node)
npm : 6.14.5
OS : macOS Catalina
```

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Hướng nghiên cứu

Start with the provided ion-list and ion-item snippet in an iOS-mode Ionic 5 app and compare its top and bottom borders with the screenshots. Done means the default list has full-width top and bottom borders while item separators remain inset, without the reported workaround.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Đánh giá

Công nghệ
angular, typescript
Lĩnh vực
frontend, mobile
Loại issue
Lỗi
Độ khó
3/5
Thời gian dự kiến
1-2 ngày
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
35/100

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.