File manager - Edit - /home/autoph/public_html/projects/api/public/components.tar
Back
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 <!-- Main Sidebar Container --> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <!-- Brand Logo --> <a href="index3.html" class="brand-link"> <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8"> <span class="brand-text font-weight-light">AdminLTE 3</span> </a> <!-- Sidebar --> <div class="sidebar"> <!-- Sidebar user panel (optional) --> <div class="user-panel mt-3 pb-3 mb-3 d-flex"> <div class="image"> <img src="dist/img/user2-160x160.jpg" class="img-circle elevation-2" alt="User Image"> </div> <div class="info"> <a href="#" class="d-block">Alexander Pierce</a> </div> </div> <!-- Sidebar Menu --> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"> <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library --> <li class="nav-item 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"> <img src="dist/img/logo-xl.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px"> </a> ``` > 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 <div class="brand-link d-flex justify-content-between align-items-center"> <a class="brand-link" href="index3.html"> <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"> <span class="brand-text font-weight-light">AdminLTE 3</span> </a> <a class="pushmenu" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a> </div> ``` #### Search Form in Sidebar You can add this code above user-panel or nav-sidebar: ```html <form class="form-inline"> <div class="input-group"> <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search"> <div class="input-group-append"> <button class="btn btn-sidebar" type="submit"> <i class="fas fa-search"></i> </button> </div> </div> </form> ``` {: .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 <div class="sidebar-custom"> <a href="#" class="btn btn-link"><i class="fas fa-cogs"></i></a> <a href="#" class="btn btn-secondary hide-on-collapse pos-right">Help</a> </div> ``` > ##### 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 <div class="slider-red"> <input type="text" value="" class="slider form-control" data-slider...> </div> ``` You can also change the layout of the slider with the following classes: - `.slider-vertical` - `.slider-horizontal` Example: ```html <div class="slider-red"> <input type="text" value="" class="slider slider-vertical form-control" data-slider...> </div> ``` ### 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"> <label for="checkbox1"> Checkbox Label </label> </div> ``` ### 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: `<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. 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} <div class="card"> <div class="card-header"> <h3 class="card-title">Default Card Example</h3> <div class="card-tools"> <span class="badge badge-primary">Label</span> </div> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> ```html <div class="card"> <div class="card-header"> <h3 class="card-title">Default Card Example</h3> <div class="card-tools"> <!-- Buttons, labels, and many other things can be placed here! --> <!-- Here is a label for example --> <span class="badge badge-primary">Label</span> </div> <!-- /.card-tools --> </div> <!-- /.card-header --> <div class="card-body"> The body of the card </div> <!-- /.card-body --> <div class="card-footer"> The footer of the card </div> <!-- /.card-footer --> </div> <!-- /.card --> ``` {: .max-height-300} ##### Card Variants {: .text-bold .text-dark .mt-5} You can change the style of the card by adding any of the contextual classes. ###### Default {: .text-bold .text-dark} <div class="row"> <div class="col-sm-3"> <div class="card"> <div class="card-header"> <h3 class="card-title">Default Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-primary"> <div class="card-header"> <h3 class="card-title">Primary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-secondary"> <div class="card-header"> <h3 class="card-title">Secondary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-success"> <div class="card-header"> <h3 class="card-title">Success Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="card card-info"> <div class="card-header"> <h3 class="card-title">Info Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-warning"> <div class="card-header"> <h3 class="card-title">Warning Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-danger"> <div class="card-header"> <h3 class="card-title">Danger Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-dark"> <div class="card-header"> <h3 class="card-title">Dark Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> ```html <div class="card">...</div> <div class="card card-primary">...</div> <div class="card card-secondary">...</div> <div class="card card-success">...</div> <div class="card card-info">...</div> <div class="card card-warning">...</div> <div class="card card-danger">...</div> <div class="card card-dark">...</div> ``` ###### Outline {: .text-bold .text-dark} <div class="row"> <div class="col-sm-3"> <div class="card card-outline card-primary"> <div class="card-header"> <h3 class="card-title">Primary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-secondary"> <div class="card-header"> <h3 class="card-title">Secondary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-success"> <div class="card-header"> <h3 class="card-title">Success Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-info"> <div class="card-header"> <h3 class="card-title">Info Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="card card-outline card-warning"> <div class="card-header"> <h3 class="card-title">Warning Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-danger"> <div class="card-header"> <h3 class="card-title">Danger Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card card-outline card-dark"> <div class="card-header"> <h3 class="card-title">Dark Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> ```html <div class="card card-outline card-primary">...</div> <div class="card card-outline card-secondary">...</div> <div class="card card-outline card-success">...</div> <div class="card card-outline card-info">...</div> <div class="card card-outline card-warning">...</div> <div class="card card-outline card-danger">...</div> <div class="card card-outline card-dark">...</div> ``` ###### Background Color {: .text-bold .text-dark} <div class="row"> <div class="col-sm-3"> <div class="card bg-primary"> <div class="card-header"> <h3 class="card-title">Primary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-secondary"> <div class="card-header"> <h3 class="card-title">Secondary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-success"> <div class="card-header"> <h3 class="card-title">Success Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-info"> <div class="card-header"> <h3 class="card-title">Info Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="card bg-warning"> <div class="card-header"> <h3 class="card-title">Warning Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-danger"> <div class="card-header"> <h3 class="card-title">Danger Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-dark"> <div class="card-header"> <h3 class="card-title">Dark Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> ```html <div class="card bg-primary">...</div> <div class="card bg-secondary">...</div> <div class="card bg-success">...</div> <div class="card bg-info">...</div> <div class="card bg-warning">...</div> <div class="card bg-danger">...</div> <div class="card bg-dark">...</div> ``` ###### Gradient Background Color {: .text-bold .text-dark} <div class="row"> <div class="col-sm-3"> <div class="card bg-gradient-primary"> <div class="card-header"> <h3 class="card-title">Primary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-secondary"> <div class="card-header"> <h3 class="card-title">Secondary Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-success"> <div class="card-header"> <h3 class="card-title">Success Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-info"> <div class="card-header"> <h3 class="card-title">Info Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="card bg-gradient-warning"> <div class="card-header"> <h3 class="card-title">Warning Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-danger"> <div class="card-header"> <h3 class="card-title">Danger Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> <div class="col-sm-3"> <div class="card bg-gradient-dark"> <div class="card-header"> <h3 class="card-title">Dark Card Example</h3> </div> <div class="card-body"> The body of the card </div> <div class="card-footer"> The footer of the card </div> </div> </div> </div> ```html <div class="card bg-gradient-primary">...</div> <div class="card bg-gradient-secondary">...</div> <div class="card bg-gradient-success">...</div> <div class="card bg-gradient-info">...</div> <div class="card bg-gradient-warning">...</div> <div class="card bg-gradient-danger">...</div> <div class="card bg-gradient-dark">...</div> ``` ##### 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 <div class="card card-primary"> <div class="card-header"> <h3 class="card-title">Card Tools</h3> <div class="card-tools"> <!-- This will cause the card to maximize when clicked --> <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button> <!-- This will cause the card to collapse when clicked --> <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button> <!-- This will cause the card to be removed when clicked --> <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button> </div> <!-- /.card-tools --> </div> <!-- /.card-header --> <div class="card-body"> The body of the card </div> <!-- /.card-body --> </div> <!-- /.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 <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> ``` <div class="row"> <div class="col-md-3"> <div class="card card-primary"> <div class="card-header"> <h3 class="card-title">Loading state</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card card-outline card-primary"> <div class="card-header"> <h3 class="card-title">Loading state</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card bg-primary"> <div class="card-header"> <h3 class="card-title">Loading state</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card bg-gradient-primary"> <div class="card-header"> <h3 class="card-title">Loading state</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> </div> 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> </div> ``` <div class="row"> <div class="col-md-3"> <div class="card card-primary"> <div class="card-header"> <h3 class="card-title">Loading state (dark)</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card card-outline card-primary"> <div class="card-header"> <h3 class="card-title">Loading state (dark)</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card bg-primary"> <div class="card-header"> <h3 class="card-title">Loading state (dark)</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-3"> <div class="card bg-gradient-primary"> <div class="card-header"> <h3 class="card-title">Loading state (dark)</h3> </div> <div class="card-body"> The body of the card </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> </div> 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 `<div class="position-relative p-3 bg-gray" style="height: 180px"></div>` 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} <div class="position-relative p-3 bg-gray" style="height: 180px"> <div class="ribbon-wrapper"> <div class="ribbon bg-primary"> Ribbon </div> </div> Ribbon Default <br /> <small>.ribbon-wrapper.ribbon-lg .ribbon</small> </div> ```html <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"> <div class="ribbon-wrapper"> <div class="ribbon bg-primary"> Ribbon </div> </div> Ribbon Default <br /> <small>.ribbon-wrapper.ribbon-lg .ribbon</small> </div> </div> <div class="col-sm-4"> <div class="position-relative p-3 bg-gray" style="height: 180px"> <div class="ribbon-wrapper ribbon-lg"> <div class="ribbon bg-info"> Ribbon Large </div> </div> Ribbon Large <br /> <small>.ribbon-wrapper.ribbon-lg .ribbon</small> </div> </div> <div class="col-sm-4"> <div class="position-relative p-3 bg-gray" style="height: 180px"> <div class="ribbon-wrapper ribbon-xl"> <div class="ribbon bg-secondary"> Ribbon Extra Large </div> </div> Ribbon Extra Large <br /> <small>.ribbon-wrapper.ribbon-xl .ribbon</small> </div> </div> </div> <div class="row"> <div class="col-sm-4" markdown="1"> ```html <div class="ribbon-wrapper"> <div class="ribbon bg-primary"> Ribbon </div> </div> ``` </div> <div class="col-sm-4" markdown="1"> ```html <div class="ribbon-wrapper ribbon-lg"> <div class="ribbon bg-info"> Ribbon Large </div> </div> ``` </div> <div class="col-sm-4" markdown="1"> ```html <div class="ribbon-wrapper ribbon-xl"> <div class="ribbon bg-secondary"> Ribbon Extra Large </div> </div> ``` </div> </div> ##### Text 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"> <div class="ribbon-wrapper ribbon-lg"> <div class="ribbon bg-success text-lg"> Ribbon </div> </div> Ribbon Large <br /> with Large Text <br /> <small>.ribbon-wrapper.ribbon-lg .ribbon.text-lg</small> </div> </div> <div class="col-sm-4"> <div class="position-relative p-3 bg-gray" style="height: 180px"> <div class="ribbon-wrapper ribbon-xl"> <div class="ribbon bg-warning text-lg"> Ribbon </div> </div> Ribbon Extra Large <br /> with Large Text <br /> <small>.ribbon-wrapper.ribbon-xl .ribbon.text-lg</small> </div> </div> <div class="col-sm-4"> <div class="position-relative p-3 bg-gray" style="height: 180px"> <div class="ribbon-wrapper ribbon-xl"> <div class="ribbon bg-danger text-xl"> Ribbon </div> </div> Ribbon Extra Large <br /> with Extra Large Text <br /> <small>.ribbon-wrapper.ribbon-xl .ribbon.text-xl</small> </div> </div> </div> <div class="row"> <div class="col-sm-4" markdown="1"> ```html <div class="ribbon-wrapper ribbon-lg"> <div class="ribbon bg-success text-lg"> Ribbon </div> </div> ``` </div> <div class="col-sm-4" markdown="1"> ```html <div class="ribbon-wrapper ribbon-xl"> <div class="ribbon bg-warning text-lg"> Ribbon </div> </div> ``` </div> <div class="col-sm-4" markdown="1"> ```html <div class="ribbon-wrapper ribbon-xl"> <div class="ribbon bg-danger text-xl"> Ribbon </div> </div> ``` </div> </div> ##### Image Example Code {: .text-bold .text-dark .mt-5} ```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> </div> </div> ``` 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: <div class="row"> <div class="col-md-6"> <div class="card card-primary direct-chat direct-chat-primary"> <div class="card-header"> <h3 class="card-title">Direct Chat</h3> <div class="card-tools"> <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span> <button type="button" class="btn btn-tool" data-card-widget="collapse"> <i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"> <i class="fas fa-comments"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i> </button> </div> </div> <div class="card-body"> <div class="direct-chat-messages"> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> Is this template really for free? That's unbelievable! </div> </div> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> You better believe it! </div> </div> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> Working with AdminLTE on a great new app! Wanna join? </div> </div> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> I would love to. </div> </div> </div> <!--/.direct-chat-messages--> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/28/2015</small> </span> <span class="contacts-list-msg">How have you been? I was...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/23/2015</small> </span> <span class="contacts-list-msg">I will be waiting for...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/20/2015</small> </span> <span class="contacts-list-msg">I'll call you back at...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/10/2015</small> </span> <span class="contacts-list-msg">Where is your new...</span> </div> </a> </li> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/27/2015</small> </span> <span class="contacts-list-msg">Can I take a look at...</span> </div> </a> </li> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/4/2015</small> </span> <span class="contacts-list-msg">Never mind I found...</span> </div> </a> </li> </ul> </div> </div> <div class="card-footer"> <form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-append"> <button type="button" class="btn btn-primary">Send</button> </span> </div> </form> </div> </div> </div> <div class="col-md-6"> <div class="card card-danger direct-chat direct-chat-danger"> <div class="card-header"> <h3 class="card-title">Direct Chat</h3> <div class="card-tools"> <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span> <button type="button" class="btn btn-tool" data-card-widget="collapse"> <i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"> <i class="fas fa-comments"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i> </button> </div> </div> <div class="card-body"> <div class="direct-chat-messages"> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> Is this template really for free? That's unbelievable! </div> </div> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> You better believe it! </div> </div> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> Working with AdminLTE on a great new app! Wanna join? </div> </div> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> I would love to. </div> </div> </div> <!--/.direct-chat-messages--> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/28/2015</small> </span> <span class="contacts-list-msg">How have you been? I was...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/23/2015</small> </span> <span class="contacts-list-msg">I will be waiting for...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/20/2015</small> </span> <span class="contacts-list-msg">I'll call you back at...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/10/2015</small> </span> <span class="contacts-list-msg">Where is your new...</span> </div> </a> </li> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/27/2015</small> </span> <span class="contacts-list-msg">Can I take a look at...</span> </div> </a> </li> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/4/2015</small> </span> <span class="contacts-list-msg">Never mind I found...</span> </div> </a> </li> </ul> </div> </div> <div class="card-footer"> <form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-append"> <button type="button" class="btn btn-primary">Send</button> </span> </div> </form> </div> </div> </div> </div> ```html <!-- Construct the card with style you want. Here we are using card-danger --> <!-- Then add the class direct-chat and choose the direct-chat-* contexual class --> <!-- The contextual class should match the card, so we are using direct-chat-danger --> <div class="card card-danger direct-chat direct-chat-danger"> <div class="card-header"> <h3 class="card-title">Direct Chat</h3> <div class="card-tools"> <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span> <button type="button" class="btn btn-tool" data-card-widget="collapse"> <i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"> <i class="fas fa-comments"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i> </button> </div> </div> <!-- /.card-header --> <div class="card-body"> <!-- Conversations are loaded here --> <div class="direct-chat-messages"> <!-- Message. Default to the left --> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <span class="direct-chat-name float-left">Alexander Pierce</span> <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' | prepend: site.baseurl }}" alt="message user image"> <!-- /.direct-chat-img --> <div class="direct-chat-text"> Is this template really for free? That's unbelievable! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> <!-- Message to the right --> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <span class="direct-chat-name float-right">Sarah Bullock</span> <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' | prepend: site.baseurl }}" alt="message user image"> <!-- /.direct-chat-img --> <div class="direct-chat-text"> You better believe it! </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> <!-- Message. Default to the left --> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <span class="direct-chat-name float-left">Alexander Pierce</span> <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' | 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? </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> <!-- Message to the right --> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <span class="direct-chat-name float-right">Sarah Bullock</span> <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' | prepend: site.baseurl }}" alt="message user image"> <!-- /.direct-chat-img --> <div class="direct-chat-text"> I would love to. </div> <!-- /.direct-chat-text --> </div> <!-- /.direct-chat-msg --> </div> <!--/.direct-chat-messages--> <!-- Contacts are loaded here --> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/28/2015</small> </span> <span class="contacts-list-msg">How have you been? I was...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/23/2015</small> </span> <span class="contacts-list-msg">I will be waiting for...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/20/2015</small> </span> <span class="contacts-list-msg">I'll call you back at...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/10/2015</small> </span> <span class="contacts-list-msg">Where is your new...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/27/2015</small> </span> <span class="contacts-list-msg">Can I take a look at...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/4/2015</small> </span> <span class="contacts-list-msg">Never mind I found...</span> </div> <!-- /.contacts-list-info --> </a> </li> <!-- End Contact Item --> </ul> <!-- /.contacts-list --> </div> <!-- /.direct-chat-pane --> </div> <!-- /.card-body --> <div class="card-footer"> <form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-append"> <button type="button" class="btn btn-primary">Send</button> </span> </div> </form> </div> <!-- /.card-footer--> </div> <!--/.direct-chat --> ``` {: .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: <div class="row"> <div class="col-md-6"> <div class="card card-primary card-outline direct-chat direct-chat-primary"> <div class="card-header"> <h3 class="card-title">Direct Chat</h3> <div class="card-tools"> <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span> <button type="button" class="btn btn-tool" data-card-widget="collapse"> <i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"> <i class="fas fa-comments"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i> </button> </div> </div> <div class="card-body"> <div class="direct-chat-messages"> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> Is this template really for free? That's unbelievable! </div> </div> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> You better believe it! </div> </div> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> Working with AdminLTE on a great new app! Wanna join? </div> </div> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> I would love to. </div> </div> </div> <!--/.direct-chat-messages--> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/28/2015</small> </span> <span class="contacts-list-msg">How have you been? I was...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/23/2015</small> </span> <span class="contacts-list-msg">I will be waiting for...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/20/2015</small> </span> <span class="contacts-list-msg">I'll call you back at...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/10/2015</small> </span> <span class="contacts-list-msg">Where is your new...</span> </div> </a> </li> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/27/2015</small> </span> <span class="contacts-list-msg">Can I take a look at...</span> </div> </a> </li> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/4/2015</small> </span> <span class="contacts-list-msg">Never mind I found...</span> </div> </a> </li> </ul> </div> </div> <div class="card-footer"> <form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-append"> <button type="button" class="btn btn-primary">Send</button> </span> </div> </form> </div> </div> </div> <div class="col-md-6"> <div class="card card-danger card-outline direct-chat direct-chat-danger"> <div class="card-header"> <h3 class="card-title">Direct Chat</h3> <div class="card-tools"> <span data-toggle="tooltip" title="3 New Messages" class="badge badge-light">3</span> <button type="button" class="btn btn-tool" data-card-widget="collapse"> <i class="fas fa-minus"></i> </button> <button type="button" class="btn btn-tool" data-toggle="tooltip" title="Contacts" data-widget="chat-pane-toggle"> <i class="fas fa-comments"></i> </button> <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i> </button> </div> </div> <div class="card-body"> <div class="direct-chat-messages"> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> Is this template really for free? That's unbelievable! </div> </div> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> You better believe it! </div> </div> <div class="direct-chat-msg"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> Working with AdminLTE on a great new app! Wanna join? </div> </div> <div class="direct-chat-msg right"> <div class="direct-chat-infos clearfix"> <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' | prepend: site.baseurl }}" alt="message user image"> <div class="direct-chat-text"> I would love to. </div> </div> </div> <!--/.direct-chat-messages--> <div class="direct-chat-contacts"> <ul class="contacts-list"> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/28/2015</small> </span> <span class="contacts-list-msg">How have you been? I was...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/23/2015</small> </span> <span class="contacts-list-msg">I will be waiting for...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/20/2015</small> </span> <span class="contacts-list-msg">I'll call you back at...</span> </div> </a> </li> <li> <a href="#"> <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 <small class="contacts-list-date float-right">2/10/2015</small> </span> <span class="contacts-list-msg">Where is your new...</span> </div> </a> </li> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/27/2015</small> </span> <span class="contacts-list-msg">Can I take a look at...</span> </div> </a> </li> <li> <a href="#"> <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. <small class="contacts-list-date float-right">1/4/2015</small> </span> <span class="contacts-list-msg">Never mind I found...</span> </div> </a> </li> </ul> </div> </div> <div class="card-footer"> <form action="#" method="post"> <div class="input-group"> <input type="text" name="message" placeholder="Type Message ..." class="form-control"> <span class="input-group-append"> <button type="button" class="btn btn-primary">Send</button> </span> </div> </form> </div> </div> </div> </div> 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} <div class="row"> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box"> <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span> <div class="info-box-content"> <span class="info-box-text">Messages</span> <span class="info-box-number">1,410</span> </div> </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box bg-success"> <span class="info-box-icon"><i class="far fa-flag"></i></span> <div class="info-box-content"> <span class="info-box-text">Bookmarks</span> <span class="info-box-number">410</span> </div> </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box bg-gradient-warning"> <span class="info-box-icon"><i class="far fa-copy"></i></span> <div class="info-box-content"> <span class="info-box-text">Uploads</span> <span class="info-box-number">13,648</span> </div> </div> </div> </div> <div class="row" markdown="1"> ```html <div class="info-box"> <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span> <div class="info-box-content"> <span class="info-box-text">Messages</span> <span class="info-box-number">1,410</span> </div> </div> ``` {: .col-md-4 .col-sm-6 .col-12} ```html <div class="info-box bg-success"> <span class="info-box-icon"><i class="far fa-flag"></i></span> <div class="info-box-content"> <span class="info-box-text">Bookmarks</span> <span class="info-box-number">410</span> </div> </div> ``` {: .col-md-4 .col-sm-6 .col-12} ```html <div class="info-box bg-gradient-warning"> <span class="info-box-icon"><i class="far fa-copy"></i></span> <div class="info-box-content"> <span class="info-box-text">Uploads</span> <span class="info-box-number">13,648</span> </div> </div> ``` {: .col-md-4 .col-sm-6 .col-12} </div> > ##### 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} <div class="row"> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box"> <span class="info-box-icon bg-info"><i class="far fa-bookmark"></i></span> <div class="info-box-content"> <span class="info-box-text">Bookmarks</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar bg-info" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box bg-success"> <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span> <div class="info-box-content"> <span class="info-box-text">Likes</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box bg-gradient-warning"> <span class="info-box-icon"><i class="far fa-calendar-alt"></i></span> <div class="info-box-content"> <span class="info-box-text">Events</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> </div> </div> </div> <div class="row" markdown="1"> ```html <div class="info-box"> <span class="info-box-icon bg-info"><i class="far fa-bookmark"></i></span> <div class="info-box-content"> <span class="info-box-text">Bookmarks</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar bg-info" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> </div> ``` {: .col-md-4 .col-sm-6 .col-12 .max-height-300} ```html <div class="info-box bg-success"> <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span> <div class="info-box-content"> <span class="info-box-text">Likes</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> </div> ``` {: .col-md-4 .col-sm-6 .col-12 .max-height-300} ```html <div class="info-box bg-gradient-warning"> <span class="info-box-icon"><i class="far fa-calendar-alt"></i></span> <div class="info-box-content"> <span class="info-box-text">Events</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> </div> ``` {: .col-md-4 .col-sm-6 .col-12 .max-height-300} </div> ##### Small Box {: .text-bold .text-dark .mt-4} <div class="row"> <div class="col-lg-4 col-md-6 col-sm-6 col-12"> <div class="small-box bg-info"> <div class="inner"> <h3>150</h3> <p>New Orders</p> </div> <div class="icon"> <i class="fas fa-shopping-cart"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fas fa-arrow-circle-right"></i> </a> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-12"> <div class="small-box bg-gradient-success"> <div class="inner"> <h3>44</h3> <p>User Registrations</p> </div> <div class="icon"> <i class="fas fa-user-plus"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fas fa-arrow-circle-right"></i> </a> </div> </div> </div> <div class="row" markdown="1"> ```html <div class="small-box bg-info"> <div class="inner"> <h3>150</h3> <p>New Orders</p> </div> <div class="icon"> <i class="fas fa-shopping-cart"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fas fa-arrow-circle-right"></i> </a> </div> ``` {: .col-md-4 .col-sm-6 .col-12 .max-height-300} ```html <div class="small-box bg-gradient-success"> <div class="inner"> <h3>44</h3> <p>User Registrations</p> </div> <div class="icon"> <i class="fas fa-user-plus"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fas fa-arrow-circle-right"></i> </a> </div> ``` {: .col-md-4 .col-sm-6 .col-12 .max-height-300} </div> ##### 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, <br> like in this documentation. {: .quote-info} ```html <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> ``` <div class="row"> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box clearfix"> <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span> <div class="info-box-content"> <span class="info-box-text">Messages</span> <span class="info-box-number">1,410</span> </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box"> <span class="info-box-icon bg-info"><i class="far fa-bookmark"></i></span> <div class="info-box-content"> <span class="info-box-text">Bookmarks</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar bg-info" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> <div class="overlay"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-12"> <div class="small-box bg-info"> <div class="inner"> <h3>150</h3> <p>New Orders</p> </div> <div class="icon"> <i class="fas fa-shopping-cart"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fas fa-arrow-circle-right"></i> </a> <div class="overlay"> <i class="fas fa-3x fa-sync-alt fa-spin"></i> </div> </div> </div> </div> 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> </div> ``` <div class="row"> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box clearfix"> <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span> <div class="info-box-content"> <span class="info-box-text">Messages</span> <span class="info-box-number">1,410</span> </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="info-box"> <span class="info-box-icon bg-info"><i class="far fa-bookmark"></i></span> <div class="info-box-content"> <span class="info-box-text">Bookmarks</span> <span class="info-box-number">41,410</span> <div class="progress"> <div class="progress-bar bg-info" style="width: 70%"></div> </div> <span class="progress-description"> 70% Increase in 30 Days </span> </div> <div class="overlay dark"> <i class="fas fa-2x fa-sync-alt fa-spin"></i> </div> </div> </div> <div class="col-lg-4 col-md-6 col-sm-6 col-12"> <div class="small-box bg-info"> <div class="inner"> <h3>150</h3> <p>New Orders</p> </div> <div class="icon"> <i class="fas fa-shopping-cart"></i> </div> <a href="#" class="small-box-footer"> More info <i class="fas fa-arrow-circle-right"></i> </a> <div class="overlay dark"> <i class="fas fa-3x fa-sync-alt fa-spin"></i> </div> </div> </div> </div> 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 <!-- Main node for this component --> <div class="timeline"> <!-- Timeline time label --> <div class="time-label"> <span class="bg-green">23 Aug. 2019</span> </div> <div> <!-- Before each timeline item corresponds to one icon on the left scale --> <i class="fas fa-envelope bg-blue"></i> <!-- Timeline item --> <div class="timeline-item"> <!-- Time --> <span class="time"><i class="fas fa-clock"></i> 12:05</span> <!-- Header. Optional --> <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3> <!-- Body --> <div class="timeline-body"> Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles, weebly ning heekya handango imeem plugg dopplr jibjab, movity jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu weebly balihoo... </div> <!-- Placement of additional controls. Optional --> <div class="timeline-footer"> <a class="btn btn-primary btn-sm">Read more</a> <a class="btn btn-danger btn-sm">Delete</a> </div> </div> </div> <!-- The last icon means the story is complete --> <div> <i class="fas fa-clock bg-gray"></i> </div> </div> ``` {: .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 <div class="timeline timeline-inverse"> <!-- ... Item ... --> </div> ``` 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. <nav class="navbar navbar-expand navbar-white navbar-light ml-0"> <!-- 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="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Help </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <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="{{ '/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> </nav> ```html <!-- 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; max-height: 33px;"> <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' | 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"> <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 --> ``` {: .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 <!-- Control Sidebar --> <aside class="control-sidebar control-sidebar-dark"> <!-- Control sidebar content goes here --> <div class="p-3"> <!-- Content of the sidebar goes here --> </div> </aside> <!-- /.control-sidebar --> ``` ##### Light Sidebar Markup {: .text-bold .text-dark .mt-5} ```html <!-- Control Sidebar --> <aside class="control-sidebar control-sidebar-light"> <!-- Control sidebar content goes here --> <div class="p-3"> <!-- Content of the sidebar goes here --> </div> </aside> <!-- /.control-sidebar --> ``` ##### Control Sidebar Toggle Markup {: .text-bold .text-dark .mt-5} Once you create the sidebar, you will need a toggle button to open/close it. By adding the attribute data-toggle="control-sidebar" to any button, it will automatically act as the toggle button. ```html <a class="nav-link" data-widget="control-sidebar" href="#">Toggle Control Sidebar</a> ```
| ver. 1.4 |
.
| PHP 8.0.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings