- removed CardRefresh from menu while not exist - removed data-accordion="true" from sidebar nav - updated assets - created javascript/layout - finished javascript/push-menu - created javascript/treeview - created javascript/widget - finished javascript/control-sidebar - created javascript/direct-chat - created javascript/todo-list
5.5 KiB
layout | title |
---|---|
page | Widget Plugin |
The 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
{: .text-bold }
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-widget="collapse"
This attribute, when attached to a button, allows the box to be collapsed/expanded when clicked.
Collapsible Card Example
Collapsible Card Example
data-widget="remove"
This attribute, when attached to a button, allows the box to be removed when clicked.
Removable Card Example
Removable Card Example
data-widget="maximize"
This attribute, when attached to a button, allows the box to be maximize/minimize when clicked.
Maximizable Card Example
Maximizable Card Example
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-widget
selectors.
$('#my-card').Widget(options)
Options
{: .mt-4}
|---
Name | Type | Default | Description |
---|---|---|---|
animationSpeed | Number | 300 | Speed of slide down/up animation in milliseconds. |
collapseTrigger | String | [data-widget="remove"] |
jQuery selector to the element responsible for collapsing the box. |
removeTrigger | String | [data-widget="collapse"] |
jQuery selector to the element responsible for removing 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-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
{: .quote-info}
Events
{: .mt-4}
|---
Event Type | Description |
---|---|
expanded.lte.widget | Triggered after a card expanded. |
collapsed.lte.widget | Triggered after a card collapsed. |
maximized.lte.widget | Triggered after a card maximized. |
minimized.lte.widget | Triggered after a card minimized. |
removed.lte.widget | Triggered after a card removed. |
{: .table .table-bordered .bg-light} |
Example: $('#my-card').on('expanded.lte.widget', 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 |
toggleMaximize | Toggles the state of the card between maximized and minimized |
{: .table .table-bordered .bg-light} |
Example: $('#my-card-widget').Widget('toggle')