Basic segment

ionic/components.js

@@ -19,6 +19,7 @@ export * from 'ionic/components/nav/nav-item'
 // export * from 'ionic/components/radio/radio-group'
 // export * from 'ionic/components/search-bar/search-bar'
 // export * from 'ionic/components/split-view/split-view'
+export * from 'ionic/components/segment/segment'
 export * from 'ionic/components/switch/switch'
 export * from 'ionic/components/tabs/tabs'
 export * from 'ionic/components/tabs/tab'

ionic/components/segment/extensions/ios.scss

@@ -0,0 +1,19 @@
+.platform-ios {
+
+  ion-segment {
+
+    > .button {
+      border-width: 2px;
+
+      border-style: solid;
+      border-color: red;
+
+      &:first-child {
+        border-right-width: 0px;
+      }
+      &:last-child {
+        border-left-width: 0px;
+      }
+    }
+  }
+}

ionic/components/segment/segment.js

@@ -0,0 +1,16 @@
+import {NgElement, Decorator} from 'angular2/angular2'
+import {IonicComponent} from 'ionic/config/component'
+
+@Decorator({
+  selector: 'ion-segment'
+})
+export class Segment {
+  constructor(
+    @NgElement() ngElement:NgElement
+  ) {
+    this.domElement = ngElement.domElement
+    this.config = Button.config.invoke(this)
+  }
+}
+new IonicComponent(Segment, {
+})

ionic/components/segment/segment.scss

@@ -1,3 +1,37 @@
-.ion-segment {
+ion-segment {
+  @include flex-display();
+  @include flex(1);
+  width: 100%;
 
+  > .button {
+
+    @include flex(1);
+    display: block;
+
+    overflow: hidden;
+
+    padding: 0 16px;
+
+    width: 0;
+
+    border-width: 1px 0px 1px 1px;
+    border-radius: 0;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    background: none;
+
+    &.active {
+      background: red;
+    }
+
+    &:first-child {
+      border-radius: $button-border-radius 0px 0px $button-border-radius;
+    }
+    &:last-child {
+      border-right-width: 1px;
+      border-radius: 0px $button-border-radius $button-border-radius 0px;
+    }
+  }
 }

ionic/components/segment/test/basic/main.html

@@ -0,0 +1,13 @@
+<ion-content class="padding">
+  <ion-segment>
+    <button ion-button class="active">
+      Standard
+    </button>
+    <button ion-button>
+      Hybrid
+    </button>
+    <button ion-button>
+      Satellite
+    </button>
+  </ion-segment>
+</ion-content>

ionic/components/segment/test/basic/main.js

@@ -0,0 +1,18 @@
+import {Component, View, bootstrap} from 'angular2/angular2'
+import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+//import {Button, Switch, Form, List, Label, Item, Input, Content} from 'ionic/ionic';
+import {IONIC_DIRECTIVES} from 'ionic/ionic'
+
+console.log([FormDirectives].concat(IONIC_DIRECTIVES));
+
+@Component({ selector: '[ion-app]' })
+@View({
+  templateUrl: 'main.html',
+  directives: [FormDirectives].concat(IONIC_DIRECTIVES)
+})
+class IonicApp {
+  constructor() {
+  }
+}
+
+bootstrap(IonicApp)

ionic/ionic.scss

@@ -44,6 +44,7 @@
   "components/modal/modal",
   "components/radio/radio",
   "components/search-bar/search-bar",
+  "components/segment/segment",
   "components/switch/switch",
   "components/tabs/tabs",
   "components/toolbar/toolbar";
@@ -62,6 +63,7 @@
   "components/item/extensions/ios",
   "components/radio/extensions/ios",
   "components/search-bar/extensions/ios",
+  "components/segment/extensions/ios",
   "components/switch/extensions/ios",
   "components/tabs/extensions/ios";