main-sidebar.md 0000644 00000011576 15025020644 0007431 0 ustar 00 ---
layout: page
title: Main Sidebar Component
---
The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction of a sidebar:
```html
```
{: .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
```
> Example from v3.0 docs.
Based on the example above, you can replace `.brand-image-xl` on `.logo-xs` with `.brand-image-xs` or vice versa on `.logo-xl` for changed logo sizes.
#### Brand with Pushmenu Button
You can place the pushmenu button inside the brand, simply replace the brand-link code with the code below:
```html
```
#### Search Form in Sidebar
You can add this code above user-panel or nav-sidebar:
```html
```
{: .max-height-300}
#### Sidebar Custom Area
You can add a Custom Area inside the Sidebar to display extra buttons or text below your menu entries.
You can simply add this code after the `div.sidebar`:
```html
```
> ##### Warning!
> The Sidebar Custom Area works only with `.layout-fixed` enabled.
{: .quote-warning}
#### 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
- `.nav-legacy` Legacy v2 nav style
- `.nav-collapse-hide-child` Hide nav item submenus on collapsed sidebar
> ##### Tip!
> You can also use `.text-sm` on `.nav-sidebar` or `.brand-link` for smaller font.
{: .quote-info}
For more information about the JS part of the sidebar, please visit the [PushMenu plugin page]({% link javascript/push-menu.md %})
plugins.md 0000644 00000003532 15025020644 0006550 0 ustar 00 ---
layout: page
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
```
You can also change the layout of the slider with the following classes:
- `.slider-vertical`
- `.slider-horizontal`
Example:
```html
```
### iCheck Bootstrap
You can override the color of a iCheck checkbox/radio input, add the following class:
- `.icheck-*`
Example:
```html
```
### Pace
You can override the color for all pace themes, load your desired theme and add one the following classes to `body`:
- `.pace-*`
- barber-shop
- flat-top
- minimal
- `.pace-big-counter-*`
- big-counter
- `.pace-bounce-*`
- bounce
- `pace-center-atom-*`
- center-atom
- `pace-center-circle-*`
- center-circle
- `pace-center-radar-*`
- center-radar
- `pace-center-simple-*`
- center-simple
- `pace-corner-indicator-*`
- corner-indicator
- `.pace-flash-*`
- flash
- `.pace-fill-left-*`
- fill-left
- `.pace-loading-bar-*`
- loading-bar
- `.pace-material-*`
- material
- `.pace-mac-osx-*`
- mac-osx
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.
cards.md 0000644 00000041731 15025020644 0006166 0 ustar 00 ---
layout: page
title: Cards Component
---
The card component is the most widely used component through out this template. You can use it for anything from displaying charts to just blocks of text. It comes in many different styles that we will explore below.
##### Default Card Markup
{: .text-bold .text-dark .mt-5}
Default Card Example
Label
The body of the card
```html
Default Card Example
Label
The body of the card
```
{: .max-height-300}
##### Card Variants
{: .text-bold .text-dark .mt-5}
You can change the style of the card by adding any of the contextual classes.
###### Default
{: .text-bold .text-dark}
Default Card Example
The body of the card
Primary Card Example
The body of the card
Secondary Card Example
The body of the card
Success Card Example
The body of the card
Info Card Example
The body of the card
Warning Card Example
The body of the card
Danger Card Example
The body of the card
Dark Card Example
The body of the card
```html
...
...
...
...
...
...
...
...
```
###### Outline
{: .text-bold .text-dark}
Primary Card Example
The body of the card
Secondary Card Example
The body of the card
Success Card Example
The body of the card
Info Card Example
The body of the card
Warning Card Example
The body of the card
Danger Card Example
The body of the card
Dark Card Example
The body of the card
```html
...
...
...
...
...
...
...
```
###### Background Color
{: .text-bold .text-dark}
Primary Card Example
The body of the card
Secondary Card Example
The body of the card
Success Card Example
The body of the card
Info Card Example
The body of the card
Warning Card Example
The body of the card
Danger Card Example
The body of the card
Dark Card Example
The body of the card
```html
...
...
...
...
...
...
...
```
###### Gradient Background Color
{: .text-bold .text-dark}
Primary Card Example
The body of the card
Secondary Card Example
The body of the card
Success Card Example
The body of the card
Info Card Example
The body of the card
Warning Card Example
The body of the card
Danger Card Example
The body of the card
Dark Card Example
The body of the card
```html
...
...
...
...
...
...
...
```
##### 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.
```html
Card Tools
The body of the card
```
{: .max-height-300}
##### Loading Style
{: .text-bold .text-dark .mt-5}
To simulate a loading state, simply place this code before the `.card` closing tag.
```html
```
Loading state
The body of the card
Loading state
The body of the card
Loading state
The body of the card
Loading state
The body of the card
You can also use a dark loading style with adding `.dark` to `.overlay` like this code.
```html
```
Loading state (dark)
The body of the card
Loading state (dark)
The body of the card
Loading state (dark)
The body of the card
Loading state (dark)
The body of the card
ribbons.md 0000644 00000011113 15025020644 0006517 0 ustar 00 ---
layout: page
title: Ribbons Component
---
The ribbons component is a easy way to display informations above any content. The `.ribbon-warpper` needs to be inside a element with _position:relative;_. In this docs page we place the ribbon always inside `` for demo purpose but it can placed inside cards, table rows & many more.
The ribbon comes in three sizes to display more text or use larger font sizes, default (only `.ribbon-wrapper`), large (`.ribbon-wrapper` with `.ribbon-lg`), extra large (`.ribbon-wrapper` with `.ribbon-xl`).
##### Example Markup
{: .text-bold .text-dark .mt-5}
Ribbon Extra Large
.ribbon-wrapper.ribbon-xl .ribbon
```html
Ribbon
```
```html
Ribbon Large
```
```html
Ribbon Extra Large
```
##### Text Size Variations
{: .text-bold .text-dark .mt-5}
Ribbon
Ribbon Large with Large Text
.ribbon-wrapper.ribbon-lg .ribbon.text-lg
Ribbon
Ribbon Extra Large with Large Text
.ribbon-wrapper.ribbon-xl .ribbon.text-lg
Ribbon
Ribbon Extra Large with Extra Large Text
.ribbon-wrapper.ribbon-xl .ribbon.text-xl
```html
Ribbon
```
```html
Ribbon
```
```html
Ribbon
```
##### Image Example Code
{: .text-bold .text-dark .mt-5}
```html
Ribbon
```
direct-chat.md 0000644 00000107365 15025020644 0007267 0 ustar 00 ---
layout: page
title: Direct Chat Components
---
The direct chat widget extends the card component to create a beautiful chat interface. This widget consists of a required messages pane and an __optional__ contacts pane. Examples:
Direct Chat
3
Alexander Pierce23 Jan 2:00 pm
Is this template really for free? That's unbelievable!
Sarah Bullock23 Jan 2:05 pm
You better believe it!
Alexander Pierce23 Jan 5:37 pm
Working with AdminLTE on a great new app! Wanna join?
```
{: .max-height-300}
##### Outline Direct Chat
{: .text-bold .text-dark .mt-5}
Of course you can use direct chat with a outline card by adding the class `.card-outline` to the card. Here are a couple of examples:
Direct Chat
3
Alexander Pierce23 Jan 2:00 pm
Is this template really for free? That's unbelievable!
Sarah Bullock23 Jan 2:05 pm
You better believe it!
Alexander Pierce23 Jan 5:37 pm
Working with AdminLTE on a great new app! Wanna join?
boxes.md 0000644 00000025267 15025020644 0006220 0 ustar 00 ---
layout: page
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}
Messages1,410
Bookmarks410
Uploads13,648
```html
Messages1,410
```
{: .col-md-4 .col-sm-6 .col-12}
```html
Bookmarks410
```
{: .col-md-4 .col-sm-6 .col-12}
```html
Uploads13,648
```
{: .col-md-4 .col-sm-6 .col-12}
> ##### Note!
> To wrap the text in to a new line add to the info-box-text the class text-wrap.
> To truncate the text with ... add to the info-box-content the class text-truncate. (Here you should add a tooltip to display the whole pharse)
{: .quote-danger}
##### Info Box with Progress Bar
{: .text-bold .text-dark .mt-4}
##### 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!
> We recommend `.fa-2x` for Info Boxes and `.fa-3x` for Small Boxes to get a nicely sized loading icon, like in this documentation.
{: .quote-info}
```html
timeline.md 0000644 00000003350 15025020644 0006673 0 ustar 00 ---
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.
##### Default
```html
```
{: .max-height-300}
##### Extra style
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
```
main-header.md 0000644 00000057717 15025020644 0007257 0 ustar 00 ---
layout: page
title: Main Header Component
---
> ##### Reminder!
> AdminLTE uses all of Bootstrap 4 components. It's a good start to review the [Bootstrap documentation](https://getbootstrap.com/) to get an idea of the various components that this documentation __does not__ cover.
{: .quote-orange .mt-0}
> ##### Tip!
> If you go through the example pages and would like to copy a component, right-click on the component and choose "inspect element" to get to the HTML quicker than scanning the HTML page.
{: .quote-info}
The main header contains the navbar. Construction of the navbar differs slightly from Bootstrap because it has components that Bootstrap doesn't provide. The navbar can be constructed in two ways. This is an example for the normal navbar and next we will provide an example for the top nav layout with a logo too.
```html
```
{: .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).
```html
```
{: .max-height-300}
> ##### Tip!
> To get a bigger dropdown menu you can add `.dropdown-menu-lg` or `.dropdown-menu-xl` to `.dropdown-menu`.
> You can also get the legacy dropdown offset with adding `.dropdown-legacy` to `.main-header`.
{: .quote-info}
miscellaneous.md 0000644 00000002121 15025020644 0007723 0 ustar 00 ---
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)
- `.text-lg` (1.25rem)
- `.text-xl` (2rem)
> ##### Tip!
> You can also add `.text-sm` to `body`, with this you get a complete smaller font on the UI or can you add `.text-sm` to `.main-sidebar` or `.main-header` & `.brand-link`.
{: .quote-info}
### 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)
### Form Control Bottom Border Only
You can change the form-control input to a bottom border only style with adding the `.form-control-border` class.
control-sidebar.md 0000644 00000003452 15025020644 0010157 0 ustar 00 ---
layout: page
title: Control Sidebar Component
---
Control sidebar is the right sidebar. It can be used for many purposes and is extremely easy to create. The sidebar ships with two different show/hide styles. The first allows the sidebar to slide over the content. The second pushes the content to make space for the sidebar. Either of these methods can be set through the [JavaScript options]({% link javascript/control-sidebar.md %}).
The following code should be placed within the `.wrapper` div. I prefer to place it right after the footer.
##### 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
```
##### Light Sidebar Markup
{: .text-bold .text-dark .mt-5}
```html
```
##### 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
Toggle Control Sidebar
```
