demo.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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. <p>
  16. <button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
  17. <button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
  18. </p>
  19. <div class="checkbox">
  20. <label>
  21. <input type="checkbox" ng-model="oneAtATime">
  22. Open only one at a time
  23. </label>
  24. </div>
  25. <uib-accordion close-others="oneAtATime">
  26. <uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
  27. This content is straight in the template.
  28. </uib-accordion-group>
  29. <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
  30. {{group.content}}
  31. </uib-accordion-group>
  32. <uib-accordion-group heading="Dynamic Body Content">
  33. <p>The body of the uib-accordion group grows to fit the contents</p>
  34. <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
  35. <div ng-repeat="item in items">{{item}}</div>
  36. </uib-accordion-group>
  37. <uib-accordion-group heading="Custom template" template-url="group-template.html">
  38. Hello
  39. </uib-accordion-group>
  40. <uib-accordion-group heading="Delete account" panel-class="panel-danger">
  41. <p>Please, to delete your account, click the button below</p>
  42. <button class="btn btn-danger">Delete</button>
  43. </uib-accordion-group>
  44. <uib-accordion-group is-open="status.open">
  45. <uib-accordion-heading>
  46. I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
  47. </uib-accordion-heading>
  48. This is just some content to illustrate fancy headings.
  49. </uib-accordion-group>
  50. </uib-accordion>
  51. </div>