admin-lte

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Card Widget Plugin | AdminLTE 3 Documentation</title>  <title>Card Widget Plugin | AdminLTE v3 Documentaion</title> <meta name="generator" content="Jekyll v3.8.5" /> <meta property="og:title" content="Card Widget Plugin" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="AdminLTE v3 Documentaion" /> <meta property="og:description" content="AdminLTE v3 Documentaion" /> <meta property="og:site_name" content="AdminLTE v3 Documentaion" /> <script type="application/ld+json"> {"description":"AdminLTE v3 Documentaion","@type":"WebPage","url":"/javascript/card-widget.html","headline":"Card Widget Plugin","@context":"http://schema.org"}</script>  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700"> <link rel="stylesheet" href="/assets/plugins/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="/assets/plugins/overlayScrollbars/css/OverlayScrollbars.min.css"> <link rel="stylesheet" href="/assets/css/docs.css"> <link rel="stylesheet" href="/assets/css/highlighter.css"> <link rel="stylesheet" href="/assets/css/adminlte.min.css"> </head> <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed"> <div class="wrapper"> <nav class="main-header navbar navbar-expand navbar-white navbar-light"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" data-widget="pushmenu" href="#"><i class="fa fa-bars"></i></a> </li> <li class="nav-item dropdown"> <a class="nav-link bg-info rounded dropdown-toggle" href="#" id="navbarVersionDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> v3.0 </a> <div class="dropdown-menu py-0" aria-labelledby="navbarVersionDropdown"> <a class="dropdown-item bg-info disabled" href="#">v3.0</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="https://adminlte.io/docs/2.4/installation">v2.4</a> <a class="dropdown-item" href="https://adminlte.io/themes/AdminLTE/documentation/index.html"><= v2.3</a> </div> </li> </ul> <ul class="navbar-nav ml-auto">  </ul>   </nav> <aside class="main-sidebar sidebar-dark-primary elevation-4"> <a href="/index.html" class="brand-link logo-switch"> <img src="/assets/img/logo-xs.png" alt="AdminLTE Docs Logo Small" class="brand-image-xl logo-xs"> <img src="/assets/img/logo-xl.png" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px"> </a> <div class="sidebar"> <nav class="mt-2"> <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu"> <li class="nav-item "> <a href="/index.html" class="nav-link "> <i class="nav-icon fas fa-microchip"></i> <p> Installation </p> </a> </li> <li class="nav-item "> <a href="/dependencies.html" class="nav-link "> <i class="nav-icon fas fa-handshake"></i> <p> Dependencies & Plugins </p> </a> </li> <li class="nav-item "> <a href="/layout.html" class="nav-link "> <i class="nav-icon fas fa-copy"></i> <p> Layout </p> </a> </li> <li class="nav-item has-treeview "> <a href="/components" class="nav-link "> <i class="nav-icon fas fa-th"></i> <p> Components <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="/components/main-header.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Main Header</p> </a> </li> <li class="nav-item"> <a href="/components/main-sidebar.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Main Sidebar</p> </a> </li> <li class="nav-item"> <a href="/components/control-sidebar.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Control Sidebar</p> </a> </li> <li class="nav-item"> <a href="/components/cards.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Card</p> </a> </li> <li class="nav-item"> <a href="/components/boxes.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Small-/ Info-Box</p> </a> </li> <li class="nav-item"> <a href="/components/direct-chat.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Direct Chat</p> </a> </li> <li class="nav-item"> <a href="/components/timeline.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Timeline</p> </a> </li> <li class="nav-item"> <a href="/components/ribbons.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Ribbons</p> </a> </li> <li class="nav-item"> <a href="/components/miscellaneous.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Miscellaneous</p> </a> </li> <li class="nav-item"> <a href="/components/plugins.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Plugins</p> </a> </li> </ul> </li> <li class="nav-item has-treeview menu-open"> <a href="/javascript" class="nav-link active"> <i class="nav-icon fas fa-code"></i> <p> JavaScript <i class="right fas fa-angle-left"></i> </p> </a> <ul class="nav nav-treeview"> <li class="nav-item"> <a href="/javascript/layout.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Layout</p> </a> </li> <li class="nav-item"> <a href="/javascript/push-menu.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Push Menu</p> </a> </li> <li class="nav-item"> <a href="/javascript/treeview.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Treeview</p> </a> </li> <li class="nav-item"> <a href="/javascript/card-widget.html" class="nav-link active"> <i class="far fa-circle nav-icon"></i> <p>Card Widget</p> </a> </li> <li class="nav-item"> <a href="/javascript/card-refresh.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>CardRefresh</p> </a> </li> <li class="nav-item"> <a href="/javascript/control-sidebar.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Control Sidebar</p> </a> </li> <li class="nav-item"> <a href="/javascript/direct-chat.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Direct Chat</p> </a> </li> <li class="nav-item"> <a href="/javascript/todo-list.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Todo List</p> </a> </li> <li class="nav-item"> <a href="/javascript/toasts.html" class="nav-link "> <i class="far fa-circle nav-icon"></i> <p>Toasts</p> </a> </li> </ul> </li> <li class="nav-item "> <a href="/browser-support.html" class="nav-link "> <i class="nav-icon fab fa-chrome"></i> <p> Browser Support </p> </a> </li> <li class="nav-item "> <a href="/upgrade-guide.html" class="nav-link "> <i class="nav-icon fas fa-hand-point-up"></i> <p> Upgrade Guide </p> </a> </li> <li class="nav-item "> <a href="/implementations.html" class="nav-link "> <i class="nav-icon fas fa-bookmark"></i> <p> Implementations </p> </a> </li> <li class="nav-item "> <a href="/faq.html" class="nav-link "> <i class="nav-icon fas fa-question-circle"></i> <p> FAQ </p> </a> </li> <li class="nav-item "> <a href="/license.html" class="nav-link "> <i class="nav-icon fas fa-file-alt"></i> <p> License </p> </a> </li> </ul> </nav> </div> </aside> <div class="content-wrapper px-4 py-2"> <div class="content-header"> <h1 class="text-dark">Card Widget Plugin</h1> </div> <div class="content px-2"> <p>The card widget plugin provides the functionality for collapsing, expanding and removing a card.</p> <h5>Usage</h5> <p>This plugin can be activated as a jQuery plugin or using the data api.</p> <h6 class="text-bold">Data API</h6> <p>This plugin provides two data-api attributes. Any element using one of the following attributes should be placed within the <code class="highlighter-rouge">.card-tools</code> div, which is usually in the card header. For more information about the <a href="/components/cards.html">card HTML structure</a>, visit the card component documentation</p> <p><code class="highlighter-rouge">data-card-widget="collapse"</code> <br /> This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.</p> <div class="row"> <div class="col-12 col-md-4"> <div class="card"> <div class="card-header"> <h3 class="card-title">Collapsible Card Example</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button> </div> </div> <div class="card-body"> The body of the card </div> </div> </div> <div class="col-12 col-md-8"> <div class="language-html max-height-300 highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span> <span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Collapsible Card Example<span class="nt"></h3></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-tools"</span><span class="nt">></span> <span class="c"></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-card-widget=</span><span class="s">"collapse"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-minus"</span><span class="nt">></i></button></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> The body of the card <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> </code></pre></div> </div> </div> </div> <p><code class="highlighter-rouge">data-card-widget="remove"</code> <br /> This attribute, when attached to a button, allows the box to be removed when clicked.</p> <div class="row"> <div class="col-12 col-md-4"> <div class="card"> <div class="card-header"> <h3 class="card-title">Removable Card Example</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="remove"><i class="fas fa-times"></i></button> </div> </div> <div class="card-body"> The body of the card </div> </div> </div> <div class="col-12 col-md-8"> <div class="language-html max-height-300 highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span> <span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Removable Card Example<span class="nt"></h3></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-tools"</span><span class="nt">></span> <span class="c"></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-card-widget=</span><span class="s">"remove"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-times"</span><span class="nt">></i></button></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> The body of the card <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> </code></pre></div> </div> </div> </div> <p><code class="highlighter-rouge">data-card-widget="maximize"</code> <br /> This attribute, when attached to a button, allows the box to be maximize/minimize when clicked.</p> <div class="row"> <div class="col-12 col-md-4"> <div class="card"> <div class="card-header"> <h3 class="card-title">Maximizable Card Example</h3> <div class="card-tools"> <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button> </div> </div> <div class="card-body"> The body of the card </div> </div> </div> <div class="col-12 col-md-8"> <div class="language-html max-height-300 highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">></span> <span class="nt"><h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">></span>Maximizable Card Example<span class="nt"></h3></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-tools"</span><span class="nt">></span> <span class="c"></span> <span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-card-widget=</span><span class="s">"maximize"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-expand"</span><span class="nt">></i></button></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">></span> The body of the card <span class="nt"></div></span> <span class="c"></span> <span class="nt"></div></span> <span class="c"></span> </code></pre></div> </div> </div> </div> <h6 class="text-bold">jQuery</h6> <p>To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default <code class="highlighter-rouge">data-card-widget</code> selectors.</p> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="s1">'#my-card'</span><span class="p">).</span><span class="nx">CardWidget</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> </code></pre></div></div> <h5 class="mt-4">Options</h5> <table class="table table-bordered bg-light"> <thead> <tr> <th>Name</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>animationSpeed</td> <td>Number </td> <td>300</td> <td>Speed of slide down/up animation in milliseconds.</td> </tr> <tr> <td>collapseTrigger</td> <td>String</td> <td><code class="highlighter-rouge">[data-card-widget="remove"]</code></td> <td>jQuery selector to the element responsible for collapsing the box.</td> </tr> <tr> <td>removeTrigger</td> <td>String </td> <td><code class="highlighter-rouge">[data-card-widget="collapse"]</code></td> <td>jQuery selector to the element responsible for removing the box.</td> </tr> <tr> <td>maximizeTrigger</td> <td>String </td> <td><code class="highlighter-rouge">[data-card-widget="maximize"]</code></td> <td>jQuery selector to the element responsible for maximizing the box.</td> </tr> </tbody> </table> <blockquote class="quote-info"> <h5>Tip!</h5> <p>You can use any option via the data-attributes like this.</p> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-tool"</span> <span class="na">data-card-widget=</span><span class="s">"collapse"</span> <span class="na">data-animation-speed=</span><span class="s">"1000"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"fas fa-minus"</span><span class="nt">></i></button></span> </code></pre></div> </div> </blockquote> <h5 class="mt-4">Events</h5> <table class="table table-bordered bg-light"> <thead> <tr> <th>Event Type </th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>expanded.lte.cardwidget</td> <td> Triggered after a card expanded.</td> </tr> <tr> <td>collapsed.lte.cardwidget</td> <td> Triggered after a card collapsed.</td> </tr> <tr> <td>maximized.lte.cardwidget</td> <td> Triggered after a card maximized.</td> </tr> <tr> <td>minimized.lte.cardwidget</td> <td> Triggered after a card minimized.</td> </tr> <tr> <td>removed.lte.cardwidget</td> <td> Triggered after a card removed.</td> </tr> </tbody> </table> <p>Example: <code class="highlighter-rouge">$('#my-card').on('expanded.lte.cardwidget', handleExpandedEvent)</code></p> <h5 class="mt-4">Methods</h5> <table class="table table-bordered bg-light"> <thead> <tr> <th>Method</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td>collapse</td> <td>Collapses the card</td> </tr> <tr> <td>expand</td> <td>Expands the card</td> </tr> <tr> <td>remove</td> <td>Removes the card</td> </tr> <tr> <td>toggle</td> <td>Toggles the state of the card between expanded and collapsed</td> </tr> <tr> <td>maximize</td> <td>Maximizes the card</td> </tr> <tr> <td>minimize</td> <td>Minimizes the card</td> </tr> <tr> <td>toggleMaximize</td> <td>Toggles the state of the card between maximized and minimized</td> </tr> </tbody> </table> <p>Example: <code class="highlighter-rouge">$('#my-card-widget').CardWidget('toggle')</code> or <code class="highlighter-rouge">$('#my-card').CardWidget('toggle')</code></p> </div> </div> <footer class="main-footer"> <div class="float-right d-none d-sm-inline"> v3.0.1 </div> <strong>Copyright © 2014-2019 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved. </footer> </div> <script src="/assets/plugins/jquery/jquery.min.js"></script> <script src="/assets/plugins/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="/assets/plugins/overlayScrollbars/js/jquery.overlayScrollbars.min.js"></script> <script src="/assets/js/adminlte.min.js"></script> </body> </html>