卡片小工具 Plugin

CardWidget 插件为卡片组件提供了折叠、展开、移除和最大化的功能。

用法

该插件通过 .card 元素内部按钮上的 data 属性来激活。

Data 属性

添加 data-lte-toggle="card-collapse" 来切换卡片主体的可见性，添加 data-lte-toggle="card-remove" 来移除卡片，或添加 data-lte-toggle="card-maximize" 来最大化卡片。

<div class="card">
  <div class="card-header">
    <h3 class="card-title">卡片标题</h3>
    <div class="card-tools">
      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="折叠">
        <i data-lte-icon="expand" class="bi bi-plus-lg"></i>
        <i data-lte-icon="collapse" class="bi bi-dash-lg"></i>
      </button>
      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize" title="最大化">
        <i class="bi bi-fullscreen"></i>
      </button>
      <button type="button" class="btn btn-tool" data-lte-toggle="card-remove" title="移除">
        <i class="bi bi-x-lg"></i>
      </button>
    </div>
  </div>
  <div class="card-body">这里是卡片内容。</div>
  <div class="card-footer">卡片底部</div>
</div>

事件

该插件在触发元素上派发以下事件：

事件	描述
`collapsed.lte.card-widget`	当卡片主体被折叠时触发。
`expanded.lte.card-widget`	当卡片主体被展开时触发。
`remove.lte.card-widget`	当卡片被移除时触发。
`maximized.lte.card-widget`	当卡片被最大化时触发。
`minimized.lte.card-widget`	当卡片被最小化时（从最大化状态恢复）触发。

CSS 类

类名	描述
`collapsed-card`	当卡片折叠时应用于卡片。
`maximized-card`	当卡片最大化时应用于卡片。

配置

该插件不读取 data-* 配置属性。要自定义行为，请通过编程方式实例化并传入配置对象：

选项	默认值	描述
`animationSpeed`	`500`	滑动动画的持续时间（毫秒）。
`collapseTrigger`	`[data-lte-toggle="card-collapse"]`	折叠按钮的 CSS 选择器。
`removeTrigger`	`[data-lte-toggle="card-remove"]`	移除按钮的 CSS 选择器。
`maximizeTrigger`	`[data-lte-toggle="card-maximize"]`	最大化按钮的 CSS 选择器。

调用方式

import { CardWidget } from "admin-lte"

const card = document.querySelector("#chart-card")
const widget = new CardWidget(card, { animationSpeed: 250 })

widget.maximize()     // 展开至全屏
widget.collapse()     // 隐藏主体和页脚
widget.expand()       // 从折叠状态恢复
widget.remove()       // 以动画方式移出并从 DOM 中删除
widget.toggle()       // 根据当前状态展开/折叠
widget.toggleMaximize()  // 根据当前状态最大化/最小化

方法

方法	返回值	描述
`collapse()`	`void`	向上滑动收起主体和页脚，添加 `collapsed-card` 类。触发 `collapsed.lte.card-widget` 事件。
`expand()`	`void`	向下滑动展开主体和页脚，移除 `collapsed-card` 类。触发 `expanded.lte.card-widget` 事件。
`toggle()`	`void`	根据 `collapsed-card` 类的存在情况调用 `collapse()` 或 `expand()`。
`maximize()`	`void`	将卡片设置为固定全屏定位，添加 `maximized-card` 类。触发 `maximized.lte.card-widget` 事件。
`minimize()`	`void`	恢复原始尺寸，移除 `maximized-card` 类。触发 `minimized.lte.card-widget` 事件。
`toggleMaximize()`	`void`	根据 `maximized-card` 类的存在情况调用 `maximize()` 或 `minimize()`。
`remove()`	`void`	以动画方式移除卡片并将其从 DOM 中删除。触发 `remove.lte.card-widget` 事件。

注意事项

嵌套卡片会被正确处理：折叠父级卡片不会影响子卡片。
最大化卡片时也会给 <html> 添加 maximized-card 类，以便全局样式可以做出响应。
如果在最大化时卡片处于折叠状态，它会记住这一状态——was-collapsed 类用于跟踪此状态。