ionic-team / ionic-team/ionic-framework
feat: ion-list on ios should have top and bottom borders
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 14 小时
- 30 天内合并 PR
- 50
描述
# 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
```
***My current workaround***
### .html
```
example@mail.net
```
### .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
```
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 iOS 模式的 Ionic 5 应用中提供的 ion-list 和 ion-item 代码片段开始,并将其顶部和底部边框与截图进行比较。完成的标准是:默认列表的顶部和底部边框均为全宽,同时 item 分隔线保持内缩,且不使用报告中的 workaround。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- angular, typescript
- 领域
- frontend, mobile
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 停滞
- 描述清晰度
- 基本清楚
- 新手友好度
- 35/100