javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(segment): added MD styling to copy tabs, minus the animations

Browse Source 
references #283
This commit is contained in:
Brandy Carney
2015-10-14 12:30:51 -04:00
parent a0b8f6f537
commit 94c93d7468
6 changed files with 157 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
ionic/components/segment/modes/ios.scss
View File

@ -2,32 +2,79 @@
// iOS Segment
// --------------------------------------------------
$segment-button-ios-bg-color: transparent !default;
$segment-button-ios-bg-color-activated: color(primary) !default;
$segment-button-ios-text-color: inverse($segment-button-ios-bg-color-activated) !default;
$segment-button-ios-hover-opacity: 0.8 !default;
.ion-segment {
button,
[button] {
border-width: 1px;
border-style: solid;
transition: 100ms all linear;
min-height: 3.3rem;
line-height: 3.3rem;
&.active {
color: white;
}
background-color: $segment-button-ios-bg-color;
color: $segment-button-ios-text-color;
border-style: solid;
&[outline] {
border: 1px solid $segment-button-ios-bg-color-activated;
background: $segment-button-ios-bg-color;
color: $segment-button-ios-bg-color-activated;
&.activated {
opacity: 1;
color: $segment-button-ios-text-color;
background-color: $segment-button-ios-bg-color-activated;
}
}
&:first-of-type {
border-right-width: 0px;
border-radius: $button-border-radius 0px 0px $button-border-radius;
margin-right: 0;
}
&:last-of-type {
border-left-width: 0px;
border-radius: 0px $button-border-radius $button-border-radius 0px;
margin-left: 0;
}
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color, $value in $colors {
ion-segment[#{$color}] {
ion-segment-button[button] {
$bg-color: $value;
$text-color: inverse($bg-color);
background-color: transparent;
color: $text-color;
&[outline] {
border-color: $bg-color;
background: $segment-button-ios-bg-color;
color: $bg-color;
&.activated {
opacity: 1;
color: $text-color !important;
background-color: $bg-color !important;
}
}
}
}
}

55
ionic/components/segment/modes/md.scss Normal file
View File

@ -0,0 +1,55 @@
// iOS Segment
// --------------------------------------------------
$segment-button-md-text-color-activated: color(primary) !default;
$segment-button-md-border-color-activated: color(primary) !default;
.ion-segment {
button,
[button] {
border-width: 0;
transition: 100ms all linear;
min-height: 3.3rem;
line-height: 3.3rem;
&.activated {
color: $segment-button-md-text-color-activated;
background-color: transparent;
border-color: $segment-button-md-border-color-activated;
}
border-radius: 0;
border-bottom: 2px solid transparent;
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color, $value in $colors {
ion-segment[#{$color}] {
ion-segment-button[button] {
$bg-color: $value;
$text-color: inverse($bg-color);
background-color: transparent;
color: $text-color;
&[outline] {
color: $bg-color;
&.activated {
opacity: 1;
color: $bg-color !important;
border-color: $bg-color !important;
}
}
}
}
}

63
ionic/components/segment/segment.scss
View File

@ -2,11 +2,6 @@
// Segment
// --------------------------------------------------
$segment-button-bg-color: transparent !default;
$segment-button-bg-color-activated: color(primary) !default;
$segment-button-text-color: inverse($segment-button-bg-color-activated) !default;
$segment-button-hover-opacity: 0.8 !default;
ion-segment {
display: block;
@ -38,63 +33,5 @@ ion-segment {
white-space: nowrap;
background: none;
background-color: $segment-button-bg-color;
color: $segment-button-text-color;
&[outline] {
border: 1px solid $segment-button-bg-color-activated;
background: $segment-button-bg-color;
color: $segment-button-bg-color-activated;
&.activated {
opacity: 1;
color: $segment-button-text-color;
background-color: $segment-button-bg-color-activated;
}
}
&:first-of-type {
border-radius: $button-border-radius 0px 0px $button-border-radius;
margin-right: 0;
}
&:last-of-type {
border-right-width: 1px;
border-radius: 0px $button-border-radius $button-border-radius 0px;
margin-left: 0;
}
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color, $value in $colors {
ion-segment[#{$color}] {
ion-segment-button[button] {
$bg-color: $value;
$text-color: inverse($bg-color);
background-color: transparent;
color: $text-color;
&[outline] {
border: 1px solid $bg-color;
background: $segment-button-bg-color;
color: $bg-color;
&.activated {
opacity: 1;
color: $text-color !important;
background-color: $bg-color !important;
}
}
}
}
}

34
ionic/components/segment/segment.ts
View File

@ -226,3 +226,37 @@ export class SegmentButton {
}
}
// TODO Android animation similar to tabs
// /**
// * @private
// * TODO
// */
// @Directive({
// selector: 'tab-highlight'
// })
// class TabHighlight {
// constructor(@Host() tabs: Tabs, config: IonicConfig, elementRef: ElementRef) {
// if (config.get('mode') === 'md') {
// tabs.highlight = this;
// this.elementRef = elementRef;
// }
// }
//
// select(tab) {
// setTimeout(() => {
// let d = tab.btn.getDimensions();
// let ele = this.elementRef.nativeElement;
// ele.style.transform = 'translate3d(' + d.left + 'px,0,0) scaleX(' + d.width + ')';
//
// if (!this.init) {
// this.init = true;
// setTimeout(() => {
// ele.classList.add('animate');
// }, 64)
// }
// }, 32);
// }
//
// }

23
ionic/components/segment/test/basic/main.html
View File

@ -1,3 +1,16 @@
<ion-toolbar>
<ion-title>
<ion-segment>
<ion-segment-button>
Friends
</ion-segment-button>
<ion-segment-button>
Enemies
</ion-segment-button>
</ion-segment>
</ion-title>
</ion-toolbar>
<ion-content padding>
<form (submit)="doSubmit($event)" [ng-form-model]="myForm">
<ion-segment ng-control="mapStyle" danger>
@ -11,15 +24,7 @@
Satellite
</ion-segment-button>
</ion-segment>
<ion-segment>
<ion-segment-button>
Friends
</ion-segment-button>
<ion-segment-button>
Enemies
</ion-segment-button>
</ion-segment>
<button type="submit" button primary>Submit</button>
<button type="submit" button primary>Submit</button>
</form>
Map mode: <b>{{myForm.controls.mapStyle.value}}</b>

3
ionic/ionic.md.scss
View File

@ -15,7 +15,8 @@
"components/nav-bar/modes/md",
"components/popup/modes/md",
"components/radio/modes/md",
"components/search-bar/modes/md",
"components/search-bar/modes/md",
"components/segment/modes/md",
"components/switch/modes/md",
"components/tabs/modes/md",
"components/tap-click/ripple";