diff --git a/docs/components/boxes.md b/docs/components/boxes.md index 5124b55bf..9bf472694 100644 --- a/docs/components/boxes.md +++ b/docs/components/boxes.md @@ -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
diff --git a/docs/components/cards.md b/docs/components/cards.md index bac251605..181869b0e 100644 --- a/docs/components/cards.md +++ b/docs/components/cards.md @@ -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
diff --git a/docs/components/control-sidebar.md b/docs/components/control-sidebar.md index 3023512fb..afb672803 100644 --- a/docs/components/control-sidebar.md +++ b/docs/components/control-sidebar.md @@ -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
+ ```html
+ + ``` {: .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 AdminLTE Docs Logo Small @@ -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
@@ -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 diff --git a/docs/components/miscellaneous.md b/docs/components/miscellaneous.md index e68753633..bfa095fb7 100644 --- a/docs/components/miscellaneous.md +++ b/docs/components/miscellaneous.md @@ -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) - diff --git a/docs/components/plugins.md b/docs/components/plugins.md index 11eee3746..b14883220 100644 --- a/docs/components/plugins.md +++ b/docs/components/plugins.md @@ -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
@@ -21,6 +24,7 @@ You can also change the layout of the slider with the following classes: - `.slider-horizontal` Example: + ```html
@@ -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
@@ -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: `` ### 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. diff --git a/docs/components/ribbons.md b/docs/components/ribbons.md index 38c7c45ae..5dd0a753d 100644 --- a/docs/components/ribbons.md +++ b/docs/components/ribbons.md @@ -21,16 +21,17 @@ The ribbon comes in three sizes to display more text or use larger font sizes, d
```html -
-
- Ribbon -
+
+
+ Ribbon
+
``` {: .max-height-300} ##### Ribbon Size Variations {: .text-bold .text-dark .mt-5} +
@@ -169,11 +170,11 @@ The ribbon comes in three sizes to display more text or use larger font sizes, d ```html
- Photo 1 -
-
- Ribbon -
+ Photo 1 +
+
+ Ribbon
+
``` diff --git a/docs/components/timeline.md b/docs/components/timeline.md index d519bf15c..874d70ad0 100644 --- a/docs/components/timeline.md +++ b/docs/components/timeline.md @@ -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 diff --git a/docs/dependencies.md b/docs/dependencies.md index da3c25758..311afcabb 100644 --- a/docs/dependencies.md +++ b/docs/dependencies.md @@ -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) - #### Plugins {: .mt-4 .anchor} diff --git a/docs/index.md b/docs/index.md index 2c32d66c7..b990bf9c1 100644 --- a/docs/index.md +++ b/docs/index.md @@ -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 ``` diff --git a/docs/javascript/card-refresh.md b/docs/javascript/card-refresh.md index facaae8f9..89e5722d4 100644 --- a/docs/javascript/card-refresh.md +++ b/docs/javascript/card-refresh.md @@ -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 diff --git a/docs/javascript/card-widget.md b/docs/javascript/card-widget.md index ebf767710..b1ea17a15 100644 --- a/docs/javascript/card-widget.md +++ b/docs/javascript/card-widget.md @@ -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"` -
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked. +
@@ -53,9 +54,10 @@ This attribute, when attached to a button, allows the box to be collapsed/expand
-`data-card-widget="remove"` -
+##### `data-card-widget="remove"` + This attribute, when attached to a button, allows the box to be removed when clicked. +
@@ -93,9 +95,10 @@ This attribute, when attached to a button, allows the box to be removed when cli
-`data-card-widget="maximize"` -
+##### `data-card-widget="maximize"` + This attribute, when attached to a button, allows the box to be maximize/minimize when clicked. +
diff --git a/docs/layout.md b/docs/layout.md index be4cfb69f..86604bf39 100644 --- a/docs/layout.md +++ b/docs/layout.md @@ -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 +
Primary (primary) / Blue (blue)
Secondary (secondary)
@@ -78,6 +81,7 @@ The following colors are available: ##### Black/White Nuances {: .mt-4} +
Black (black)
Gray Dark (gray-dark)
@@ -87,6 +91,7 @@ The following colors are available: ##### Colors {: .mt-4} +
Indigo (indigo)
Navy (navy)
@@ -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 diff --git a/docs/license.md b/docs/license.md index 5c8e2abed..41b935deb 100644 --- a/docs/license.md +++ b/docs/license.md @@ -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).
What You Are Allowed To Do With AdminLTE
+ - 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.
What You Are Not Allowed To Do With AdminLTE
+ - The work is provided "as is". You may not hold the author liable.
What You Must Do When Using AdminLTE
+ - 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. diff --git a/docs/upgrade-guide.md b/docs/upgrade-guide.md index 9bd134b67..4d6d869d5 100644 --- a/docs/upgrade-guide.md +++ b/docs/upgrade-guide.md @@ -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 here 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 - `