mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 14:01:20 +08:00
feat(list): added no-borders attribute for lists
if you apply the no-borders attribute it will remove all borders inside of a list. Added a test case for showing this.
This commit is contained in:
@ -87,3 +87,12 @@ $list-ios-header-color: #333 !default;
|
|||||||
.list[inset] + .list[inset] {
|
.list[inset] + .list[inset] {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.hairlines .list[no-borders],
|
||||||
|
.list[no-borders] {
|
||||||
|
ion-header:after,
|
||||||
|
.item:before,
|
||||||
|
.item:after {
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -66,3 +66,11 @@ $list-md-header-color: #858585 !default;
|
|||||||
.list[inset] + .list[inset] {
|
.list[inset] + .list[inset] {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list[no-borders] {
|
||||||
|
ion-header:after,
|
||||||
|
.item:before,
|
||||||
|
.item:after {
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
0
ionic/components/list/test/no-borders/e2e.ts
Normal file
0
ionic/components/list/test/no-borders/e2e.ts
Normal file
7
ionic/components/list/test/no-borders/index.ts
Normal file
7
ionic/components/list/test/no-borders/index.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import {App} from 'ionic/ionic';
|
||||||
|
|
||||||
|
|
||||||
|
@App({
|
||||||
|
templateUrl: 'main.html'
|
||||||
|
})
|
||||||
|
class E2EApp {}
|
30
ionic/components/list/test/no-borders/main.html
Normal file
30
ionic/components/list/test/no-borders/main.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<ion-toolbar><ion-title>List No Borders</ion-title></ion-toolbar>
|
||||||
|
|
||||||
|
<ion-content class="outer-content">
|
||||||
|
<ion-list no-borders>
|
||||||
|
<ion-header>
|
||||||
|
List Header
|
||||||
|
</ion-header>
|
||||||
|
|
||||||
|
<ion-switch>
|
||||||
|
<icon wifi item-left></icon>
|
||||||
|
Wifi
|
||||||
|
</ion-switch>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<icon heart item-left></icon>
|
||||||
|
Affection
|
||||||
|
<ion-note item-right>
|
||||||
|
Very Little
|
||||||
|
</ion-note>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
<ion-item>
|
||||||
|
<icon home item-left></icon>
|
||||||
|
Home
|
||||||
|
<ion-note item-right>
|
||||||
|
Where the heart is
|
||||||
|
</ion-note>
|
||||||
|
</ion-item>
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
Reference in New Issue
Block a user