cuppa-angular-menu

v1.0.0

Published

3 years ago

A cool Angular Menu for web and mobile.

Downloads

0High
0Medium
0Low

cuppalabs

angular menu fan menu angular menu directive

Angular Fan Menu for web and mobile

Cuppa Angular Fan Menu is an angular 1 directive for cool menu componet for web and mobile, developed using angularJS, CSS3, HTML5.

Features

Highly Configurable directive properties and methods
Draggable
Touch enabled
Cool fan effect transitions

Demo

View the Demo here.

Click here for JSFiddle.

Getting Started

Source Code

Install with npm: npm install cuppa-angular-datepicker
```
                OR
```
Clone this repository and setup with the below instructions.

Usage

Include circularmenu-directive.js directive at the bottom of your page or in the <head> section.

<script src="circularmenu-directive.js" type="text/javascript"></script>

Initialize the directive by adding the directive name as a dependency to your app controller and declare the config object and menu items model as follows


angular
  .module('demoApp', ['circularMenu-directive'])
  .controller('demoController',function($scope){
    $scope.menuConfig = {
      "buttonWidth": 60,
      "menuRadius": 160,
      "color": "#ff7f7f",
      "offset":25,
      "textColor": "#ffffff",
      "showIcons":false,
      "gutter": {
        "top": 130,
        "right": 30,
        "bottom": 30,
        "left": 30
      },
      "angles": {
        "topLeft": 0,
        "topRight": 90,
        "bottomRight": 180,
        "bottomLeft": 270
      }
    };
    $scope.menuItems = [{
      "title": "iPad",
      "color": "#ea2a29",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-tablet","size": 35}
    }, {
      "title": "iMac",
      "color": "#f16729",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-laptop","size": 30}
    }, {
      "title": "iPhone",
      "color": "#f89322",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-mobile","size": 30}
    }, {
      "title": "iWatch",
      "color": "#ffcf14",
      "rotate": 0,
      "show": 0,
      "titleColor": "#fff",
      "icon":{"color":"#fff","name":"fa fa-clock-o","size": 30}
    }];
  })

Add the directive attribute and the corresponding config attributes to the html template or page of your app.


 <div drag-circular-menu 
     angle="30" 
     placement="topLeft" 
     button-config="menuConfig" 
     menu-items="menuItems" 
     default-open="true"
     onwing-click="onWingClick1(wing)">
</div>

Documentation

Directive Configuration

Once the directive attribute is added to the element, it can be configured with the following configuration attributes.

Config Object Properties

Data Array - Menu Item Object Properties

menuItems - Arryay [menuObject]
menuObject {} properties

|Property|Type|Required|Description| |:--- |:--- |:--- |:--- | |title|String|YES| Title of the menu item. | |color|Hex Code|YES| Background color of the wing. | |rotate|Number|YES| Initial angle of the wing. Default to Zero. | |show|Boolean|YES| Show or hide the wing. | |titleColor|Hex Code|YES| Text color of the title. | |icon|Object|YES| Icon object properties. {"color":"#fff","name":"fa fa-tablet","size": 35} |

Build & development

If you want develope and build on this component, there are some quick steps for that.

clone the git repository to your local
run npm install to download and install all the development dependencies.
run bowerinstall to download all the front end developemnt dependencies.
run grunt serve to start the server and get the app up and running. It automatically opens a browser window instance, with the app runnning.
run grunt build to generate production ready code in dist folder.

Licence

This project is licensed under the MIT license. See the LICENSE file for more info.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Credits

Thanks to Font Awesome the library.

Author

Pradeep Kumar Terli