javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5363 from manucorporat/vertical-item-sliding

Browse Source 
feat(ion-item-sliding): style icons on top of text in an option button
This commit is contained in:
Adam Bradley
2016-02-09 22:28:49 -06:00
parent d1b92e6335 c8bb18f3e9
commit 14ca32f9f2
3 changed files with 32 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/button/button.scss
View File

@ -29,7 +29,7 @@ $button-round-border-radius: 64px !default;
@include appearance(none); @include appearance(none);
} }
span.button-inner { .button-inner {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;

14
ionic/components/item/item-sliding.scss
View File

@ -32,8 +32,20 @@ ion-item-options .button {
height: 100%; height: 100%;
} }
ion-item-sliding.active-slide { ion-item-options:not([icon-left]) .button-icon-left {
font-size: 14px;
.button-inner {
flex-direction: column;
}
ion-icon {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0.3em;
}
}
ion-item-sliding.active-slide {
.item, .item,
.item.activated { .item.activated {

23
ionic/components/item/test/sliding/main.html
View File

@ -31,7 +31,9 @@
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<button primary (click)="archive(item)">Archive</button> <button primary (click)="archive(item)">Archive</button>
<button danger (click)="del(item)"><ion-icon name="trash"></ion-icon></button> <button danger (click)="del(item)">
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
@ -53,8 +55,10 @@
<ion-icon name="mail" item-left></ion-icon> <ion-icon name="mail" item-left></ion-icon>
One Line w/ Icon, div only text One Line w/ Icon, div only text
</ion-item> </ion-item>
<ion-item-options> <ion-item-options icon-left>
<button primary (click)="archive(item)">Archive</button> <button primary (click)="archive(item)">
<ion-icon name="archive"></ion-icon>Archive
</button>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
@ -66,7 +70,16 @@
One Line w/ Avatar, div only text One Line w/ Avatar, div only text
</ion-item> </ion-item>
<ion-item-options> <ion-item-options>
<button primary (click)="archive(item)">Archive</button> <button primary>
<ion-icon name="more"></ion-icon>More
</button>
<button secondary (click)="archive(item)">
<ion-icon name="archive"></ion-icon>Archive
</button>
<button danger (click)="del(item)">
<ion-icon name="trash"></ion-icon>Delete
</button>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
@ -104,4 +117,4 @@
img { img {
height: 100px; height: 100px;
} }
</style> </style>