diff --git a/ionic/components.js b/ionic/components.js index 0069a849d7..70861f3940 100644 --- a/ionic/components.js +++ b/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' diff --git a/ionic/components/segment/extensions/ios.scss b/ionic/components/segment/extensions/ios.scss new file mode 100644 index 0000000000..cfefbd8c8b --- /dev/null +++ b/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; + } + } + } +} diff --git a/ionic/components/segment/segment.js b/ionic/components/segment/segment.js index e69de29bb2..0497a1798b 100644 --- a/ionic/components/segment/segment.js +++ b/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, { +}) diff --git a/ionic/components/segment/segment.scss b/ionic/components/segment/segment.scss index 200d5290b1..454b969803 100644 --- a/ionic/components/segment/segment.scss +++ b/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; + } + } } diff --git a/ionic/components/segment/test/basic/main.html b/ionic/components/segment/test/basic/main.html index e69de29bb2..b03c220265 100644 --- a/ionic/components/segment/test/basic/main.html +++ b/ionic/components/segment/test/basic/main.html @@ -0,0 +1,13 @@ + + + + + + + diff --git a/ionic/components/segment/test/basic/main.js b/ionic/components/segment/test/basic/main.js index e69de29bb2..faad00162a 100644 --- a/ionic/components/segment/test/basic/main.js +++ b/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) diff --git a/ionic/ionic.scss b/ionic/ionic.scss index be89b0fa89..2bc1b221a1 100644 --- a/ionic/ionic.scss +++ b/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";