maxmustermann/AdminLTE
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Markdown tweaks

Browse source
This commit is contained in:
XhmikosR 2020-06-02 16:57:24 +03:00
parent edc51cc61b
commit 6017b241bf
16 changed files with 171 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

1
docs/components/main-header.md
View file

@ -426,6 +426,7 @@ Top navbar example can be found in this [demo page](https://adminlte.io/themes/d
</ul>
</div>
</nav>
```html
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-light navbar-white">

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="*"`