Blame - xos-apps/auto-scale/gui/src/vendor/ui.bootstrap/misc/demo/index.html - xos

<button type="button" class="btn btn-outline-inverse btn-lg" ng-click="showBuildModal()"><i class="glyphicon glyphicon-wrench"></i> Create a Build</button>

90

</p>

91

</div>

<li>

allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

</li>

<li>

allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

101

</li>

102

<li>

103

<a href="https://twitter.com/share" class="twitter-share-button"

104

data-hashtags="angularjs">Tweet</a>

105

106

var js, fjs = d.getElementsByTagName(s)[0];

107

if (!d.getElementById(id)) {

108

js = d.createElement(s);

109

js.id = id;

110

js.src = "//platform.twitter.com/widgets.js";

111

fjs.parentNode.insertBefore(js, fjs);

112

}

113

}(document, "script", "twitter-wjs");</script>

114

</li>

115

<li>

116

117

118

119

120

121

(function () {

122

var po = document.createElement('script');

123

po.type = 'text/javascript';

124

po.async = true;

125

po.src = 'https://apis.google.com/js/plusone.js';

126

var s = document.getElementsByTagName('script')[0];

127

s.parentNode.insertBefore(po, s);

})();

</script>

</li>

</ul>

</div>

</header>

<li><a href="#"><strong>Directives</strong></a></li>

140

<% demoModules.forEach(function(module) { %>

<% }); %>

</ul>

</section>

<h1>Getting started</h1>

149

</div>

150

<h3>Dependencies</h3>

151

<p>

152

This repository contains a set of <strong>native AngularJS directives</strong> based on

153

Bootstrap's markup and CSS. As a result no dependency on jQuery or Bootstrap's

154

JavaScript is required. The <strong>only required dependencies</strong> are:

155

</p>

156

<ul>

157

<li><a href="http://angularjs.org" target="_blank">AngularJS</a> (requires AngularJS 1.3.x, tested with <%= ngversion %>).

158

0.12.0 is the last version of this library that supports AngularJS 1.2.x.</li>

159

<li><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version <%= bsversion %>).

160

This version of the library (<%= pkg.version%>) works only with Bootstrap CSS in version 3.x.

161

0.8.0 is the last version of this library that supports Bootstrap CSS in version 2.3.x.

162

</li>

163

</ul>

164

<h3>Files to download</h3>

165

<p>

166

Build files for all directives are distributed in several flavours: minified for production usage, un-minified

167

for development, with or without templates. All the options are described and can be

168

<a href="https://github.com/angular-ui/bootstrap/tree/gh-pages">downloaded from here</a>. It should be noted that the <code>-tpls</code> files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ#full-explanation">here</a> and the README <a href="https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files">here</a>.

169

</p>

170

<p>Alternativelly, if you are only interested in a subset of directives, you can

171

<a ng-click="showBuildModal()">create your own build</a>.

172

</p>

173

<p>Whichever method you choose the good news that the overall size of a download is very small:

174

<76kB for all directives (~20kB with gzip compression!)</p>

175

<h3>Installation</h3>

176

<p>As soon as you've got all the files downloaded and included in your page you just need to declare

177

a dependency on the <code>ui.bootstrap</code> <a href="http://docs.angularjs.org/guide/module">module</a>:<br>

178

<pre><code>angular.module('myModule', ['ui.bootstrap']);</code></pre>

179

</p>

180

<p>You can fork one of the plunkers from this page to see a working example of what is described here.</p>

181

182

<p>Original Bootstrap's CSS depends on empty <code>href</code> attributes to style cursors for several components (pagination, tabs etc.).

183

But in AngularJS adding empty <code>href</code> attributes to link tags will cause unwanted route changes. This is why we need to remove empty <code>href</code> attributes from directive templates and as a result styling is not applied correctly. The remedy is simple, just add the following styling to your application: <pre><code>.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }</code></pre>

184

</p>

185

186

<p>Please check <a href="https://github.com/angular-ui/bootstrap/wiki/FAQ" target="_blank">our FAQ section</a> for common problems / solutions.</p>

187

<h3>Reading the documentation</h3>

188

<p>

189

Each of the components provided in <code>ui-bootstrap</code> have documentation and interactive Plunker examples.

190

</p>

191

<p>

192

For the directives, we list the different attributes with their default values, and whether they are readonly. In addition to this, some settings

193

have an eye icon next to them like this <i class="glyphicon glyphicon-eye-open"></i>. The eye means that the setting has an Angular

194

<a href="https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$watch" title="Angular $watch" target="_blank">$watch</a> listener applied to it.

195

</p>

196

<p>

197

For the services (you will recognize them with the <code>$</code> prefix), we list all the possible parameters you can pass to them and their default values if any.

198

</p>

199

<p>

200

Also, some components have default values that you can override globally within a <code>.config</code> function for example.

201

</p>

202

</section>

203

<% demoModules.forEach(function(module) { %>

(<a target="_blank" href="https://github.com/angular-ui/bootstrap/tree/master/src/<%= module.name %>">ui.bootstrap.<%= module.name %></a>)

</small></h1>

</div>

<%= module.docs.html %>

213

</div>

214

215

<%= module.docs.md %>

</div>

</div>

<hr>

<button type="button" class="btn btn-info plunk-btn" ng-click="edit('<%= ngversion%>', '<%= bsversion %>', '<%= pkg.version%>', '<%= module.name %>')"><i class="glyphicon glyphicon-edit"></i> Edit in plunker</button>

223

</div>

224

<uib-tabset>

225

<uib-tab heading="Markup">

</div>

</uib-tab>

<uib-tab heading="JavaScript">

</div>

</uib-tab>

</uib-tabset>

</div>

</div>

</section>

<% }); %>

</div>

</div>

</div>

244

</div>

245

246

247

<p>Designed and built by <a href="https://github.com/angular-ui?tab=members" target="_blank">Angular-UI team</a> and <a href="https://github.com/angular-ui/bootstrap/graphs/contributors" target="_blank">contributors</a>.</p>

248

<p>Code licensed under <a href="https://github.com/angular-ui/bootstrap/blob/master/LICENSE"><%= pkg.license %> License</a>.</p>

249

<p><a href="https://github.com/angular-ui/bootstrap/issues?state=open">Issues</a></p>

</div>

</footer>

<div class="modal-header"><h4 class="modal-title">Download Angular UI Bootstrap</h4></div>

<label class="col-sm-3 control-label"><strong>Build</strong></label>

262

263

264

<button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="true">Minified</button>

265

<button type="button" class="btn btn-default" ng-model="options.minified" uib-btn-radio="false">Uncompressed</button>

266

</span>

267

<small class="help-block">Use <b>Minified</b> version in your deployed application. <b>Uncompressed</b> source code is useful only for debugging and development purpose.</small>

</div>

</div>

<label class="col-sm-3 control-label"><strong>Include Templates</strong></label>

</span>

<small class="help-block">Whether you want to include the <i>default templates</i>, bundled with most of the directives. These templates are based on Bootstrap's markup and CSS.</small>

</div>

</div>

<label class="col-sm-3 control-label"><strong>Bower</strong></label>

282

283

<small>If you are using Bower just run:</small>

284

<pre style="margin-bottom:0;">bower install angular-bootstrap</pre>

285

<small class="help-block"><a href="http://bower.io/" target="_blank">Bower</a> is a package manager for the web.</small>

</div>

</div>

</form>

</div>

<a class="btn btn-default" ng-click="cancel()">Close</a>

292

<a class="btn btn-primary" ng-href="{{download('<%= pkg.version%>')}}" download><i class="glyphicon glyphicon-download-alt"></i> Download <%= pkg.version %></a>

</div>

</script>

<h4>

Create a Custom Build

299

<br>