index.html 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  6. <title>nya-bootstrap-select</title>
  7. <link rel="stylesheet" href="css/main.css"/>
  8. <link rel="stylesheet" href="css/github.css"/>
  9. <link rel="stylesheet" href="css/nya-bs-select.css"/>
  10. <script>
  11. (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  12. (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  13. m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  14. })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
  15. ga('create', 'UA-57271051-2', 'auto');
  16. ga('send', 'pageview');
  17. </script>
  18. </head>
  19. <body ng-app="docApp">
  20. <nav class="navbar navbar-default nya-docs-nav" role="navigation">
  21. <div class="container">
  22. <div class="navbar-header">
  23. <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-example-navbar">
  24. <span class="sr-only">Toggle navigation</span>
  25. <span class="icon-bar"></span>
  26. <span class="icon-bar"></span>
  27. <span class="icon-bar"></span>
  28. </button>
  29. <a class="navbar-brand" ui-sref="home">nya-bootstrap-select</a>
  30. </div>
  31. <div class="collapse navbar-collapse" id="bs-example-navbar">
  32. <ul class="nav navbar-nav">
  33. <li ui-sref-active="active">
  34. <a ui-sref="main">Getting Started</a>
  35. </li>
  36. <li ui-sref-active="active">
  37. <a ui-sref="examples">Examples</a>
  38. </li>
  39. <li ui-sref-active="active">
  40. <a ui-sref="api">API Reference</a>
  41. </li>
  42. </ul>
  43. </div>
  44. </div>
  45. </nav>
  46. <div class="nya-docs-header" ng-controller="HeaderCtrl">
  47. <div class="container" ng-if="!isHome">
  48. <h1 ng-cloak>{{headerContents[currentState.parent].heading}}</h1>
  49. <p ng-cloak>{{headerContents[currentState.parent].desc}}</p>
  50. </div>
  51. <div class="container" ng-if="isHome">
  52. <h1>nya-bootstrap-select</h1>
  53. <p>An Bootstrap dropdown component and replacement of vanilla select element, designed for AngularJS</p>
  54. <p>
  55. <a class="btn btn-outline-inverse btn-lg" href="https://github.com/lordfriend/nya-bootstrap-select">
  56. Code on GitHub
  57. </a>
  58. <a class="btn btn-outline-inverse btn-lg" href="https://github.com/lordfriend/nya-bootstrap-select/releases">
  59. <i class="glyphicon glyphicon-download-alt"></i>
  60. &nbsp;&nbsp;Download&nbsp;&nbsp;
  61. </a>
  62. </p>
  63. </div>
  64. </div>
  65. <div class="container">
  66. <div class="home-desc" ng-if="isHome">
  67. <p class="lead">
  68. nya-bootstrap-select helps you build select element or dropdown with Bootstrap style and an angular way. Generate options with collection, get user select value with model.
  69. Define various styles of the select options as you wish.
  70. </p>
  71. </div>
  72. <div class="feature-list" ng-if="isHome">
  73. <div class="row">
  74. <div class="col-md-4 col-sm-6">
  75. <h4>
  76. Better Select Element
  77. </h4>
  78. Support both single and multiple select mode, make it a better replacement of select element than others.
  79. </div>
  80. <div class="col-md-4 col-sm-6">
  81. <h4>
  82. No JQuery Required
  83. </h4>
  84. The only angular and bootstrap css are required. no longer depends on jquery.
  85. </div>
  86. <div class="col-md-4 col-sm-6">
  87. <h4>
  88. Customize Option Style Is Easy
  89. </h4>
  90. Build you option aka dropdown element is very easy. write your template under each list element to make any appearance. No attribute content needed any more.
  91. </div>
  92. </div>
  93. <div class="row">
  94. <div class="col-md-4 col-sm-6">
  95. <h4>
  96. Live Search through The Options
  97. </h4>
  98. Just add a attribute live-search="true", you can add an live search component into your dropdown.
  99. </div>
  100. <div class="col-md-4 col-sm-6">
  101. <h4>
  102. Control the Button Content.
  103. </h4>
  104. You can use some feature like select-text-format or alternative display to control the button content when user select or un-select options.
  105. </div>
  106. <div class="col-md-4 col-sm-6">
  107. <h4>
  108. Layout With Bootstrap 3
  109. </h4>
  110. You can use bootstrap grid system to layout size and position of your dropdown.
  111. </div>
  112. </div>
  113. </div>
  114. <div ui-view ng-if="!isHome" ng-cloak>
  115. <div class="loading-container">
  116. <img class="loading-icon" src="svg-loaders/grid.svg" alt="Loading..."/>
  117. </div>
  118. </div>
  119. </div>
  120. <footer class="doc-footer" role="contentinfo">
  121. <div class="container">
  122. <div class="nya-docs-social">
  123. <ul class="nya-docs-social-buttons">
  124. <li>
  125. <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=lordfriend&repo=nya-bootstrap-select&type=watch&count=true" frameborder="0" width="100" height="20" title="Star on Github"></iframe>
  126. </li>
  127. <li>
  128. <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=lordfriend&repo=nya-bootstrap-select&type=fork&count=true" frameborder="0" width="100" height="20" title="Fork on Github"></iframe>
  129. </li>
  130. </ul>
  131. </div>
  132. <p>Design and built by <a href="http://nya.io">Nyasoft</a></p>
  133. <p>Code licensed under <a href="https://github.com/lordfriend/nya-bootstrap-select/blob/master/LICENSE">MIT</a>, document under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
  134. </div>
  135. </footer>
  136. <script src="js/jquery.js"></script>
  137. <script src="js/bootstrap.js"></script>
  138. <script src="js/angular.js"></script>
  139. <script src="js/angular-ui-router.js"></script>
  140. <script src="js/nya-bs-select.js"></script>
  141. <script src="js/app.js"></script>
  142. </body>
  143. </html>