mirror of https://github.com/ColorlibHQ/AdminLTE
- updated docs assets - added yarn install info - overhauled color parts in layout.md - added components/main-sidebar, /control-sidebar & /cards - updated title in components/main-header - created blank pages javascript/control-sidebar& /push-menu to ensure docs generation - renamed Sidebar to Main Sidebarpull/2183/head
REJack
5 years ago
parent
b313b6ab1e
commit
c66ab85940
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,294 @@
|
||||
---
|
||||
layout: page
|
||||
title: Cards Component
|
||||
---
|
||||
|
||||
The card component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text. It comes in many different styles that we will explore below.
|
||||
|
||||
##### Default Card Markup
|
||||
{: .text-bold .text-dark .mt-5}
|
||||
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Default Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<span class="badge badge-primary">Label</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Default Card Example</h3>
|
||||
<div class="card-tools">
|
||||
<!-- Buttons, labels, and many other things can be placed here! -->
|
||||
<!-- Here is a label for example -->
|
||||
<span class="badge badge-primary">Label</span>
|
||||
</div>
|
||||
<!-- /.card-tools -->
|
||||
</div>
|
||||
<!-- /.card-header -->
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<!-- /.card-body -->
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
<!-- /.card-footer -->
|
||||
</div>
|
||||
<!-- /.card -->
|
||||
```
|
||||
{: .max-height-300}
|
||||
|
||||
##### Card Variants
|
||||
{: .text-bold .text-dark .mt-5}
|
||||
You can change the style of the box by adding any of the contextual classes.
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Default Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Primary Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-secondary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Secondary Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Success Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-info">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Info Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Warning Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Danger Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-dark">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Dark Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="card">...</div>
|
||||
<div class="card card-primary">...</div>
|
||||
<div class="card card-secondary">...</div>
|
||||
<div class="card card-success">...</div>
|
||||
<div class="card card-info">...</div>
|
||||
<div class="card card-warning">...</div>
|
||||
<div class="card card-danger">...</div>
|
||||
<div class="card card-dark">...</div>
|
||||
```
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-outline">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Default Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-outline card-primary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Primary Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-outline card-secondary">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Secondary Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-outline card-success">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Success Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-outline card-info">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Info Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-outline card-warning">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Warning Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-outline card-danger">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Danger Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<div class="card card-outline card-dark">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Dark Card Example</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
The body of the card
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
The footer of the card
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
```html
|
||||
<div class="card card-outline card-primary">...</div>
|
||||
<div class="card card-outline card-secondary">...</div>
|
||||
<div class="card card-outline card-success">...</div>
|
||||
<div class="card card-outline card-info">...</div>
|
||||
<div class="card card-outline card-warning">...</div>
|
||||
<div class="card card-outline card-danger">...</div>
|
||||
<div class="card card-outline card-dark">...</div>
|
||||
```
|
||||
@ -0,0 +1,42 @@
|
||||
---
|
||||
layout: page
|
||||
title: Control Sidebar Component
|
||||
---
|
||||
|
||||
Control sidebar is the right sidebar. 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 [Javascript options]({% link javascript/control-sidebar.md %}).
|
||||
|
||||
The following code should be placed within the `.wrapper` div. I prefer to place it right after the footer.
|
||||
|
||||
##### Dark Sidebar Markup
|
||||
{: .text-bold .text-dark}
|
||||
```html
|
||||
<!-- Control Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-dark">
|
||||
<!-- Control sidebar content goes here -->
|
||||
<div class="p-3">
|
||||
<!-- Content of the sidebar goes here -->
|
||||
</div>
|
||||
</aside>
|
||||
<!-- /.control-sidebar -->
|
||||
```
|
||||
|
||||
##### Light Sidebar Markup
|
||||
{: .text-bold .text-dark .mt-5}
|
||||
```html
|
||||
<!-- Control Sidebar -->
|
||||
<aside class="control-sidebar control-sidebar-light">
|
||||
<!-- Control sidebar content goes here -->
|
||||
<div class="p-3">
|
||||
<!-- Content of the sidebar goes here -->
|
||||
</div>
|
||||
</aside>
|
||||
<!-- /.control-sidebar -->
|
||||
```
|
||||
|
||||
##### Control Sidebar Toggle Markup
|
||||
{: .text-bold .text-dark .mt-5}
|
||||
Once you create the sidebar, you will need a toggle button to open/close it. By adding the attribute data-toggle="control-sidebar" to any button, it will automatically act as the toggle button.
|
||||
|
||||
```html
|
||||
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#">Toggle Control Sidebar</a>
|
||||
```
|
||||
@ -0,0 +1,76 @@
|
||||
---
|
||||
layout: page
|
||||
title: Main Sidebar Component
|
||||
---
|
||||
|
||||
The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction of a sidebar:
|
||||
|
||||
```html
|
||||
<!-- Main Sidebar Container -->
|
||||
<aside class="main-sidebar sidebar-dark-primary elevation-4">
|
||||
<!-- Brand Logo -->
|
||||
<a href="index3.html" class="brand-link">
|
||||
<img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
|
||||
style="opacity: .8">
|
||||
<span class="brand-text font-weight-light">AdminLTE 3</span>
|
||||
</a>
|
||||
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<!-- Sidebar user panel (optional) -->
|
||||
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
|
||||
<div class="image">
|
||||
<img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image">
|
||||
</div>
|
||||
<div class="info">
|
||||
<a href="#" class="d-block">Alexander Pierce</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar Menu -->
|
||||
<nav class="mt-2">
|
||||
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">
|
||||
<!-- Add icons to the links using the .nav-icon class
|
||||
with font-awesome or any other icon font library -->
|
||||
<li class="nav-item has-treeview menu-open">
|
||||
<a href="#" class="nav-link active">
|
||||
<i class="nav-icon fas fa-tachometer-alt"></i>
|
||||
<p>
|
||||
Starter Pages
|
||||
<i class="right fas fa-angle-left"></i>
|
||||
</p>
|
||||
</a>
|
||||
<ul class="nav nav-treeview">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Active Page</p>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="far fa-circle nav-icon"></i>
|
||||
<p>Inactive Page</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link">
|
||||
<i class="nav-icon fas fa-th"></i>
|
||||
<p>
|
||||
Simple Link
|
||||
<span class="right badge badge-danger">New</span>
|
||||
</p>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<!-- /.sidebar-menu -->
|
||||
</div>
|
||||
<!-- /.sidebar -->
|
||||
</aside>
|
||||
```
|
||||
{: .max-height-300}
|
||||
|
||||
For more infromation about the JS part of the sidebar, please visit the [PushMenu plugin page]({% link javascript/push-menu.md %})
|
||||
@ -0,0 +1,4 @@
|
||||
---
|
||||
layout: page
|
||||
title: Control Sidebar Plugin
|
||||
---
|
||||
@ -0,0 +1,4 @@
|
||||
---
|
||||
layout: page
|
||||
title: Push Menu Plugin
|
||||
---
|
||||
Loading…
Reference in new issue