Skip to content

Commit dd89cf3

Browse files
tilwinjoytilwinjoy
committed
adding demos folder
1 parent f086277 commit dd89cf3

File tree

4 files changed

+306
-1
lines changed

4 files changed

+306
-1
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
bower_components/
22
node_modules/
33
.git/
4-
index.html

‎demos/index.css‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
* {
2+
box-sizing: border-box;
3+
padding: 0;
4+
margin: 0;
5+
}
6+
7+
html,
8+
body {
9+
height: 100%;
10+
}
11+
12+
body {
13+
background-color: #fff;
14+
}
15+
16+
#main-content {
17+
margin-top: 60px;
18+
}
19+
20+
#startup,
21+
#sub-content,
22+
#sub-content .row {
23+
margin-top: -70px;
24+
padding-top: 70px;
25+
}
26+
27+
#sub-content h4 {
28+
margin-top: 40px;
29+
}
30+
31+
{
32+
padding-top: 50px;
33+
}
34+
35+
form {
36+
padding: 20px;
37+
margin-bottom: 20px;
38+
border-radius: 4px;
39+
}
40+
41+
.description {
42+
margin-top: 20px;
43+
padding: 20px;
44+
}

‎demos/index.html‎

Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
9+
<meta name="description" content="">
10+
<meta name="author" content="">
11+
<link rel="icon" href="../../favicon.ico">
12+
13+
<title>AngularBootstrap Material</title>
14+
15+
16+
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:400,700'>
17+
18+
<!-- Material Design fonts -->
19+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700">
20+
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
21+
22+
<!-- Bootstrap -->
23+
<link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css">
24+
<!-- Bootstrap Material Design -->
25+
<link rel="stylesheet" href="../bower_components/bootstrap-material-design/dist/css/bootstrap-material-design.css">
26+
<link rel="stylesheet" href="../bower_components/bootstrap-material-design/dist/css/ripples.css">
27+
<!-- custom -->
28+
<link rel="stylesheet" href="index.css">
29+
</head>
30+
31+
<body ng-app="angularBootstrapMaterialDocs">
32+
<!-- Fixed navbar -->
33+
<nav class="navbar navbar-inverse navbar-fixed-top">
34+
<div class="container-fluid">
35+
<div class="navbar-header">
36+
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
37+
<span class="sr-only">Toggle navigation</span>
38+
<span class="icon-bar"></span>
39+
<span class="icon-bar"></span>
40+
<span class="icon-bar"></span>
41+
</button>
42+
<a class="navbar-brand" href="#">Angular Bootsrap Material</a>
43+
</div>
44+
<div id="navbar" class="navbar-collapse collapse">
45+
<ul class="nav navbar-nav">
46+
<li><a href="#startup">Getting started</a></li>
47+
<li class="dropdown" uib-dropdown>
48+
<a class="dropdown-toggle" uib-dropdown-toggle role="button">Form Controls <span class="caret"></span></a>
49+
<ul class="dropdown-menu" uib-dropdown-menu>
50+
<li><a href="#input">Input</a></li>
51+
<li><a href="#textarea">Textarea</a></li>
52+
<li><a href="#checkbox">Checkbox</a></li>
53+
<li><a href="#radio">Radio</a></li>
54+
<li><a href="#select">Select</a></li>
55+
</ul>
56+
</li>
57+
<li><a href="#bootstrap-components">Bootstrap Components</a></li>
58+
<li class="dropdown" uib-dropdown>
59+
<a class="dropdown-toggle" uib-dropdown-toggle role="button">Material Components<span class="caret"></span></a>
60+
<ul class="dropdown-menu" uib-dropdown-menu>
61+
<li><a href="#toggle">Toggle button</a></li>
62+
</ul>
63+
</li>
64+
</ul>
65+
<ul class="nav navbar-nav navbar-right">
66+
<li><a href="http://github.com/tilwinjoy/angular-bootstrap-material">View on GitHub</a></li>
67+
<li><a href="http://github.com/tilwinjoy/angular-bootstrap-material/zipball/master">Download .zip</a></li>
68+
<li><a href="http://github.com/tilwinjoy/angular-bootstrap-material/tarball/master">Download .tar.gz</a></li>
69+
</ul>
70+
</div>
71+
<!--/.nav-collapse -->
72+
</div>
73+
</nav>
74+
75+
<div id="main-content" class="container-fluid">
76+
<!-- Main component for a primary marketing message or call to action -->
77+
<div class="jumbotron">
78+
<h2 class="project-name">Bootstrap Material Design for Angular</h2>
79+
<h5 class="project-tagline">AngularJS directives for creating material design style bootstrap components</h5>
80+
<!--<p>
81+
<a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
82+
</p>-->
83+
</div>
84+
</div>
85+
<div id="startup" class="container-fluid">
86+
<h3>Getting Started</h3>
87+
<p>This project is an AngularJS version of the aswesome
88+
<a href="http://fezvrasta.github.io/bootstrap-material-design/">bootstrap material design</a>. It removes the dependency on jQuery as well as Bootstrap's JavaScript</p>
89+
90+
<h5>Dependencies:</h5>
91+
<ul class="list-group">
92+
<li class="list-group-item"><a href="http://angularjs.org" target="_blank">AngularJS</a></li>
93+
<li class="list-group-item"><a href="http://angularjs.org" target="_blank">Angular-messages</a></li>
94+
<li class="list-group-item"><a href="http://getbootstrap.com" target="_blank">Bootstrap CSS</a> (tested with version 3.3.6)
95+
</li>
96+
<li class="list-group-item"><a href="http://getbootstrap.com" target="_blank">Material Design for Bootstrap CSS components</a> (bootstrap-material-design.css and ripples.css)
97+
</li>
98+
</ul>
99+
<h5>How to install:</h5>
100+
<p>Grab the latest source from <a href="https://raw.githubusercontent.com/tilwinjoy/angular-bootstrap-material/master/dist/angular-bootstrap-material.js" target="_blank">Github</a> and include it in your project after the dependencies. Include <code>angularBootstrapMaterial</code> module in your application:
101+
</p>
102+
<pre>angular.module('app', ['angularBootstrapMaterial']);</pre>
103+
</div>
104+
<div id="sub-content" class="container-fluid">
105+
<h4>Form controls</h4>
106+
<div id="input" class="row">
107+
<div class="col-xs-6">
108+
<h5>Input</h5>
109+
<form action="">
110+
<h5>Static Labels</h5>
111+
<abm-form-group class="form-group-sm">
112+
<label data-abm-label>Static label - Small</label>
113+
<input type="text" class="form-control" ng-model="inputs.static1" abm-form-control>
114+
</abm-form-group>
115+
<abm-form-group>
116+
<label data-abm-label>Static label - Default</label>
117+
<input type="text" class="form-control" ng-model="inputs.static2" abm-form-control placeholder="placeholder">
118+
</abm-form-group>
119+
<abm-form-group class="form-group-lg">
120+
<label data-abm-label>Static label - Large</label>
121+
<input type="text" class="form-control" ng-model="inputs.static3" abm-form-control>
122+
</abm-form-group>
123+
<h5>Folating Labels</h5>
124+
<abm-form-group class="form-group-sm">
125+
<label data-abm-label type="floating">Floating label - Small</label>
126+
<input type="text" abm-form-control ng-model="inputs.floating1">
127+
</abm-form-group>
128+
<abm-form-group>
129+
<label data-abm-label type="floating">Floating label - Default</label>
130+
<input type="text" abm-form-control ng-model="inputs.floating2">
131+
</abm-form-group>
132+
<abm-form-group class="form-group-lg">
133+
<label data-abm-label type="floating">Floating label - Large</label>
134+
<input type="text" abm-form-control ng-model="inputs.floating3">
135+
</abm-form-group>
136+
</form>
137+
</div>
138+
<div class="col-xs-6 description">
139+
<p>Create a material design input by adding <code>abmFormControl</code> directive to an <code>input</code> element and wrapping it in <code>abmFormGroup</code> directive.</p>
140+
141+
<p>If the <code>input</code> is accompanied by a label, it should contain <code>abmLabel</code> directive. The behaviour of label can be controlled by adding a <code>type</code> attribute whos value can be either "floating" or "static"(default)</p>
142+
<p>
143+
You can control the size of the component by adding the classes "form-group-sm" or "form-group-lg" on the <code>abmFormGroup</code> directive.
144+
</p>
145+
</div>
146+
</div>
147+
<div id="textarea" class="row">
148+
<div class="col-xs-6">
149+
<h5>Textarea</h5>
150+
<form action="">
151+
<abm-form-group>
152+
<label data-abm-label type="floating">Floating textarea label</label>
153+
<textarea abm-form-control ng-model="textarea"></textarea>
154+
</abm-form-group>
155+
</form>
156+
</div>
157+
<div class="col-xs-6 description">
158+
<p>Creating a material design textarea the same as creating an input, except that <code>abmFormControl</code> directive should be added to a <code>textarea</code> element.
159+
</div>
160+
</div>
161+
<div id="checkbox" class="row">
162+
<div class="col-xs-6">
163+
<h5>Checkbox</h5>
164+
<form action="">
165+
<abm-form-group>
166+
<label>Checkbox group - Inside <code>.form-group</code></label>
167+
<div class="checkbox" abm-checkbox label="Item1">
168+
<input type="checkbox" ng-model="checkbox.item1">
169+
</div>
170+
<div class="checkbox" abm-checkbox label="Item2">
171+
<input type="checkbox" ng-model="checkbox.item2">
172+
</div>
173+
</abm-form-group>
174+
<label>Checkbox group - Outside <code>.form-group</code></label>
175+
<div class="checkbox" abm-checkbox label="Item3">
176+
<input type="checkbox" ng-model="checkbox.item3">
177+
</div>
178+
<div class="checkbox" abm-checkbox label="Item4">
179+
<input type="checkbox" ng-model="checkbox.item4">
180+
</div>
181+
</form>
182+
</div>
183+
<div class="col-xs-6 description">
184+
<p>Create a material design checkbox by adding <code>abmCheckbox</code> directive to the checkbox input's wrapper. Add a <code>label</code> property on it to specify it's label</p>
185+
<p>Create a checkbox group by simply wrapping the checkboxes in a <code>abmFormGroup</code> directive</p>
186+
</div>
187+
</div>
188+
<div id="radio" class="row">
189+
<div class="col-xs-6">
190+
<h5>Radio</h5>
191+
<form action="">
192+
<abm-form-group>
193+
<label>Radio group - inside <code>.form-group</code> </label>
194+
<div class="radio" abm-radio label="Item1">
195+
<input type="radio" name="radios" ng-model="radio.item1">
196+
</div>
197+
<div class="radio" abm-radio label="Item2">
198+
<input type="radio" name="radios" ng-model="radio.item2">
199+
</div>
200+
</abm-form-group>
201+
<label>Radio group - outside <code>.form-group</code> </label>
202+
<div class="radio" abm-radio label="Item3">
203+
<input type="radio" name="radios" ng-model="radio.item3">
204+
</div>
205+
<div class="radio" abm-radio label="Item4">
206+
<input type="radio" name="radios" ng-model="radio.item4">
207+
</div>
208+
</form>
209+
</div>
210+
<div class="col-xs-6 description">
211+
<p>Creating a material design radio or radio group is similar to creating a checkbox or checkbox group, except that <code>abmRadio</code> directive needs to be added to the radio input's wrapper.
212+
</div>
213+
</div>
214+
<div id="select" class="row">
215+
<div class="col-xs-6">
216+
<h5>Select</h5>
217+
<form action="">
218+
<abm-form-group>
219+
<label for="select111" data-abm-label class="col-xs-2 control-label">Select</label>
220+
<div class="col-xs-10">
221+
<select id="select111" class="form-control">
222+
<option>1</option>
223+
<option>2</option>
224+
<option>3</option>
225+
<option>4</option>
226+
<option>5</option>
227+
</select>
228+
</div>
229+
</abm-form-group>
230+
</form>
231+
</div>
232+
<div class="col-xs-6"></div>
233+
</div>
234+
<h4>Bootstrap Components</h4>
235+
<div id="bootstrap-components" class="">
236+
<p>To create material style bootstrap components, include
237+
<a href="https://angular-ui.github.io/bootstrap/" target="_blank">UI Bootstrap </a> in your project and follow the instructions in it's documentation</p>
238+
</div>
239+
<h4>Material Components</h4>
240+
<div id="toggle" class="row">
241+
<div class="col-xs-6">
242+
<h5>Toggle Button</h5>
243+
<form action="">
244+
<div class="togglebutton" abm-toggle label="Wi-Fi">
245+
<input type="checkbox" checked="">
246+
</div>
247+
</form>
248+
</div>
249+
<div class="col-xs-6 description">
250+
<p>Create a material design toggle button by adding <code>abmtoggle</code> directive to the checkbox input's wrapper. Add a <code>label</code> property on it to specify it's label</p>
251+
</div>
252+
</div>
253+
</div>
254+
<script src="../bower_components/angular/angular.js"></script>
255+
<script src="../bower_components/angular-messages/angular-messages.js"></script>
256+
<script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
257+
<script src="../dist/angular-bootstrap-material.js"></script>
258+
<script src="index.js"></script>
259+
</body>
260+
261+
</html>

‎demos/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
angular.module('angularBootstrapMaterialDocs', ['angularBootstrapMaterial', 'ui.bootstrap']);

0 commit comments

Comments
 (0)