Segment animation

This commit is contained in:
Max Lynch
2015-05-09 09:16:16 -05:00
parent 51ee9a415d
commit f2d2634fb8
4 changed files with 9 additions and 7 deletions

View File

@ -3,15 +3,18 @@
.ion-segment { .ion-segment {
> .button { > .button {
border-width: 2px; border-width: 1px;
@include transition(100ms all linear);
color: get-color(primary, base); color: get-color(primary, base);
min-height: 3.7rem; min-height: 3.3rem;
line-height: 3.7rem; line-height: 3.3rem;
&.active { &.active {
color: #fff; background-color: get-color(primary, base);
color: white;
} }
border-style: solid; border-style: solid;

View File

@ -137,6 +137,7 @@ export class SegmentButton {
buttonClicked(event) { buttonClicked(event) {
this.segment.selected(this, event); this.segment.selected(this, event);
event.preventDefault();
} }
} }

View File

@ -25,8 +25,6 @@ ion-segment { display: block; }
background: none; background: none;
&.active { &.active {
background-color: get-color(primary, base);
color: white;
} }
&:first-of-type { &:first-of-type {

View File

@ -1,7 +1,7 @@
<ion-content class="padding"> <ion-content class="padding">
<form (^submit)="doSubmit($event)" [control-group]="form"> <form (^submit)="doSubmit($event)" [control-group]="form">
<ion-segment control="mapStyle"> <ion-segment [control]="mapStyle">
<ion-segment-button value="standard" ion-button> <ion-segment-button value="standard" ion-button>
Standard Standard
</ion-segment-button> </ion-segment-button>