AdminLTELogo

卡片小部件插件

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

用法

该插件可以作为 jQuery 插件或使用数据 API 激活。

数据 API

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

data-card-widget="collapse"

将此属性附加到按钮上，在点击按钮后将折叠/展开卡片。

可折叠卡片示例

这里是卡片内容 
<div class="card">
  <div class="card-header">
    <h3 class="card-title">可折叠卡片示例</h3>
    <div class="card-tools">
      <!-- 折叠按钮 -->
      <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">
    这里是卡片内容
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->
data-card-widget="remove"

将此属性附加到按钮上，在点击按钮后将移除卡片。

移除卡片示例

这里是卡片内容 
<div class="card">
  <div class="card-header">
    <h3 class="card-title">移除卡片示例</h3>
    <div class="card-tools">
      <!-- 移除按钮 -->
      <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">
    这里是卡片内容
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->
data-card-widget="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-card-widget="maximize"><i class="fas fa-expand"></i></button>
    </div>
    <!-- /.card-tools -->
  </div>
  <!-- /.card-header -->
  <div class="card-body">
    这里是卡片内容
  </div>
  <!-- /.card-body -->
</div>
<!-- /.card -->
jQuery

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

$('#my-card').CardWidget(options)
选项
名称 类型 默认 说明
animationSpeed Number  300 上下滑动动画速度，以毫秒为单位。
collapseTrigger String [data-card-widget="collapse"] 负责折叠元素的 jQuery 选择器。
removeTrigger String  [data-card-widget="remove"] 负责移除元素的 jQuery 选择器。
maximizeTrigger String  [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')