AdminLTELogo

卡片小部件插件

卡片小部件插件提供了折叠、展开和移除卡片的功能。

用法

此插件可作为 jQuery 插件激活，或使用数据 API。

数据 API

此插件提供两个 data-api 属性。任何使用以下其中一个属性的元素都应放置在 .card-tools div 中，该 div 通常位于卡片头部中。有关卡片 HTML 结构 的更多信息，请访问卡片组件文档。

data-card-widget="collapse"

当将此属性附加到按钮时，单击按钮即可折叠/展开盒子。

可折叠卡片示例

卡片的主体
<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"

当将此属性附加到按钮时，单击按钮即可移除盒子。

可移除卡片示例

卡片的主体
<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"

当将此属性附加到按钮时，单击按钮即可最大化/最小化盒子。

可最大化卡片示例

卡片的主体
<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

要使用 jQuery 激活任何按钮，必须提供 removeTrigger 和 collapseTrigger 选项。否则，插件将采用默认 data-card-widget 选择器。

$('#my-card').CardWidget(options)
选项
名称 类型 默认值 描述
animationSpeed 数字 300 以毫秒为单位的下滑/上滑动画速度。
collapseTrigger 字符串 [data-card-widget="collapse"] 负责折叠该盒子的元素的 jQuery 选择器。
removeTrigger 字符串 [data-card-widget="remove"] 负责移除该盒子的元素的 jQuery 选择器。
maximizeTrigger 字符串 [data-card-widget="maximize"] 负责最大化该盒子的元素的 jQuery 选择器。
提示！

您可以通过数据属性像这样使用任何选项。

<button type="button" class="btn btn-tool" data-card-widget="collapse" data-animation-speed="1000"><i class="fas fa-minus"></i></button>
事件
事件类型 描述
expanded.lte.cardwidget 在卡片展开后触发。
collapsed.lte.cardwidget 在卡片折叠后触发。
maximized.lte.cardwidget 在卡片最大化后触发。
minimized.lte.cardwidget 在卡片最小化后触发。
removed.lte.cardwidget 在卡片移除后触发。

例如： $('#my-card').on('expanded.lte.cardwidget', handleExpandedEvent)

方法
方法 描述
collapse 折叠卡片
expand 展开卡片
remove 移除卡片
toggle 在展开和折叠之间切换卡片状态
maximize 最大化卡片
minimize 最小化卡片
toggleMaximize 在最大化和最小化之间切换卡片状态

示例：$('#my-card-widget').CardWidget('toggle') 或 $('#my-card').CardWidget('toggle')