javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(chip): align icon in the center

Browse Source 
fixes #5386
This commit is contained in:
Nakul Gulati
2017-01-30 19:56:24 -05:00
committed by Brandy Carney
parent 47ed69e7a4
commit ace727e627
2 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/chip/chip.scss
View File

@ -15,6 +15,9 @@ $chip-button-size: 32px !default;
/// @prop - Border radius of the icon in the chip /// @prop - Border radius of the icon in the chip
$chip-icon-border-radius: 50% !default; $chip-icon-border-radius: 50% !default;
/// @prop - Text alignment of the icon in the chip
$chip-icon-text-align: center !default;
/// @prop - Width and height of the icon in the chip /// @prop - Width and height of the icon in the chip
$chip-icon-size: 32px !default; $chip-icon-size: 32px !default;
@ -56,6 +59,7 @@ ion-chip ion-icon {
font-size: $chip-icon-font-size; font-size: $chip-icon-font-size;
line-height: $chip-icon-size; line-height: $chip-icon-size;
text-align: $chip-icon-text-align;
} }
ion-chip ion-avatar { ion-chip ion-avatar {

10
src/components/chip/test/basic/main.html
View File

@ -93,4 +93,14 @@
</button> </button>
</ion-chip> </ion-chip>
<ion-item>
<ion-label>Chip Item</ion-label>
<ion-chip item-right #chip1>
<ion-icon name="pin" color="primary"></ion-icon>
<ion-label>Default</ion-label>
<button ion-button clear color="light" (click)="delete(chip1)">
<ion-icon name="close-circle"></ion-icon>
</button>
</ion-chip>
</ion-item>
</ion-content> </ion-content>