forked from clineamb/bootstrap-drawer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
257 lines (254 loc) · 18.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bootstrap-drawer documentation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="example/drawer-docs.css">
<link rel="stylesheet" type="text/css" href="example/github.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59331212-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</head>
<body class="has-offcanvas">
<div id="docDrawer" class="drawer dw-xs-10 dw-sm-6 dw-md-5 fold in" aria-labelledby="docDrawer">
<div class="drawer-controls">
<a href="#docDrawer" data-toggle="drawer" href="#docDrawer" aria-foldedopen="false" aria-controls="docDrawer" class="btn btn-default"><i class="fa fa-align-justify"></i></a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<h2 class="drawer-title"><strong>bootstrap-drawer</strong></h2>
</div>
<div class="drawer-body">
<iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="100" height="20px"></iframe>
</div>
<div class="drawer-heading">
<h3 class="drawer-title">Basics</h2>
</div>
<ul id="doc-nav" class="drawer-fullnav">
<li role="presentation"><a href="index.html">Home / Basic Usage</a></li>
<li role="presentation"><a href="customize.html">Position / Colors</a></li>
<li role="presentation"><a href="javascript.html">data-toggle / Javascript</a></li>
<li role="presentation"><a href="less.html">Using Less</a></li>
</ul>
<div class="drawer-heading">
<h3 class="drawer-title">Other Links</h2>
</div>
<ul class="drawer-fullnav">
<li role="presentation"><a href="http://github.com/clineamb/bootstrap-drawer" target="_blank"><i class="fa fa-github-alt"></i> GitHub Repo</a></li>
<li role="presentation"><a href="http://www.npmjs.com/package/bootstrap-drawer" target="_blank"><i class="fa fa-share-square"></i> npm</a></li>
<li role="presentation"><a href="http://twitter.com/clineamb" target="_blank"><i class="fa fa-twitter"></i> @clineamb</a></li>
<li><a name=""><iframe src="https://ghbtns.com/github-btn.html?user=clineamb&type=follow&count=true" frameborder="0" scrolling="0" width="100%" height="20px"></iframe></a></li>
</ul>
<div class="drawer-footer">
<small>© 2015 Caroline Amaba</small>
</div>
</div>
</div>
<div id="drawer-docs">
<div class="jumbotron page-topper">
<div class="container">
<h1>bootstrap-drawer</h1>
<h4>bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!</h4>
</div>
</div>
<div id="drawer-docs-content" class="container">
<h2 id="what-is-it-">What Is It?</h2>
<p><a href="http://github.com/clineamb/bootstrap-drawer">bootstrap-drawer</a> is a Bootstrap add-on/plugin that, in Bootstrap style, adds an "off-canvas" element to your pages and containers. We call it a "drawer" in these parts.*</p>
<p>I've looked around for fast-and-easy ways of implementing this constantly (and consistently), and I've had to rebuild it a few times. Tired of doing this, I created this! I imagine there's a lot of people like me looking for something like this, especially one that easily works with their front-end framework of choice, Bootstrap.</p>
<p><small>* Mostly because "bootstrap-offcanvas" was taken, and I've always referred to it as a mobile "drawer".</small></p>
<hr>
<h2 id="requirements">Requirements</h2>
<p><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> is required for this plugin, since bootstrap-drawer is built on top of the framework. (Thus, <a href="http://jquery.com" target="_blank">jQuery</a> is also required.)</p>
<h3 id="download">Download</h3>
<p><code>bower install bootstrap-drawer</code> or <code>npm install bootstrap-drawer</code></p>
<p>You can also find all the release on the <a href="https://github.com/clineamb/bootstrap-drawer/releases" target="_blank">GitHub repo releases page</a>. For your convenience, here are some links to the latest releases:</p>
<p><a href="http://github.com/clineamb/bootstrap-drawer/releases/latest" target="_blank" class="btn btn-lg btn-primary"><i class="fa fa-github-alt"></i> Get Latest Vesion (1.0.1)</a>
<a href="http://github.com/clineamb/bootstrap-drawer/archive/1.0.1.zip" target="_blank" class="btn btn-lg btn-primary"><i class="fa fa-archive"></i> Download bootstrap-drawer-1.0.1.zip</a></p>
<hr>
<h2 id="basic-setup">Basic Setup</h2>
<p>If you simply just want to quickly use bootstrap-drawer with Bootstrap, you just need to include <code>dist/bootstrap-drawer.css</code> after Bootstrap, and then include any other files after that.</p>
<pre><code class="lang-html"><html>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap-drawer.min.css">
<link rel="stylesheet" type="text/css" href="YOUR_OTHER_STYLES.css">
</head>
<body class="has-canvas">
<!-- Off Canvas & other HTML here -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="drawer.min.js"></script>
<script src="YOUR_CUSTOM_JS.js"></script>
</body>
</html>
</code></pre>
<h2 id="basic-usage">Basic Usage</h2>
<h3 id="full-page-drawer">Full Page Drawer</h3>
<p>To get a simple, full-page drawer, like the one here in the docs, simply add <code>.has-drawer</code> to your body, and add the <code>.drawer</code> container like so:</p>
<pre><code class="lang-html"><body class="has-drawer"> <!-- add this class to your body for proper sizing -->
<div id="drawerExample" class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold" aria-labelledby="drawerExample">
<div class="drawer-controls">
<a href="#drawerExample" data-toggle="drawer" href="#drawerExample" aria-foldedopen="false" aria-controls="drawerExample" class="btn btn-primary btn-sm">Menu</a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<h2 class="drawer-title">Menu</h2>
</div>
<div class="drawer-body">
<p>
This is a properly padded container for content in the
drawer that isn't a navigation.
</p>
<a href="#">A Regular Link</a>
</div>
<ul class="drawer-nav">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<div class="drawer-footer">
<small>&copy; Caroline Amaba</small>
</div>
</div>
</div>
<div class="container">
<!-- content as per usual -->
</div>
</body>
</code></pre>
<h3 id="container-nested-drawer">Container-nested Drawer</h3>
<div class="panel panel-default has-inner-drawer example-container">
<div id="drawerExample2" class="drawer drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample2">
<div class="drawer-controls">
<a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen="false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<h2 class="drawer-title">Menu</h2>
</div>
<ul class="drawer-nav">
<li role="presentation" class="active"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
</ul>
</div>
</div>
<div class="panel-body">
<p>You can also nest the drawer in a block container by adding the <code>.drawer-inside</code> class to <code>.drawer</code> and adding <code>.has-inner-drawer</code> to your parent container, like so:</p>
<p>You can also use panels inside of other elements that have a defined with and height. A <code>z-index</code> will also need to be defined.</p>
<p>You'll also have to make sure that you give your controls (however you do them) are visible. In this example, the <code>.panel-body</code> was given <code>padding-left: 10%</code> so that the Menu button isn't running into the content of the panel.</p>
</div>
</div>
<pre><code class="lang-html"><div class="panel panel-default has-inner-drawer">
<div id="drawerExample2" class="drawer drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample2">
<div class="drawer-controls">
<a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen="false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
</div>
<div class="drawer-contents">
<div class="drawer-heading">
<h2 class="drawer-title">Menu</h2>
</div>
<ul class="drawer-nav">
<li role="presentation" class="active"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
</ul>
</div>
</div>
<div class="panel-body" style="padding-left: 10%">
<p>You can also use panels inside of other elements that have
a defined with and height.</p>
<p>You'll have to be responsible for making sure your controls accessible.</p>
</div>
</div>
</code></pre>
<p><br></p>
<h2 id="bootstrap-drawer-components">bootstrap-drawer components</h2>
<p><strong>bootstrap_drawer</strong> was built with a Bootstrap-minded style. The classes used are very similar to the <code>.nav</code> and <code>.panel</code> classes in Bootstrap. The Bootstrap <code>data-api</code> for toggling the drawer is, likewise, built like <code>.collapse</code> and its javascript component.</p>
<p>bootstrap-drawer does <strong>not</strong> (yet) have a class that expands to a navbar on bigger screens. For now, the main focus of bootstrap-drawer was to do one thing well. In a later version, there may be an additional ".drawer-navbar" class to remove the drawer on larger screens.</p>
<h3 id="class-breakdown">Class Breakdown</h3>
<p><code>.drawer</code> is the main class. The sizing system is based on the 12-column system of Bootstrap, using <code>.dw-SIZE-#COLS</code>. The drawer is built mobile-first, like the rest of Bootstrap, and the size in width is based on the document's fluid width (a percentage of it, based on the columns). This size becomes relative when using it inside another container.</p>
<p><code>.fold</code> started the menu closed (<code>.fold.open</code> starts the menu opened). This class, as well as the
<a href="javascript.html">javascript component</a> are built similarly to the <code>.collapse</code> components. It had to
be named differently because bootstrap-drawer is folding horizontally and not collapsing vertically.</p>
<pre><code class="lang-html"><div class="drawer dw-xs-10 dw-sm-6 dw-md-4 fold">
...
</div>
</code></pre>
<p><code>.drawer-controls</code> is a special drawer column made to house a toggle button for the drawer that moves with the component. It's an optional piece, since the menu can be toggled by other buttons either using the built-in <code>data-toggle="drawer"</code> or the jQuery API (<code>$('.drawer').drawer();</code>).</p>
<pre><code class="lang-html"><div id="drawerExample2" class="drawer dw-xs-5 fold" aria-labelledby="drawerExample2">
<div class="drawer-controls">
<a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen="false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a>
</div>
<div class="drawer-contents">
...
</div>
</div>
</code></pre>
<p><br></p>
<h4 id="drawer-contents">Drawer Contents</h4>
<p><code>.drawer-contents</code> wraps the main parts of the drawer: <code>.drawer-heading</code>, <code>.drawer-body</code>, <code>.drawer-nav</code> / <code>.drawer-fullnav</code>, <code>.drawer-footer</code>. These classes are very similar to how Bootstrap's <code>.panel</code> inner classes work. </p>
<p><code>.drawer-nav</code> and <code>.drawer-fullnav</code> are already-built nav classes that are based on the <code>.nav.nav-pills.nav-stacked</code> combination of classes. The difference between the two is that <code>.drawer-nav</code> has padding on the left and right, while <code>.drawer-fullnav</code> goes the entire width of the drawer.</p>
<p>You can use <code>.drawer-body</code> to wrap you own navigation, as well, or just include content.</p>
<p><strong>DEMOS:</strong></p>
<div class="row">
<div class="col-xs-12 col-sm-6">
<div class="panel panel-default has-inner-drawer example-container">
<div id="drawerExample3a" class="drawer drawer-inside dw-xs-8 fold open">
<div class="drawer-contents">
<div class="drawer-heading">
<h4 class="drawer-title">.drawer-nav example</h4>
</div>
<ul class="drawer-nav">
<li role="presentation" class="active"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="panel panel-default has-inner-drawer example-container">
<div id="drawerExample3a" class="drawer drawer-inside dw-xs-8 fold open">
<div class="drawer-contents">
<div class="drawer-heading">
<h4 class="drawer-title">.drawer-fullnav example</h4>
</div>
<ul class="drawer-fullnav">
<li role="presentation" class="active"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
<li role="presentation"><a href="#">Link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<p><code>.drawer-heading</code>, like <code>.panel-heading</code> is specially styled to be the top of the drawer. In addition, there is a <code>.drawer-title</code> class that can be put within <code>.drawer-heading</code> for a specially styled <code><h#></code> tag.</p>
<p><code>.drawer-footer</code> finishes off the components of the drawer (again, like <code>.panel-footer</code>). Additionally, by giving the <code>.drawer-footer</code> an additional <code>locked</code> class, the footer will then stick to the bottom of the drawer. This is absolutely positioned within the drawer, and you should be careful that your content does not overlap the <code>.drawer-footer</code>.</p>
<div id="drawer-docs-footer">
<a href="#docDrawer" data-toggle="drawer" class="btn btn-lg btn-block btn-primary">Open the Drawer</a>
</div>
</div>
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="example/bootstrap.min.js"></script>
<script src="example/highlight.pack.js"></script>
<script src="dist/js/drawer.js"></script>
<script src="example/docs.js"></script>
</body>
</html>