TaskA/public/backend/docs/javascript/card-widget.md
2024-06-16 13:56:32 +05:45

5.8 KiB
Executable File

layout title
page 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]({% link components/cards.md %}), 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
```html

Collapsible Card Example

The body of the card
``` {: .max-height-300}
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
```html

Removable Card Example

The body of the card
``` {: .max-height-300}
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
```html

Maximizable Card Example

The body of the card
``` {: .max-height-300}
jQuery

{: .text-bold } 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

{: .mt-4}

|---

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.
{: .table .table-bordered .bg-light}
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>

{: .quote-info}

Events

{: .mt-4}

|---

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.
{: .table .table-bordered .bg-light}

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

Methods

{: .mt-4}

|---

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
{: .table .table-bordered .bg-light}

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