angular.panels Bower gulp npm

Pure AngularJS based SidePanels (no jQuery)

3 years after

Angular Panels

Pure AngularJS based lightweight(1.7KB) Side Panels. ScreenShot

Demo

http://eu81273.github.io/angular.panels/

Installation

Copy the script and css into your project and add a script and link tag to your page.

<script type="text/javascript" src="angular.panels.js"></script>
<link rel="stylesheet" type="text/css" href="angular.panels.css">

And add panels container tag to your application.

<div data-panels="true"></div>

Add a dependency to your application module and configure panel settings.

var app = angular.module('myApp', ['angular.panels']);

app.config(['panelsProvider', function (panelsProvider) {

    panelsProvider
        .add({
            id: "testmenu",
            position: "right",
            size: "700px",
            templateUrl: "../resources/template/testmenu.html",
            controller: "testmenuCtrl"
        })
        .add({
            id: "testpanel",
            position: "right",
            size: "80%",
            templateUrl: "../resources/template/testpanel.html",
            controller: "testpanelCtrl",
            closeCallbackFunction: "testpanelClose"
        });
}]);

attributes are..

  • id : panel's unique id.
  • position : the side panel slides from top/right/bottom/left.
  • size : panel's height or width. unit(px,em,%..) is required.
  • templateUrl : panel template url.
  • controller : panel's controller name.
  • openCallbackFunction : panel open callback.
  • closeCallbackFunction : panel close callback.

Open panel

Opening panel also very simple. Inject panels service to your app then call the service method like below.

var app = angular.module('myApp', ['angular.panels']);

app.config(['panelsProvider', function (panelsProvider) {

    panelsProvider
        .add({
            id: "testmenu",
            position: "right",
            size: "700px",
            templateUrl: "../resources/template/testmenu.html",
            controller: "testmenuCtrl"
        });
}]);

app.controller('defaultController', function($scope, panels) {

    //open testmenu panel
    panels.open("testmenu");
});

app.controller('testmenuCtrl', function($scope) {

    //left panel controller

});

Browser Compatibility

IE9+, Chrome, Safari

Changelogs

version 1.0.3

  • add provider to configure panels
  • remove limitation of number of panel

version 1.0.0

  • first release

License

The MIT License.

Copyright ⓒ 2015 AHN JAE-HA.

See LICENSE

Related Repositories

angular-timeline

angular-timeline

An Angular.JS directive that generates a responsive, data-driven vertical timeli ...

light-bootstrap-dashboard-angular

light-bootstrap-dashboard-angular

Light Bootstrap Dashboard Angular 2 ...

kibana-authorization

kibana-authorization

Enhanced Kibana 3 with several aggregation panels, html5 notification, authentic ...

great-big-angular2-example

great-big-angular2-example

An example app built with Angular 2, Redux, Webpack, and Angular-CLI ...

angular-panels

angular-panels

Angular widget for easy creation of portal-like floating panels ...


Top Contributors

eu81273 marhalpert

Releases

-   1.0.3 zip tar
-   1.0.0 zip tar