AdminLTELogo

卡片小部件插件

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

使用方法

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

数据API

此插件提供两个data-api属性。任何使用以下任一属性的元素都应放置在.card-toolsdiv 中，该 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 选择器。
提示！

您可以通过data-属性使用任何选项，如下所示。

<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')