segmented control directive for ionic v1. inspired from ionic v2
Created
June 27, 2016 12:23
-
-
Save ihuseynoff/ce5137fd91c0e07b03ae11c5d1d19ed9 to your computer and use it in GitHub Desktop.
ionic segmented control
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html ng-app="app"> | |
| <div class="bar bar-header bar-dark"> | |
| <ion-segment ng-model="categories" full="true" assertive> | |
| <ion-segment-button value="movies"> | |
| Movies | |
| </ion-segment-button> | |
| <ion-segment-button value="series"> | |
| Series | |
| </ion-segment-button> | |
| <ion-segment-button value="animation"> | |
| Animate | |
| </ion-segment-button> | |
| </ion-segment> | |
| </div> | |
| <ion-content class="has-header"> | |
| <div ng-switch="categories"> | |
| <ion-list ng-switch-when="movies"> | |
| <ion-item> | |
| Batman Begins | |
| </ion-item> | |
| <ion-item> | |
| Transporter | |
| </ion-item> | |
| <ion-item> | |
| Million Dollar Baby | |
| </ion-item> | |
| </ion-list> | |
| <ion-list ng-switch-when="series"> | |
| <ion-item> | |
| Game of Thrones | |
| </ion-item> | |
| <ion-item> | |
| Daredevil | |
| </ion-item> | |
| <ion-item> | |
| Arrow | |
| </ion-item> | |
| </ion-list> | |
| <ion-list ng-switch-when="animation"> | |
| <ion-item> | |
| Ice Age | |
| </ion-item> | |
| <ion-item> | |
| Lion King | |
| </ion-item> | |
| <ion-item> | |
| Up | |
| </ion-item> | |
| </ion-list> | |
| </div> | |
| </ion-content> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| angular.module('app', ['ionic']) | |
| .directive('ionSegment', function() { | |
| return { | |
| restrict: 'E', | |
| require: "ngModel", | |
| transclude: true, | |
| replace: true, | |
| scope: { | |
| full: '@full' | |
| }, | |
| template: '<ul id="ion-segment" ng-transclude></ul>', | |
| link: function($scope, $element, $attr, ngModelCtrl) { | |
| if ($scope.full == "true") { | |
| $element.find("li").addClass("full"); | |
| } | |
| var segment = $element.find("li").eq(0).attr("value"); | |
| $element.find("li").eq(0).addClass("active"); | |
| ngModelCtrl.$setViewValue(segment); | |
| } | |
| } | |
| }) | |
| .directive('ionSegmentButton', function() { | |
| return { | |
| restrict: 'E', | |
| require: "^ngModel", | |
| transclude: true, | |
| replace: true, | |
| template: '<li ng-transclude></li>', | |
| link: function($scope, $element, $attr, ngModelCtrl) { | |
| var clickingCallback = function() { | |
| $element.parent().find("li").removeClass("active"); | |
| $element.addClass("active"); | |
| var segment = $element.attr("value"); | |
| ngModelCtrl.$setViewValue(segment); | |
| } | |
| $element.bind('click', clickingCallback); | |
| } | |
| } | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="http://code.ionicframework.com/1.3.1/js/ionic.bundle.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $colors: ( 'light': #fff, 'stable': #f8f8f8, 'positive': #387ef5, 'calm': #11c1f3, 'balanced':#33cd5f, 'energized':#ffc900, 'assertive':#ef473a, 'royal':#886aea, 'dark':#444); | |
| ul#ion-segment { | |
| display: -webkit-box; | |
| display: -webkit-flex; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -webkit-box-flex: 1; | |
| -webkit-flex: 1; | |
| -ms-flex: 1; | |
| flex: 1; | |
| -webkit-align-self: center; | |
| -ms-flex-item-align: center; | |
| align-self: center; | |
| -webkit-box-pack: center; | |
| -webkit-justify-content: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| width: 100%; | |
| li.full { | |
| -webkit-box-flex: 1; | |
| -webkit-flex: 1; | |
| -ms-flex: 1; | |
| flex: 1; | |
| width: 0; | |
| padding: 0!important; | |
| } | |
| li { | |
| background-color: transparent; | |
| margin-right: 0; | |
| margin-left: 0; | |
| padding: 0 13px 0 13px; | |
| color: #fff; | |
| border: 1px solid; | |
| transition: all 100ms linear; | |
| -webkit-transition: all 100ms linear; | |
| line-height: 23px; | |
| max-height: 25px; | |
| min-height: 25px; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| background: none; | |
| text-align: center; | |
| cursor: pointer; | |
| &:first-of-type { | |
| margin-right: 0; | |
| border-radius: 4px 0 0 4px; | |
| } | |
| &:not(:first-of-type) { | |
| border-left-width: 0; | |
| } | |
| &:last-of-type { | |
| margin-left: 0; | |
| border-left-width: 0; | |
| border-radius: 0 4px 4px 0; | |
| } | |
| &:last-of-type .active { | |
| background: red; | |
| } | |
| } | |
| } | |
| @each $name, | |
| $value in $colors { | |
| ul#ion-segment[#{$name}] li.active { | |
| background-color: $value; | |
| color: #fff; | |
| } | |
| ul#ion-segment[#{$name}] li { | |
| border-color: $value; | |
| color: $value; | |
| } | |
| ul#ion-segment[#{$name}] li:hover:not(.active) { | |
| background-color: rgba($value, 0.1); | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="http://code.ionicframework.com/1.3.1/css/ionic.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment