卡片构件插件 | 管理员 LTE 3 文档

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

用法

该插件可以用作 jQuery 插件，也可以使用数据 API 激活。

数据 API

该插件提供了两个数据 API 属性。任何使用以下某个属性的元素应该放在 .card-tools 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-attribute 这样的任何选项。

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