Card Widget Plugin

卡片小工具外掛提供卡片摺疊、展開和移除的功能。

使用方法

此外掛程式可以作為 jQuery 外掛程式啟用，或使用資料 API 啟用。

資料 API

此外掛程式提供兩個 data-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 屬性使用任何選項。
<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')