Matteo Scandolo | 46b5610 | 2015-12-16 14:23:08 -0800 | [diff] [blame] | 1 | <div ng-controller="AccordionDemoCtrl"> |
| 2 | <script type="text/ng-template" id="group-template.html"> |
| 3 | <div class="panel {{panelClass || 'panel-default'}}"> |
| 4 | <div class="panel-heading"> |
| 5 | <h4 class="panel-title" style="color:#fa39c3"> |
| 6 | <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"><span |
| 7 | ng-class="{'text-muted': isDisabled}">{{heading}}</span></a> |
| 8 | </h4> |
| 9 | </div> |
| 10 | <div class="panel-collapse collapse" uib-collapse="!isOpen"> |
| 11 | <div class="panel-body" style="text-align: right" ng-transclude></div> |
| 12 | </div> |
| 13 | </div> |
| 14 | </script> |
| 15 | |
| 16 | <p> |
| 17 | <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button> |
| 18 | <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button> |
| 19 | </p> |
| 20 | |
| 21 | <div class="checkbox"> |
| 22 | <label> |
| 23 | <input type="checkbox" ng-model="oneAtATime"> |
| 24 | Open only one at a time |
| 25 | </label> |
| 26 | </div> |
| 27 | <uib-accordion close-others="oneAtATime"> |
| 28 | <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> |
| 29 | This content is straight in the template. |
| 30 | </uib-accordion-group> |
| 31 | <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups"> |
| 32 | {{group.content}} |
| 33 | </uib-accordion-group> |
| 34 | <uib-accordion-group heading="Dynamic Body Content"> |
| 35 | <p>The body of the uib-accordion group grows to fit the contents</p> |
| 36 | <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button> |
| 37 | <div ng-repeat="item in items">{{item}}</div> |
| 38 | </uib-accordion-group> |
| 39 | <uib-accordion-group heading="Custom template" template-url="group-template.html"> |
| 40 | Hello |
| 41 | </uib-accordion-group> |
| 42 | <uib-accordion-group heading="Delete account" panel-class="panel-danger"> |
| 43 | <p>Please, to delete your account, click the button below</p> |
| 44 | <button class="btn btn-danger">Delete</button> |
| 45 | </uib-accordion-group> |
| 46 | <uib-accordion-group is-open="status.open"> |
| 47 | <uib-accordion-heading> |
| 48 | I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> |
| 49 | </uib-accordion-heading> |
| 50 | This is just some content to illustrate fancy headings. |
| 51 | </uib-accordion-group> |
| 52 | </uib-accordion> |
| 53 | </div> |