mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
Segment animation
This commit is contained in:
@ -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;
|
||||||
|
@ -137,6 +137,7 @@ export class SegmentButton {
|
|||||||
|
|
||||||
buttonClicked(event) {
|
buttonClicked(event) {
|
||||||
this.segment.selected(this, event);
|
this.segment.selected(this, event);
|
||||||
|
event.preventDefault();
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
@ -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>
|
||||||
|
Reference in New Issue
Block a user