カードウィジェットプラグイン | AdminLTE v3.2ドキュメント

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

利用方法

このプラグインは、jQueryプラグインとして、またはdata APIを使用して有効にすることができます。

data API

このプラグインは、2つのdata-api属性を提供します。次の属性のいずれかを使用する要素は、通常はカードヘッダー内にある.card-toolsdiv内に配置する必要があります。カード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')