カードウィジェットプラグイン | AdminLTE 3 ドキュメンテーション

カードウィジェットプラグインは、カードを折りたたみ、展開、削除するための機能を提供します。

使用方法

このプラグインは、jQueryプラグインとしてまたはデータAPIを使用してアクティベートできます。

データAPI

このプラグインには、2つの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-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')