This Ionic directive generates a circular menu from a collection of elements that spin on drag. This directive is free to be used by whomever for whatever reason and has been created for demonstration purposes, meaning it may interest people wanting to create similar functionality in their own modules. After all, it was built borrowing knowledge imparted by awesome people sharing their answers on Stack.
Here's the Codepen Demo
Here's a quick Blog Post
Get the package from bower.
$ bower install ionic-wheel
Just include ionic.wheel.css
and ionic.wheel.js
to your app and remember to include the ionic.wheel
module as a dependency.
angular.module('starter', ['ionic', 'ionic.wheel'])
Next, use the ion-wheel
directive to declare a new instance of the wheel and be sure to define the center element with an id of #activate
and any menu items with a class of .circle
. These are both referenced inside the directive and are required for the directive to perform as expected.
<ion-wheel>
<div id="activate" ng-click="showCircles()"><i ng-class="circlesHidden ? 'ion-arrow-expand' : 'ion-arrow-shrink'"></i></div>
<div class="circle"><i class="icon ion-home"></i></div>
<div class="circle"><i class="icon ion-alert-circled"></i></div>
<div class="circle"><i class="icon ion-heart-broken"></i></div>
<div class="circle"><i class="icon ion-trash-a"></i></div>
<div class="circle"><i class="icon ion-email"></i></div>
<div class="circle"><i class="icon ion-at"></i></div>
<div class="circle"><i class="icon ion-pin"></i></div>
<div class="circle"><i class="icon ion-lock-combination"></i></div>
</ion-wheel>
The directive takes care of positioning the menu items along the perimeter of the circule and making sure they are equadistant to one another. It also creates a drag event listener that spins when a user drags the screen with their finger (on mobile).
Not incorporated in the directive but easily created is the ability to hide the menu items on click of the #activate
element. This is how it is
implemented inside the demo and can be achieved with the above markup and the inclusion of the following to an outlying controller.
angular.module('starter', ['ionic', 'ionic.wheel'])
.controller('MainCtrl', function($scope) {
var circles = document.getElementsByClassName('circle');
$scope.circlesHidden = true;
$scope.showCircles= function() {
var $circles = angular.element(circles);
if ($scope.circlesHidden) {
$circles.addClass('active');
} else {
$circles.removeClass('active');
}
$scope.toggleCirclesHidden();
};
$scope.toggleCirclesHidden = function() {
return $scope.circlesHidden = !$scope.circlesHidden;
};
});