A simple labelled toggle switch for use in ionic based applications.
A Pen by Mike Jones on CodePen.
<html ng-app="ionicApp"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> | |
<title>Selector</title> | |
<link href="http://code.ionicframework.com/1.0.0-beta.9/css/ionic.css" rel="stylesheet"> | |
</head> | |
<body ng-controller="ButtonController"> | |
<div class="button-bar"> | |
<a class="button button-item1" ng-class="{'button-positive' : isActive('item1')}" ng-click="setActive('item1')">Item 1</a> | |
<a class="button button-item2" ng-class="{'button-positive' : isActive('item2')}" ng-click="setActive('item2')">Item 2</a> | |
<div> | |
</body> | |
</html> |
A simple labelled toggle switch for use in ionic based applications.
A Pen by Mike Jones on CodePen.
angular.module('ionicApp', ['ionic']) | |
.controller('ButtonController', function($scope) { | |
$scope.active = 'item1'; | |
$scope.setActive = function(type) { | |
$scope.active = type; | |
}; | |
$scope.isActive = function(type){ | |
return type === $scope.active; | |
}; | |
}); |
<script src="http://code.ionicframework.com/1.0.0-beta.9/js/ionic.bundle.js"></script> |
@import "compass/css3"; | |
@import "compass/css3/border-radius"; | |
@import url(http://fonts.googleapis.com/css?family=Oswald:700,300); | |
body{ | |
background: #F2F3F7; | |
.button-bar { | |
padding: 50px 30px 0 30px; | |
width: 300px; | |
.button { | |
font-family: 'Oswald', sans-serif; | |
text-transform: uppercase; | |
background: none; | |
border-color: #145fd7; | |
border-width: 4px; | |
&:first-child { | |
border-radius: none; | |
@include border-left-radius(8px); | |
} | |
} | |
.button-positive { | |
background-color: #145fd7; | |
} | |
.button-item1 { | |
@include border-left-radius(8px); | |
border-right: none; | |
} | |
.button-item2 { | |
@include border-right-radius(8px); | |
border-left: none; | |
} | |
} | |
} |