Card Widget Plugin | AdminLTE 3 Documentation
Description: AdminLTE v3 Documentaion

Card Widget Plugin | AdminLTE v3 Documentaion

# Card Widget Plugin

The card widget plugin provides the functionality for collapsing, expanding and removing a card.

##### Usage

This plugin can be activated as a jQuery plugin or using the data api.

###### Data API

This plugin provides two data-api attributes. Any element using one of the following attributes should be placed within the `.card-tools` div, which is usually in the card header. For more information about the card HTML structure, visit the card component documentation

`data-card-widget="collapse"`
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.

### Collapsible Card Example

The body of the card

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Collapsible Card Example</h3>
        <div class="card-tools">
          <!-- Collapse Button -->
          <button type="button" class="btn btn-tool" data-card-widget="collapse"><i class="fas fa-minus"></i></button>
        </div>
        <!-- /.card-tools -->
      </div>
      <!-- /.card-header -->
      <div class="card-body">
        The body of the card
      </div>
      <!-- /.card-body -->
    </div>
    <!-- /.card -->

`data-card-widget="remove"`
This attribute, when attached to a button, allows the box to be removed when clicked.

### Removable Card Example

The body of the card

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Removable Card Example</h3>
        <div class="card-tools">
          <!-- Remove Button -->
          <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 -->

`data-card-widget="maximize"`
This attribute, when attached to a button, allows the box to be maximize/minimize when clicked.

### Maximizable Card Example

The body of the card

    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Maximizable Card Example</h3>
        <div class="card-tools">
          <!-- Maximize Button -->
          <button type="button" class="btn btn-tool" data-card-widget="maximize"><i class="fas fa-expand"></i></button>
        </div>
        <!-- /.card-tools -->
      </div>
      <!-- /.card-header -->
      <div class="card-body">
        The body of the card
      </div>
      <!-- /.card-body -->
    </div>
    <!-- /.card -->

###### jQuery

To activate any button using jQuery, you must provide the removeTrigger and collapseTrigger options. Otherwise, the plugin will assume the default `data-card-widget` selectors.

    $('#my-card').CardWidget(options)

##### Options

Name | Type | Default | Description
--- | --- | --- | ---
animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds.
collapseTrigger | String | `[data-card-widget="collapse"]` | jQuery selector to the element responsible for collapsing the box.
removeTrigger | String | `[data-card-widget="remove"]` | jQuery selector to the element responsible for removing the box.
maximizeTrigger | String | `[data-card-widget="maximize"]` | jQuery selector to the element responsible for maximizing the box.

> ##### Tip!

> You can use any option via the data-attributes like this.

>     <button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>

##### Events

Event Type | Description
--- | ---
expanded.lte.cardwidget | Triggered after a card expanded.
collapsed.lte.cardwidget | Triggered after a card collapsed.
maximized.lte.cardwidget | Triggered after a card maximized.
minimized.lte.cardwidget | Triggered after a card minimized.
removed.lte.cardwidget | Triggered after a card removed.

Example: `$('#my-card').on('expanded.lte.cardwidget', handleExpandedEvent)`

##### Methods

Method | Description
--- | ---
collapse | Collapses the card
expand | Expands the card
remove | Removes the card
toggle | Toggles the state of the card between expanded and collapsed
maximize | Maximizes the card
minimize | Minimizes the card
toggleMaximize | Toggles the state of the card between maximized and minimized

Example: `$('#my-card-widget').CardWidget('toggle')` or `$('#my-card').CardWidget('toggle')`