mirror of https://github.com/ColorlibHQ/AdminLTE
Updated documentation
Abdullah Almsaeed
parent
d72176caa7
commit
2b8e2c3859
|
|
@ -456,9 +456,42 @@
|
|||
</ul><!-- /.sidebar-menu -->
|
||||
|
||||
</div><!-- /.sidebar -->
|
||||
</div><!-- /.main-sidebar -->
|
||||
</pre>
|
||||
</div><!-- /.main-sidebar --></pre>
|
||||
|
||||
<h3 id="component-control-sidebar">Control Sidebar</h3>
|
||||
<p class="lead">Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
|
||||
to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to
|
||||
slide over the content. The second pushes the content to make space for the sidebar. Either of
|
||||
these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
|
||||
<p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer
|
||||
to place it right after the footer.</p>
|
||||
<p class="lead">Dark Sidebar Markup</p>
|
||||
<pre class="prettyprint"><code class="lang-html"><!-- The Right Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Content of the sidebar goes here -->
|
||||
</aside>
|
||||
<!-- The sidebar's background -->
|
||||
<!-- This div must placed right after the sidebar for it to work-->
|
||||
<div class="control-sidebar-bg"></div></code></pre>
|
||||
|
||||
<p class="lead">Light Sidebar Markup</p>
|
||||
<pre class="prettyprint"><code class="lang-html"><!-- The Right Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-light">
|
||||
<!-- Content of the sidebar goes here -->
|
||||
</aside>
|
||||
<!-- The sidebar's background -->
|
||||
<!-- This div must placed right after the sidebar for it to work-->
|
||||
<div class="control-sidebar-bg"></div></code></pre>
|
||||
|
||||
<p class='lead'>Once you create the sidebar, you will need a toggle button to open/close it.
|
||||
By adding the attribute <code>data-toggle="control-sidebar"</code> to any button, it will
|
||||
automatically act as the toggle button.</p>
|
||||
|
||||
<p class="lead">Toggle Button Example</p>
|
||||
<button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button><br /><br />
|
||||
|
||||
<p class="lead">Sidebar Toggle Markup</p>
|
||||
<pre class="prettyprint"><code class="lang-html"><button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button></code></pre>
|
||||
<!-- ===================================================================== -->
|
||||
|
||||
<h3 id="component-info-box">Info Box</h3>
|
||||
|
|
@ -504,16 +537,14 @@
|
|||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
<p class="lead">Markup</p>
|
||||
<pre class="prettyprint"><code class="html">
|
||||
<div class="info-box">
|
||||
<pre class="prettyprint"><code class="lang-html"><div class="info-box">
|
||||
<-- Apply any bg-* class to to the icon to color it -->
|
||||
<span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Likes</span>
|
||||
<span class="info-box-number">93,139</span>
|
||||
</div><!-- /.info-box-content -->
|
||||
</div><!-- /.info-box -->
|
||||
</code></pre>
|
||||
</div><!-- /.info-box --></code></pre>
|
||||
|
||||
<h4>Second Type of Info Boxes</h4>
|
||||
<div class="row">
|
||||
|
|
@ -579,8 +610,7 @@
|
|||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
<p class="lead">Markup</p>
|
||||
<pre class="prettyprint"><code class="html">
|
||||
<-- Apply any bg-* class to to the info-box to color it -->
|
||||
<pre class="prettyprint"><code class="lang-html"><-- Apply any bg-* class to to the info-box to color it -->
|
||||
<div class="info-box bg-red">
|
||||
<span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
|
||||
<div class="info-box-content">
|
||||
|
|
@ -594,8 +624,7 @@
|
|||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div><!-- /.info-box-content -->
|
||||
</div><!-- /.info-box -->
|
||||
</code></pre>
|
||||
</div><!-- /.info-box --></code></pre>
|
||||
<p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
|
||||
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
|
||||
<!-- ===================================================================== -->
|
||||
|
|
@ -621,8 +650,7 @@
|
|||
The footer of the box
|
||||
</div><!-- box-footer -->
|
||||
</div><!-- /.box -->
|
||||
<pre class="prettyprint">
|
||||
<div class="box">
|
||||
<pre class="prettyprint"><div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Default Box Example</h3>
|
||||
<div class="box-tools pull-right">
|
||||
|
|
@ -703,8 +731,7 @@
|
|||
</div><!-- /.box -->
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
<pre class="prettyprint">
|
||||
<div class="box box-default">...</div>
|
||||
<pre class="prettyprint"><div class="box box-default">...</div>
|
||||
<div class="box box-primary">...</div>
|
||||
<div class="box box-info">...</div>
|
||||
<div class="box box-warning">...</div>
|
||||
|
|
|
|||
|
|
@ -65,10 +65,11 @@
|
|||
<li><a href="#layout"><i class='fa fa-circle-o'></i> Layout</a></li>
|
||||
<li><a href="#adminlte-options"><i class='fa fa-circle-o'></i> Javascript Options</a></li>
|
||||
<li class='treeview' id='scrollspy-components'>
|
||||
<a href="#components"><i class='fa fa-circle-o'></i> Components</a>
|
||||
<a href="javascript::;"><i class='fa fa-circle-o'></i> Components</a>
|
||||
<ul class='nav treeview-menu'>
|
||||
<li><a href='#component-main-header'>Main Header</a></li>
|
||||
<li><a href='#component-sidebar'>Sidebar</a></li>
|
||||
<li><a href='#component-control-sidebar'>Control Sidebar</a></li>
|
||||
<li><a href='#component-info-box'>Info Box</a></li>
|
||||
<li><a href='#component-box'>Boxes</a></li>
|
||||
<li><a href='#component-direct-chat'>Direct Chat</a></li>
|
||||
|
|
@ -162,6 +163,17 @@ include "license.html"
|
|||
<strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
|
||||
</footer>
|
||||
|
||||
<!-- Control Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Create the tabs -->
|
||||
<div class="pad">
|
||||
This is an example of the control sidebar.
|
||||
</div>
|
||||
</aside><!-- /.control-sidebar -->
|
||||
<!-- Add the sidebar's background. This div must be placed
|
||||
immediately after the control sidebar -->
|
||||
<div class='control-sidebar-bg'></div>
|
||||
|
||||
</div><!-- ./wrapper -->
|
||||
|
||||
<!-- jQuery 2.1.3 -->
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
/*
|
||||
* Documentation specific JS script
|
||||
* Documentation JS script
|
||||
*/
|
||||
$(function () {
|
||||
var slideToTop = $("<div />");
|
||||
|
|
@ -42,7 +42,7 @@ $(function () {
|
|||
scrollTop: 0
|
||||
}, 500);
|
||||
});
|
||||
$(".sidebar-menu li a").click(function () {
|
||||
$(".sidebar-menu li:not(.treeview) a").click(function () {
|
||||
var $this = $(this);
|
||||
var target = $this.attr("href");
|
||||
if (typeof target === 'string') {
|
||||
|
|
|
|||
|
|
@ -65,10 +65,11 @@
|
|||
<li><a href="#layout"><i class='fa fa-circle-o'></i> Layout</a></li>
|
||||
<li><a href="#adminlte-options"><i class='fa fa-circle-o'></i> Javascript Options</a></li>
|
||||
<li class='treeview' id='scrollspy-components'>
|
||||
<a href="#components"><i class='fa fa-circle-o'></i> Components</a>
|
||||
<a href="javascript::;"><i class='fa fa-circle-o'></i> Components</a>
|
||||
<ul class='nav treeview-menu'>
|
||||
<li><a href='#component-main-header'>Main Header</a></li>
|
||||
<li><a href='#component-sidebar'>Sidebar</a></li>
|
||||
<li><a href='#component-control-sidebar'>Control Sidebar</a></li>
|
||||
<li><a href='#component-info-box'>Info Box</a></li>
|
||||
<li><a href='#component-box'>Boxes</a></li>
|
||||
<li><a href='#component-direct-chat'>Direct Chat</a></li>
|
||||
|
|
@ -825,9 +826,42 @@ AdminLTE/
|
|||
</ul><!-- /.sidebar-menu -->
|
||||
|
||||
</div><!-- /.sidebar -->
|
||||
</div><!-- /.main-sidebar -->
|
||||
</pre>
|
||||
</div><!-- /.main-sidebar --></pre>
|
||||
|
||||
<h3 id="component-control-sidebar">Control Sidebar</h3>
|
||||
<p class="lead">Control sidebar is the right side bar. It can be used for many purposes and is extremely easy
|
||||
to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to
|
||||
slide over the content. The second pushes the content to make space for the sidebar. Either of
|
||||
these methods can be set through the <a href="#adminlte-options">Javascript options</a>.</p>
|
||||
<p class="lead">The following code should be placed within the <code>.wrapper</code> div. I prefer
|
||||
to place it right after the footer.</p>
|
||||
<p class="lead">Dark Sidebar Markup</p>
|
||||
<pre class="prettyprint"><code class="lang-html"><!-- The Right Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Content of the sidebar goes here -->
|
||||
</aside>
|
||||
<!-- The sidebar's background -->
|
||||
<!-- This div must placed right after the sidebar for it to work-->
|
||||
<div class="control-sidebar-bg"></div></code></pre>
|
||||
|
||||
<p class="lead">Light Sidebar Markup</p>
|
||||
<pre class="prettyprint"><code class="lang-html"><!-- The Right Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-light">
|
||||
<!-- Content of the sidebar goes here -->
|
||||
</aside>
|
||||
<!-- The sidebar's background -->
|
||||
<!-- This div must placed right after the sidebar for it to work-->
|
||||
<div class="control-sidebar-bg"></div></code></pre>
|
||||
|
||||
<p class='lead'>Once you create the sidebar, you will need a toggle button to open/close it.
|
||||
By adding the attribute <code>data-toggle="control-sidebar"</code> to any button, it will
|
||||
automatically act as the toggle button.</p>
|
||||
|
||||
<p class="lead">Toggle Button Example</p>
|
||||
<button class="btn btn-primary" data-toggle="control-sidebar">Toggle Right Sidebar</button><br /><br />
|
||||
|
||||
<p class="lead">Sidebar Toggle Markup</p>
|
||||
<pre class="prettyprint"><code class="lang-html"><button class="btn btn-default" data-toggle="control-sidebar">Toggle Right Sidebar</button></code></pre>
|
||||
<!-- ===================================================================== -->
|
||||
|
||||
<h3 id="component-info-box">Info Box</h3>
|
||||
|
|
@ -873,16 +907,14 @@ AdminLTE/
|
|||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
<p class="lead">Markup</p>
|
||||
<pre class="prettyprint"><code class="html">
|
||||
<div class="info-box">
|
||||
<pre class="prettyprint"><code class="lang-html"><div class="info-box">
|
||||
<-- Apply any bg-* class to to the icon to color it -->
|
||||
<span class="info-box-icon bg-red"><i class="fa fa-star-o"></i></span>
|
||||
<div class="info-box-content">
|
||||
<span class="info-box-text">Likes</span>
|
||||
<span class="info-box-number">93,139</span>
|
||||
</div><!-- /.info-box-content -->
|
||||
</div><!-- /.info-box -->
|
||||
</code></pre>
|
||||
</div><!-- /.info-box --></code></pre>
|
||||
|
||||
<h4>Second Type of Info Boxes</h4>
|
||||
<div class="row">
|
||||
|
|
@ -948,8 +980,7 @@ AdminLTE/
|
|||
</div><!-- /.col -->
|
||||
</div><!-- /.row -->
|
||||
<p class="lead">Markup</p>
|
||||
<pre class="prettyprint"><code class="html">
|
||||
<-- Apply any bg-* class to to the info-box to color it -->
|
||||
<pre class="prettyprint"><code class="lang-html"><-- Apply any bg-* class to to the info-box to color it -->
|
||||
<div class="info-box bg-red">
|
||||
<span class="info-box-icon"><i class="fa fa-comments-o"></i></span>
|
||||
<div class="info-box-content">
|
||||
|
|
@ -963,8 +994,7 @@ AdminLTE/
|
|||
70% Increase in 30 Days
|
||||
</span>
|
||||
</div><!-- /.info-box-content -->
|
||||
</div><!-- /.info-box -->
|
||||
</code></pre>
|
||||
</div><!-- /.info-box --></code></pre>
|
||||
<p class="lead">The only thing you need to change to alternate between these style is change the placement of the bg-* class. For the
|
||||
first style apply any bg-* class to the icon itself. For the other style, apply the bg-* class to the info-box div.</p>
|
||||
<!-- ===================================================================== -->
|
||||
|
|
@ -990,8 +1020,7 @@ AdminLTE/
|
|||
The footer of the box
|
||||
</div><!-- box-footer -->
|
||||
</div><!-- /.box -->
|
||||
<pre class="prettyprint">
|
||||
<div class="box">
|
||||
<pre class="prettyprint"><div class="box">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Default Box Example</h3>
|
||||
<div class="box-tools pull-right">
|
||||
|
|
@ -1072,8 +1101,7 @@ AdminLTE/
|
|||
</div><!-- /.box -->
|
||||
</div>
|
||||
</div><!-- /.row -->
|
||||
<pre class="prettyprint">
|
||||
<div class="box box-default">...</div>
|
||||
<pre class="prettyprint"><div class="box box-default">...</div>
|
||||
<div class="box box-primary">...</div>
|
||||
<div class="box box-info">...</div>
|
||||
<div class="box box-warning">...</div>
|
||||
|
|
@ -2068,6 +2096,17 @@ AdminLTE/
|
|||
<strong>Copyright © 2014-2015 <a href="http://almsaeedstudio.com">Almsaeed Studio</a>.</strong> All rights reserved.
|
||||
</footer>
|
||||
|
||||
<!-- Control Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Create the tabs -->
|
||||
<div class="pad">
|
||||
This is an example of the control sidebar.
|
||||
</div>
|
||||
</aside><!-- /.control-sidebar -->
|
||||
<!-- Add the sidebar's background. This div must be placed
|
||||
immediately after the control sidebar -->
|
||||
<div class='control-sidebar-bg'></div>
|
||||
|
||||
</div><!-- ./wrapper -->
|
||||
|
||||
<!-- jQuery 2.1.3 -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue