github
/
AdminLTE
mirror of https://github.com/ColorlibHQ/AdminLTE
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #2797 from XhmikosR/docs 

Fix docs
pull/2816/head
REJack 2020-06-05 16:34:46 +02:00 committed by GitHub
parent 1f6c5a8181 7782373a12
commit 5ed7e97288
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 627 additions and 562 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.npmignore
View File

@ -1,5 +1,5 @@
/docs/
!/docs_html/
/docs_html/
/plugins/*
!/plugins/flot-old/
/.github/

6
docs/_config.yml
View File

@ -2,11 +2,9 @@ title: AdminLTE v3 Documentation
version: v3.1.0-pre
description: AdminLTE v3 Documentation
markdown: kramdown
kramdown:
auto_ids: false
baseurl: /docs/3.1
url: https://adminlte.io
highlighter: rouge
plugins:
- jekyll-seo-tag
- jekyll-sitemap

9
docs/_includes/foot.html
View File

@ -1,5 +1,4 @@
<script src="{{ 'assets/plugins/jquery/jquery.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ 'assets/plugins/bootstrap/js/bootstrap.bundle.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ 'assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ 'assets/js/adminlte.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/plugins/jquery/jquery.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/plugins/bootstrap/js/bootstrap.bundle.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js' | prepend: site.baseurl }}"></script>
<script src="{{ '/assets/js/adminlte.min.js' | prepend: site.baseurl }}"></script>

12
docs/_includes/footer.html
View File

@ -1,6 +1,6 @@
<footer class="main-footer">
<div class="float-right d-none d-sm-inline">
{{site.version}}
</div>
<strong>Copyright &copy; 2014-{{ site.time | date: '%Y' }} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>
<footer class="main-footer">
<div class="float-right d-none d-sm-inline">
{{ site.version }}
</div>
<strong>Copyright &copy; 2014-{{ site.time | date: '%Y' }} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
</footer>

22
docs/_includes/head.html
View File

@ -1,14 +1,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
{% seo %}
{% seo %}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="{{'assets/plugins/fontawesome-free/css/all.min.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="{{'assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="{{'assets/css/docs.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="{{'assets/css/highlighter.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="{{'assets/css/adminlte.min.css' | prepend: site.baseurl}}">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<link rel="stylesheet" href="{{ '/assets/plugins/fontawesome-free/css/all.min.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/assets/css/docs.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/assets/css/highlighter.css' | prepend: site.baseurl }}">
<link rel="stylesheet" href="{{ '/assets/css/adminlte.min.css' | prepend: site.baseurl }}">
</head>

70
docs/_includes/navbar.html
View File

@ -1,36 +1,36 @@
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v3.0
</a>
<div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
<a class="dropdown-item bg-info disabled" href="#">v3.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a>
<a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html">&lt;= v2.3</a>
</div>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li> -->
</ul>
<!-- SEARCH FORM -->
<!-- <form class="form-check-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
v3.0
</a>
<div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown">
<a class="dropdown-item bg-info disabled" href="#">v3.0</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a>
<a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html">&lt;= v2.3</a>
</div>
</form> -->
</nav>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<!-- <li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li> -->
</ul>
<!-- SEARCH FORM -->
<!-- <form class="form-check-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</form> -->
</nav>

96
docs/_includes/sidebar.html
View File

@ -1,51 +1,51 @@
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="{{'index.html' | prepend: site.baseurl}}" class="brand-link logo-switch">
<img src="{{'assets/img/logo-xs.png' | prepend: site.baseurl}}" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
<img src="{{'assets/img/logo-xl.png' | prepend: site.baseurl}}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
</a>
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
{% for item in site.navigation %}
{% assign subitem_active = 'false' %}
{% for subitem in item.subitems %}
{% assign subitem_url = '/' | append: subitem.url %}
{% if subitem_url == page.url %}
{% assign subitem_active = 'true' %}
{% endif %}
{% endfor %}
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="{{ '/index.html' | prepend: site.baseurl }}" class="brand-link logo-switch">
<img src="{{ '/assets/img/logo-xs.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
<img src="{{ '/assets/img/logo-xl.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
</a>
<div class="sidebar">
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
{% for item in site.navigation -%}
{%- assign subitem_active = 'false' -%}
{%- for subitem in item.subitems -%}
{%- assign subitem_url = '/' | append: subitem.url -%}
{%- if subitem_url == page.url -%}
{%- assign subitem_active = 'true' -%}
{%- endif -%}
{%- endfor %}
<li class="nav-item {% if item.subitems %}has-treeview{% endif %} {% if subitem_active == 'true' %}menu-open{% endif %}">
{% if item.url == 'index.html' %}
{% assign item_url = '/' %}
{% else %}
{% assign item_url = '/' | append: item.url %}
{% endif %}
<li class="nav-item{% if item.subitems %} has-treeview{% endif %}{% if subitem_active == 'true' %} menu-open{% endif %}">
{% if item.url == 'index.html' -%}
{%- assign item_url = '/' -%}
{%- else -%}
{%- assign item_url = '/' | append: item.url -%}
{%- endif %}
<a href="{% if item.url %}{{item.url | prepend: site.baseurl}}{% else %}#{% endif %}" class="nav-link {% if item_url == page.url %}active{% endif %}{% if subitem_active == 'true'%}active{% endif %}">
<i class="nav-icon {{item.icon}}"></i>
<p>
{{item.title}}
{% if item.subitems %}<i class="right fas fa-angle-left"></i>{% endif %}
</p>
</a>
<a href="{% if item.url %}{{ item.url | prepend: "/" | prepend: site.baseurl }}{% else %}#{% endif %}" class="nav-link{% if item_url == page.url %} active{% endif %}{% if subitem_active == 'true'%} active{% endif %}">
<i class="nav-icon {{ item.icon }}"></i>
<p>
{{ item.title }}
{% if item.subitems %}<i class="right fas fa-angle-left"></i>{% endif %}
</p>
</a>
{% if item.subitems %}
<ul class="nav nav-treeview">
{% for subitem in item.subitems %}
{% assign subitem_url = '/' | append: subitem.url %}
<li class="nav-item">
<a href="{{subitem.url | prepend: site.baseurl}}" class="nav-link {% if subitem_url == page.url %}active{% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>{{subitem.title}}</p>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
</aside>
{% if item.subitems -%}
<ul class="nav nav-treeview">
{% for subitem in item.subitems -%}
{%- assign subitem_url = '/' | append: subitem.url -%}
<li class="nav-item">
<a href="{{ subitem.url | prepend: "/" | prepend: site.baseurl }}" class="nav-link{% if subitem_url == page.url %} active{% endif %}">
<i class="far fa-circle nav-icon"></i>
<p>{{ subitem.title }}</p>
</a>
</li>
{%- endfor %}
</ul>
{%- endif %}
</li>
{% endfor %}
</ul>
</nav>
</div>
</aside>

4
docs/_layouts/default.html
View File

@ -9,11 +9,11 @@
{%- include navbar.html -%}
{%- include sidebar.html -%}
{{content}}
{{ content }}
{%- include footer.html -%}
</div>
{%- include foot.html -%}
{% include foot.html -%}
</body>
</html>

4
docs/_layouts/page.html
View File

@ -4,10 +4,10 @@ layout: default
<div class="content-wrapper px-4 py-2">
<div class="content-header">
<h1 class="text-dark">{{page.title}}</h1>
<h1 class="text-dark">{{ page.title }}</h1>
</div>
<div class="content px-2">
{{content}}
{{ content }}
</div>
</div>

3
docs/components/boxes.md
View File

@ -5,7 +5,6 @@ title: Boxes Components
There are two types of boxes, info boxes & small boxes. Both boxes are used to display statistical snippets.
##### Info Box
{: .text-bold .text-dark .mt-4}
@ -251,6 +250,7 @@ There are two types of boxes, info boxes & small boxes. Both boxes are used to d
##### Loading Style
{: .text-bold .text-dark .mt-5}
To simulate a loading state, simply place this code before the `.info-box` / `.small-box` closing tag.
> ##### Tip!
@ -315,6 +315,7 @@ To simulate a loading state, simply place this code before the `.info-box` / `.s
You can also use a dark loading style with adding `.dark` to `.overlay` like this code.
```html
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>

4
docs/components/cards.md
View File

@ -51,6 +51,7 @@ The card component is the most widely used component through out this template.
##### Card Variants
{: .text-bold .text-dark .mt-5}
You can change the style of the card by adding any of the contextual classes.
###### Default
@ -508,6 +509,7 @@ You can change the style of the card by adding any of the contextual classes.
##### Card Tools
{: .text-bold .text-dark .mt-5}
Cards can contain tools to deploy a specific event or provide simple info. The following examples makes use of multiple AdminLTE components within the header of the card.
AdminLTE data-card-widget attribute provides cards with the ability to collapse or be removed. The buttons are placed in the card-tools which is placed in the card-header.
@ -540,6 +542,7 @@ AdminLTE data-card-widget attribute provides cards with the ability to collapse
##### Loading Style
{: .text-bold .text-dark .mt-5}
To simulate a loading state, simply place this code before the `.card` closing tag.
```html
@ -605,6 +608,7 @@ To simulate a loading state, simply place this code before the `.card` closing t
You can also use a dark loading style with adding `.dark` to `.overlay` like this code.
```html
<div class="overlay dark">
<i class="fas fa-2x fa-sync-alt fa-spin"></i>

4
docs/components/control-sidebar.md
View File

@ -9,11 +9,13 @@ The following code should be placed within the `.wrapper` div. I prefer to place
##### Control Sidebar Push
{: .text-bold .text-dark}
By adding the `.control-sidebar-push` to `body`, the sidebar pushes the content away instead of overlaying the content.
You can also add `.control-sidebar-push-slide` to `body`, to push the content away with an transition.
##### Dark Sidebar Markup
{: .text-bold .text-dark}
```html
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-dark">
@ -27,6 +29,7 @@ You can also add `.control-sidebar-push-slide` to `body`, to push the content aw
##### Light Sidebar Markup
{: .text-bold .text-dark .mt-5}
```html
<!-- Control Sidebar -->
<aside class="control-sidebar control-sidebar-light">
@ -40,6 +43,7 @@ You can also add `.control-sidebar-push-slide` to `body`, to push the content aw
##### 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

100
docs/components/direct-chat.md
View File

@ -29,7 +29,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
@ -39,7 +39,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
You better believe it!
</div>
@ -49,7 +49,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
@ -59,7 +59,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
I would love to.
</div>
@ -70,7 +70,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -82,7 +82,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -94,7 +94,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -106,7 +106,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -118,7 +118,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -130,7 +130,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
@ -178,7 +178,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
@ -188,7 +188,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
You better believe it!
</div>
@ -198,7 +198,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
@ -208,7 +208,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
I would love to.
</div>
@ -219,7 +219,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -231,7 +231,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -243,7 +243,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -255,7 +255,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -267,7 +267,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -279,7 +279,7 @@ The direct chat widget extends the card component to create a beautiful chat int
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
@ -336,7 +336,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
@ -351,7 +351,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
You better believe it!
@ -366,7 +366,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
@ -381,7 +381,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<!-- /.direct-chat-infos -->
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<!-- /.direct-chat-img -->
<div class="direct-chat-text">
I would love to.
@ -396,7 +396,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -410,7 +410,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -424,7 +424,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -438,7 +438,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -452,7 +452,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -466,7 +466,7 @@ The direct chat widget extends the card component to create a beautiful chat int
<!-- End Contact Item -->
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
@ -529,7 +529,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
@ -539,7 +539,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
You better believe it!
</div>
@ -549,7 +549,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
@ -559,7 +559,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
I would love to.
</div>
@ -570,7 +570,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -582,7 +582,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -594,7 +594,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -606,7 +606,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -618,7 +618,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -630,7 +630,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.
@ -678,7 +678,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Is this template really for free? That's unbelievable!
</div>
@ -688,7 +688,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
You better believe it!
</div>
@ -698,7 +698,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-left">Alexander Pierce</span>
<span class="direct-chat-timestamp float-right">23 Jan 5:37 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
Working with AdminLTE on a great new app! Wanna join?
</div>
@ -708,7 +708,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<span class="direct-chat-name float-right">Sarah Bullock</span>
<span class="direct-chat-timestamp float-left">23 Jan 6:10 pm</span>
</div>
<img class="direct-chat-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="direct-chat-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="direct-chat-text">
I would love to.
</div>
@ -719,7 +719,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
<ul class="contacts-list">
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Count Dracula
@ -731,7 +731,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user7-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user7-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Sarah Doe
@ -743,7 +743,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nadia Jolie
@ -755,7 +755,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user5-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user5-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Nora S. Vans
@ -767,7 +767,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user6-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user6-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
John K.
@ -779,7 +779,7 @@ Of course you can use direct chat with a outline card by adding the class `.card
</li>
<li>
<a href="#">
<img class="contacts-list-img" src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="message user image">
<img class="contacts-list-img" src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="message user image">
<div class="contacts-list-info">
<span class="contacts-list-name">
Kenneth M.

591
docs/components/main-header.md
View File

@ -64,7 +64,7 @@ The main header contains the navbar. Construction of the navbar differs slightly
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<img src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
@ -80,7 +80,7 @@ The main header contains the navbar. Construction of the navbar differs slightly
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<img src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
@ -96,7 +96,7 @@ The main header contains the navbar. Construction of the navbar differs slightly
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<img src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
@ -147,12 +147,161 @@ The main header contains the navbar. Construction of the navbar differs slightly
</nav>
```html
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
class="fas fa-th-large"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
```
{: .max-height-300}
#### Top Nav Layout. Main Header Example.
> ##### Reminder!
> To use this main header instead of the regular one, you must add the `layout-top-nav` class to the body tag.
{: .quote-orange}
Top navbar example can be found in this [demo page](https://adminlte.io/themes/dev/AdminLTE/pages/layout/top-nav.html).
<nav class="navbar navbar-expand navbar-light navbar-white">
<div class="container">
<a href="index3.html" class="navbar-brand">
<img src="{{ '/assets/img/AdminLTELogo.png' | prepend: site.baseurl }}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
@ -161,10 +310,10 @@ The main header contains the navbar. Construction of the navbar differs slightly
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2">
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
@ -172,7 +321,6 @@ The main header contains the navbar. Construction of the navbar differs slightly
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
@ -184,13 +332,149 @@ The main header contains the navbar. Construction of the navbar differs slightly
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-comments"></i>
<i class="fas fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ '/assets/img/user1-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ '/assets/img/user8-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{ '/assets/img/user3-128x128.jpg' | prepend: site.baseurl }}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
class="fas fa-th-large"></i></a>
</li>
</ul>
</div>
</nav>
```html
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-light navbar-white">
<div class="container">
<a href="index3.html" class="navbar-brand">
<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>
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown4">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
@ -277,292 +561,9 @@ The main header contains the navbar. Construction of the navbar differs slightly
class="fas fa-th-large"></i></a>
</li>
</ul>
</nav>
<!-- /.navbar -->
```
{: .max-height-300}
#### Top Nav Layout. Main Header Example.
> ##### Reminder!
> To use this main header instead of the regular one, you must add the `layout-top-nav` class to the body tag.
{: .quote-orange}
Top navbar example can be found in this [demo page](https://adminlte.io/themes/dev/AdminLTE/pages/layout/top-nav.html).
<nav class="navbar navbar-expand navbar-light navbar-white">
<div class="container">
<a href="index3.html" class="navbar-brand">
<img src="{{'assets/img/AdminLTELogo.png' | relative_url}}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">AdminLTE 3</span>
</a>
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user1-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user8-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="{{'assets/img/user3-128x128.jpg' | relative_url}}" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
class="fas fa-th-large"></i></a>
</li>
</ul>
</div>
</nav>
```html
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-light navbar-white">
<div class="container">
<a href="index3.html" class="navbar-brand">
<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>
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="index3.html" class="nav-link">Home</a>
</li>
<li class="nav-item d-none d-sm-inline-block">
<a href="#" class="nav-link">Contact</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Help
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown4">
<a class="dropdown-item" href="#">FAQ</a>
<a class="dropdown-item" href="#">Support</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Contact</a>
</div>
</li>
</ul>
<!-- SEARCH FORM -->
<form class="form-inline ml-3">
<div class="input-group input-group-sm">
<input class="form-control form-control-navbar" type="search" placeholder="Search" aria-label="Search">
<div class="input-group-append">
<button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<!-- Messages Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="fas fa-comments"></i>
<span class="badge badge-danger navbar-badge">3</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 mr-3 img-circle">
<div class="media-body">
<h3 class="dropdown-item-title">
Brad Diesel
<span class="float-right text-sm text-danger"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">Call me whenever you can...</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
John Pierce
<span class="float-right text-sm text-muted"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">I got your message bro</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<!-- Message Start -->
<div class="media">
<img src="dist/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 img-circle mr-3">
<div class="media-body">
<h3 class="dropdown-item-title">
Nora Silvester
<span class="float-right text-sm text-warning"><i class="fas fa-star"></i></span>
</h3>
<p class="text-sm">The subject goes here</p>
<p class="text-sm text-muted"><i class="far fa-clock mr-1"></i> 4 Hours Ago</p>
</div>
</div>
<!-- Message End -->
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
</div>
</li>
<!-- Notifications Dropdown Menu -->
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<i class="far fa-bell"></i>
<span class="badge badge-warning navbar-badge">15</span>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<span class="dropdown-header">15 Notifications</span>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-envelope mr-2"></i> 4 new messages
<span class="float-right text-muted text-sm">3 mins</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-users mr-2"></i> 8 friend requests
<span class="float-right text-muted text-sm">12 hours</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">
<i class="fas fa-file mr-2"></i> 3 new reports
<span class="float-right text-muted text-sm">2 days</span>
</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button"><i
class="fas fa-th-large"></i></a>
</li>
</ul>
</div>
</nav>
<!-- /.navbar -->
<!-- /.navbar -->
```
{: .max-height-300}

128
docs/components/main-sidebar.md
View File

@ -6,76 +6,78 @@ 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>
<!-- 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>
<!-- 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>
<!-- 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>
<!-- 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}
#### Alternate Logo
You can use two logo images instead of logo with text, you only need to change the markup to this:
```html
<a href="#" class="brand-link logo-switch">
<img src="dist/img/logo-xs.png" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs">
@ -88,7 +90,9 @@ Based on the example above, you can replace `.brand-image-xl` on `.logo-xs` with
#### Search Form in Sidebar
You can add this code above user-panel or nav-sidebar:
```html
<form class="form-inline">
<div class="input-group">
@ -106,9 +110,11 @@ You can add this code above user-panel or nav-sidebar:
#### Additional Classes
##### Sidebar
- `.sidebar-no-expand` Disables Auto Expand on Hover/Focus
##### Navbar
- `.nav-child-indent` Child indent
- `.nav-compact` Compact nav items
- `.nav-flat` Flat nav style

6
docs/components/miscellaneous.md
View File

@ -2,11 +2,14 @@
layout: page
title: Miscellaneous
---
AdminLTE has smaller custom classes that not related to other components are listed here.
### Text Size
You can change the font sizes with adding to any element `.text-*` e.g. (`.text-sm`).
- `.text-xs` (0.75rem)
- `.text-sm` (0.875rem)
- `.text-md` (1rem)
@ -19,12 +22,13 @@ You can change the font sizes with adding to any element `.text-*` e.g. (`.text-
### Dropdown Menu Large
You can add the `.dropdown-menu-lg` to `.dropdown-menu` for a bigger dropdown menu.
### Dropdown Hover
You can add the `.dropdown-hover` class beside this classes:
- `.dropdown` (to use hover for the whole dropdown menu)
- `.dropdown-menu` (to use hover on a specific menu item & sub menus)
- `.dropdown-submenu` (to use hover on a specific sub menu item & sub sub menus)

10
docs/components/plugins.md
View File

@ -5,10 +5,13 @@ title: Plugins
AdminLTE comes with color overrides & extras for the following plugins.
### Bootstrap Slider
You can override the color for bootstrap slider tracks with the following classes:
- `.slider-*`
Example:
```html
<div class="slider-red">
<input type="text" value="" class="slider form-control" data-slider...>
@ -21,6 +24,7 @@ You can also change the layout of the slider with the following classes:
- `.slider-horizontal`
Example:
```html
<div class="slider-red">
<input type="text" value="" class="slider slider-vertical form-control" data-slider...>
@ -29,10 +33,13 @@ Example:
### iCheck Bootstrap
You can override the color of a iCheck checkbox/radio input, add the following class:
- `.icheck-*`
Example:
```html
<div class="icheck-primary">
<input type="checkbox" id="checkbox1">
@ -44,6 +51,7 @@ Example:
### Pace
You can override the color for all pace themes, load your desired theme and add one the following classes to `body`:
- `.pace-*`
@ -79,8 +87,10 @@ Example: `<body class="pace-success">`
### SweetAlert
If you use SweetAlert and load the SweetAlert CSS before AdminLTE's CSS, then the colors of any icon changes to AdminLTE's default colors.
### Toastr
If you use Toastr and load the Toastr CSS before AdminLTE's CSS, then the background colors changes to AdminLTE's default colors.

19
docs/components/ribbons.md
View File

@ -21,16 +21,17 @@ The ribbon comes in three sizes to display more text or use larger font sizes, d
</div>
```html
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
<div class="ribbon-wrapper">
<div class="ribbon bg-primary">
Ribbon
</div>
</div>
```
{: .max-height-300}
##### Ribbon Size Variations
{: .text-bold .text-dark .mt-5}
<div class="row">
<div class="col-sm-4">
<div class="position-relative p-3 bg-gray" style="height: 180px">
@ -169,11 +170,11 @@ The ribbon comes in three sizes to display more text or use larger font sizes, d
```html
<div class="position-relative">
<img src="../../dist/img/photo1.png" alt="Photo 1" class="img-fluid">
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-success text-lg">
Ribbon
</div>
<img src="../../dist/img/photo1.png" alt="Photo 1" class="img-fluid">
<div class="ribbon-wrapper ribbon-lg">
<div class="ribbon bg-success text-lg">
Ribbon
</div>
</div>
</div>
```

6
docs/components/timeline.md
View File

@ -3,8 +3,7 @@ layout: page
title: Timeline Component
---
The timeline component displays an event history.
You can use it for descriptions of events that occurred in a particular time section.
The timeline component displays an event history. You can use it for descriptions of events that occurred in a particular time section.
##### Default
@ -48,8 +47,7 @@ You can use it for descriptions of events that occurred in a particular time sec
##### Extra style
There is an additional class for styling.
It darkens the elements, highlighting it against the general background.
There is an additional class for styling. It darkens the elements, highlighting it against the general background.
You can use it with adding `.timeline-inverse` to `.timeline`.
```html

3
docs/dependencies.md
View File

@ -2,7 +2,9 @@
layout: page
title: Dependencies & Plugins
---
#### Dependencies
AdminLTE depends on two main frameworks. The downloadable package contains both of these libraries, so you don't have to manually download them.
{: .lead}
@ -11,7 +13,6 @@ AdminLTE depends on two main frameworks. The downloadable package contains both
- [Popper.js 1.14.7+](https://popper.js.org/)
- [All other plugins are listed below](#plugins)
<a id="plugins" class="anchor"></a>
#### Plugins
{: .mt-4 .anchor}

20
docs/index.md
View File

@ -5,30 +5,36 @@ title: Introduction
AdminLTE can be installed using multiple methods. Pick your favorite method from the list below. Please be sure to check the dependencies section before continuing.
#### Download
## Download
{: .h3 }
### From GitHub
###### __From GitHub__
Visit the releases section on GitHub and download the [latest release](https://github.com/ColorlibHQ/AdminLTE/releases).
#### Command Line
### Command Line
#### Via NPM
###### __Via NPM__
```bash
npm install admin-lte@^3.0 --save
```
###### __Via Yarn__
#### Via Yarn
```bash
yarn add admin-lte@^3.0
```
###### __Via Composer__
#### Via Composer
```bash
composer require "almasaeed2010/adminlte=~3.0"
```
###### __Via Git__
#### Via Git
```bash
git clone https://github.com/ColorlibHQ/AdminLTE.git
```

5
docs/javascript/card-refresh.md
View File

@ -6,7 +6,8 @@ title: Card Refresh Plugin
The card refresh plugin provides the functionality for loading ajax content into the card.
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
This plugin can be activated as a jQuery plugin or using the data API.
###### Data API
{: .text-bold }
@ -14,9 +15,9 @@ This plugin can be activated as a jQuery plugin or using the data api.
Activate the plugin by adding a button with `data-card-widget="card-refresh"` to the card and provide the required `data-source="/URL-TO-CONTENT"` option. By doing that, the plugin will automatically create a GET request to the provided URL and render the returned response the `.card-body` section of the card. If you need to process the returned response before rendering, you should use the jQuery API, which provides hooks to deal with the response.
###### jQuery
{: .text-bold }
The jQuery API provides more customizable options that allows the developer to pre-process the request before rendering and post-process it after rendering.
```js

25
docs/javascript/card-widget.md
View File

@ -5,17 +5,18 @@ title: Card Widget Plugin
The card widget plugin provides the functionality for collapsing, expanding and removing a card.
##### Usage
This plugin can be activated as a jQuery plugin or using the data api.
### Usage
###### Data API
{: .text-bold }
This plugin can be activated as a jQuery plugin or using the data API.
This plugin provides two data-api attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation
#### Data API
This plugin provides two `data-api` attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the [card HTML structure]({% link components/cards.md %}), visit the card component documentation
##### `data-card-widget="collapse"`
`data-card-widget="collapse"`
<br />
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.
<div class="row">
<div class="col-12 col-md-4">
<div class="card">
@ -53,9 +54,10 @@ This attribute, when attached to a button, allows the box to be collapsed/expand
</div>
</div>
`data-card-widget="remove"`
<br />
##### `data-card-widget="remove"`
This attribute, when attached to a button, allows the box to be removed when clicked.
<div class="row">
<div class="col-12 col-md-4">
<div class="card">
@ -93,9 +95,10 @@ This attribute, when attached to a button, allows the box to be removed when cli
</div>
</div>
`data-card-widget="maximize"`
<br />
##### `data-card-widget="maximize"`
This attribute, when attached to a button, allows the box to be maximize/minimize when clicked.
<div class="row">
<div class="col-12 col-md-4">
<div class="card">

15
docs/layout.md
View File

@ -8,6 +8,7 @@ title: Layout
{: .quote-info .mt-0}
The layout consists of four major parts:
- Wrapper `.wrapper`. A div that wraps the whole site.
- Main Header `.main-header`. Contains the logo and navbar.
- Sidebar `.sidebar-wrapper`. Contains the user panel and sidebar menu.
@ -22,7 +23,6 @@ The layout consists of four major parts:
AdminLTE 3.0 provides a set of options to apply to your main layout. Each one of these classes can be added to the body tag to get the desired goal.
- Fixed Sidebar: use the class `.layout-fixed` to get a fixed sidebar.
- Fixed Navbar: use the class `.layout-navbar-fixed` to get a fixed navbar.
- Fixed Footer: use the class `.layout-footer-fixed` to get a fixed footer.
@ -32,7 +32,9 @@ AdminLTE 3.0 provides a set of options to apply to your main layout. Each one of
##### Responsive Variations
You can also use the following classes for responsive changes with placing
You can also use the following classes for responsive changes with placing
- Fixed Navbar:
- use the class `.layout-*-navbar-fixed` to get a fixed navbar.
- use the class `.layout-*-navbar-not-fixed` to get a not fixed navbar.
@ -67,6 +69,7 @@ AdminLTE 3.0 provides a set of color variations to apply to your sidebar (light
The following colors are available:
##### Theme Colors
<div class="row">
<div class="col-sm-4 col-lg-3 p-3 bg-primary"> Primary (primary) / Blue (blue)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-secondary"> Secondary (secondary)</div>
@ -78,6 +81,7 @@ The following colors are available:
##### Black/White Nuances
{: .mt-4}
<div class="row">
<div class="col-sm-4 col-lg-3 p-3 bg-black"> Black (black)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-gray-dark"> Gray Dark (gray-dark)</div>
@ -87,6 +91,7 @@ The following colors are available:
##### Colors
{: .mt-4}
<div class="row">
<div class="col-sm-4 col-lg-3 p-3 bg-indigo"> Indigo (indigo)</div>
<div class="col-sm-4 col-lg-3 p-3 bg-navy"> Navy (navy)</div>
@ -106,18 +111,24 @@ The following colors are available:
##### Custom Range / Switch
For custom colored custom-range you can add this classes:
- `.custom-range-*`
For custom colored custom-switch you can add this classes:
- `.custom-switch-off-*` (for custom switch off)
- `.custom-switch-on-*` (for custom switch on)
##### Toasts
You can also use `bg-*` beside the `.toast` to get a nice colored toast.
##### Plugin Support
You can use the all the colors above with these plugins:
- Bootstrap Slider
- `.slider-*` (wrapped around the slider)
- iCheck-Bootstrap

3
docs/license.md
View File

@ -6,6 +6,7 @@ title: License
AdminLTE is an open source project that is licensed under the [MIT license](https://opensource.org/licenses/MIT). This allows you to do pretty much anything you want as long as you include the copyright in "all copies or substantial portions of the Software." Attribution is not required (though very much appreciated).
<h5 class="text-bold text-dark mt-3">What You Are <span class="text-success">Allowed</span> To Do With AdminLTE</h5>
- Use in commercial projects.
- Use in personal/private projects.
- Modify and change the work.
@ -13,8 +14,10 @@ AdminLTE is an open source project that is licensed under the [MIT license](http
- Sublicense: incorporate the work into something that has a more restrictive license.
<h5 class="text-bold text-dark mt-3">What You Are <span class="text-danger">Not Allowed</span> To Do With AdminLTE</h5>
- The work is provided "as is". You may not hold the author liable.
<h5 class="text-bold text-dark mt-3">What You <span class="text-warning">Must</span> Do When Using AdminLTE</h5>
- Include the license notice in all copies of the work.
- Include the copyright notice in all copies of the work. This applies to everything except the notice in the footer of the HTML example pages.

22
docs/upgrade-guide.md
View File

@ -4,15 +4,18 @@ title: Upgrade Guide
---
#### Migration from v2.4.x
The first step to migrate AdminLTE v2.4.x to v3.0 is upgrade the Bootstrap 3 base code to Bootstrap 4, the full instruction <a href="https://getbootstrap.com/docs/4.3/migration/">here</a> after you upgraded the base code you need to update the markups.
#### CSS / JS Files
Since AdminLTE v3.0 Bootstrap 4 is complete included in AdminLTE's CSS file. You will not need to load the Bootstrap CSS file `bootstrap(.min).css`, but you will need the Bootstrap JS file `bootstrap(.min).js`.
##### Main Header
The biggest change in Main Header is the Logo is moved to Main Sidebar and the Main Header has now color variations, here are all changes:
1. Logo
1. Logo
- `<a href="index2.html" class="logo">` moved & rebuild to `.brand-link` inside `.main-sidebar`
2. Header / Nav
- `<header class="main-header">` & `<nav class="navbar navbar-static-top">` merged with `<nav class="main-header navbar navbar-expand navbar-white navbar-light">`
@ -22,6 +25,7 @@ The biggest change in Main Header is the Logo is moved to Main Sidebar and the M
- `<div class="navbar-custom-menu">` & `<ul class="nav navbar-nav">` merged with `<ul class="navbar-nav ml-auto">`
##### Main Sidebar
Like above the biggest change is the Main Sidebar contains now the Logo and the sidebar has now color variations, here all changes:
1. Main Sidebar Color
@ -61,7 +65,7 @@ Old sample entry
```
</div>
<div class="col-md-6" markdown="1">
New sample entry
New sample entry
```html
<li class="nav-item">
<a href="pages/widgets.html" class="nav-link">
@ -88,7 +92,9 @@ Old sample entry (with tree menu)
</span>
</a>
<ul class="treeview-menu">
<li class="active"><a href="index.html"><i class="fa fa-circle-o"></i> Dashboard v1</a></li>
<li class="active"><a href="index.html">
<i class="fa fa-circle-o"></i> Dashboard v1</a>
</li>
</ul>
</li>
```
@ -118,7 +124,9 @@ New sample entry (with tree menu)
</div>
##### Content Header
The biggest change in content header is AdminLTE use here now `.container-fluid`, `.row` & `.col-*` and the breadcrumb markup changed, here are all changes:
- `<section class="content-header">` replaced with `<div class="content-header">`
- `<div class="container-fluid">` added in `<div class="content-header">`
- `<h1>` & `<ol class="breadcrumb">` rebuild in `<div class="row">` & `<div class="col-sm-6">`
@ -169,21 +177,27 @@ New Content Header Markup
</div>
##### Content
The content has no change, we only split `<section class="content container-fluid">` in two elements:
- `<section class="content">`
- `<div class="container-fluid">`
##### Footer
The footer has only one little change for the right sided div.
- `<div class="pull-right hidden-xs">` changed to `<div class="float-right d-none d-sm-inline">`
##### Miscellaneous
Here are some other little css/html changes since v3.0:
- `.label` renamed to `.badge`
##### JavaScript Plugins
Here are some other little JavaScript changes since v3.0:
- `data-toggle="*"` renamed to `data-widget="*"` instead of CardWidget items
- for CardWidget it's now `data-card-widget="*"`