Skip to content

Commit 712ff81

Browse files
brandyscarneybrandyscarney
committed
feat(list): add list headers and item dividers as items
- `ion-list-header` and `ion-item-divider` now take advantage of the same content projection as the `ion-item` - they are still styled as list headers and item dividers - added docs and demos on this addition closes #5561
1 parent 4aa322d commit 712ff81

File tree

25 files changed

+402
-110
lines changed

25 files changed

+402
-110
lines changed

‎demos/item/index.ts

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
1-
import {Component} from '@angular/core';
2-
import {ionicBootstrap} from 'ionic-angular';
1+
import { Component } from '@angular/core';
2+
3+
import { ionicBootstrap } from 'ionic-angular';
4+
5+
@Component({
6+
templateUrl: 'main.html'
7+
})
8+
class ApiDemoPage {
9+
10+
}
311

4-
// Uses the list's demo but passes the demo var to change the title
512
@Component({
6-
templateUrl: '../list/main.html'
13+
template: '<ion-nav [root]="root"></ion-nav>'
714
})
815
class ApiDemoApp {
9-
demo = "Item";
16+
root = ApiDemoPage;
1017
}
1118

1219
ionicBootstrap(ApiDemoApp);

‎demos/item/main.html

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<ion-header>
2+
3+
<ion-toolbar>
4+
<ion-title>Item</ion-title>
5+
</ion-toolbar>
6+
7+
</ion-header>
8+
9+
10+
<ion-content class="outer-content">
11+
12+
<ion-list>
13+
<ion-list-header>
14+
Settings
15+
<button item-right clear>
16+
<ion-icon name="cog"></ion-icon>
17+
</button>
18+
</ion-list-header>
19+
20+
<ion-item-group>
21+
<ion-item>
22+
<ion-icon name="plane" item-left danger></ion-icon>
23+
<ion-label>Airplane Mode</ion-label>
24+
<ion-toggle secondary></ion-toggle>
25+
</ion-item>
26+
27+
<button ion-item>
28+
<ion-icon name="wifi" item-left primary></ion-icon>
29+
<ion-label>Wi-Fi</ion-label>
30+
<ion-note item-right>The Interwebz</ion-note>
31+
</button>
32+
33+
<button ion-item>
34+
<ion-icon name="bluetooth" item-left primary></ion-icon>
35+
<ion-label>Bluetooth</ion-label>
36+
<ion-note item-right>Off</ion-note>
37+
</button>
38+
</ion-item-group>
39+
40+
<ion-item-divider primary>
41+
Other Settings
42+
<button item-right outline light>Clear</button>
43+
</ion-item-divider>
44+
45+
<button ion-item>
46+
<ion-icon name="call" item-left secondary></ion-icon>
47+
<ion-label>Cellular</ion-label>
48+
</button>
49+
50+
<button ion-item>
51+
<ion-icon name="link" item-left secondary></ion-icon>
52+
<ion-label>Personal Hotspot</ion-label>
53+
<ion-note item-right>Off</ion-note>
54+
</button>
55+
</ion-list>
56+
57+
<ion-list radio-group>
58+
<ion-list-header>
59+
<ion-icon item-left name="phone-portrait"></ion-icon>
60+
Silence Phone
61+
</ion-list-header>
62+
63+
<ion-item>
64+
<ion-label dark>Always</ion-label>
65+
<ion-radio value="always" checked></ion-radio>
66+
</ion-item>
67+
<ion-item>
68+
<ion-label dark>Only while phone is locked</ion-label>
69+
<ion-radio value="locked"></ion-radio>
70+
</ion-item>
71+
</ion-list>
72+
73+
<ion-list>
74+
<ion-list-header>
75+
Apps Installed
76+
</ion-list-header>
77+
78+
<ion-item>
79+
<ion-icon name="ionic" item-left primary></ion-icon>
80+
<ion-label>Ionic View</ion-label>
81+
<button outline item-right>Uninstall</button>
82+
</ion-item>
83+
<ion-item>
84+
<ion-icon name="brush" item-left primary></ion-icon>
85+
<ion-label>Ionic Creator</ion-label>
86+
<button outline item-right>Uninstall</button>
87+
</ion-item>
88+
<ion-item>
89+
<ion-icon name="logo-octocat" item-left dark></ion-icon>
90+
<ion-label>Hubstruck</ion-label>
91+
<button outline item-right>Uninstall</button>
92+
</ion-item>
93+
<ion-item>
94+
<ion-icon name="paw" item-left danger></ion-icon>
95+
<ion-label>Barkpark</ion-label>
96+
<button outline item-right>Uninstall</button>
97+
</ion-item>
98+
</ion-list>
99+
100+
</ion-content>

‎demos/list/index.ts

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
1-
import {Component} from '@angular/core';
2-
import {ionicBootstrap} from 'ionic-angular';
1+
import { Component } from '@angular/core';
32

3+
import { ionicBootstrap } from 'ionic-angular';
44

55
@Component({
66
templateUrl: 'main.html'
77
})
8+
class ApiDemoPage {
9+
10+
}
11+
12+
@Component({
13+
template: '<ion-nav [root]="root"></ion-nav>'
14+
})
815
class ApiDemoApp {
9-
demo = "List";
16+
root = ApiDemoPage;
1017
}
1118

1219
ionicBootstrap(ApiDemoApp);

‎demos/list/main.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<ion-header>
22

33
<ion-toolbar>
4-
<ion-title>{{demo}}</ion-title>
4+
<ion-title>List</ion-title>
55
</ion-toolbar>
66

77
</ion-header>

‎src/components/card/card.ios.scss

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -48,22 +48,14 @@ ion-card {
4848

4949
ion-list {
5050
margin-bottom: 0;
51-
52-
.item {
53-
padding-right: 0;
54-
}
55-
56-
ion-label {
57-
padding: 0;
58-
}
5951
}
6052

6153
> .item:last-child,
6254
> .item-wrapper:last-child .item {
6355
border-bottom: 0;
6456
}
6557

66-
.item-inner {
58+
.item .item-inner {
6759
border: 0;
6860
}
6961

‎src/components/card/card.md.scss

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -50,22 +50,14 @@ ion-card {
5050

5151
ion-list {
5252
margin-bottom: 0;
53-
54-
ion-label {
55-
padding: 0;
56-
}
57-
58-
.item-inner {
59-
border-bottom: 1px solid $list-md-border-color;
60-
}
6153
}
6254

6355
> .item:last-child,
6456
> .item-wrapper:last-child .item {
6557
border-bottom: 0;
6658
}
6759

68-
.item-inner {
60+
.item .item-inner {
6961
border: 0;
7062
}
7163

‎src/components/card/card.wp.scss

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -51,22 +51,14 @@ ion-card {
5151

5252
ion-list {
5353
margin-bottom: 0;
54-
55-
ion-label {
56-
padding: 0;
57-
}
58-
59-
.item-inner {
60-
border-bottom: 1px solid $list-wp-border-color;
61-
}
6254
}
6355

6456
> .item:last-child,
6557
> .item-wrapper:last-child .item {
6658
border-bottom: 0;
6759
}
6860

69-
.item-inner {
61+
.item .item-inner {
7062
border: 0;
7163
}
7264

‎src/components/input/test/clear-input/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import {ionicBootstrap} from '../../../../../src';
77
})
88
class E2EPage {
99
myValue = 'value';
10+
11+
clicked() {
12+
console.log("clicked button");
13+
}
1014
}
1115

1216
@Component({

‎src/components/input/test/clear-input/main.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,16 @@
1212
<ion-list>
1313

1414
<ion-item>
15-
<ion-label>Text 1:</ion-label>
15+
<ion-label>Input Clear:</ion-label>
1616
<ion-input class="e2eClearInput" [(ngModel)]="myValue" clearInput></ion-input>
1717
</ion-item>
1818

19+
<ion-item>
20+
<ion-label>Button:</ion-label>
21+
<ion-input class="e2eClearInput" [(ngModel)]="myValue"></ion-input>
22+
<button item-right (click)="clicked()">Button</button>
23+
</ion-item>
24+
1925
</ion-list>
2026

2127
</ion-content>

‎src/components/item/item.ios.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ $item-ios-sliding-content-background: $list-ios-background-color !default;
8888
transition-duration: 0ms;
8989
}
9090

91-
.item-inner {
91+
.item .item-inner {
9292
padding-right: ($item-ios-padding-right / 2);
9393

9494
border-bottom: 1px solid $list-ios-border-color;
@@ -211,7 +211,7 @@ ion-item-group {
211211
// --------------------------------------------------
212212

213213
ion-item-divider {
214-
padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
214+
padding-left: $item-ios-padding-left;
215215

216216
color: $item-ios-divider-color;
217217
background-color: $item-ios-divider-background;

0 commit comments

Comments
 (0)