AdminLTELogo

ボックスコンポーネント

情報ボックスと小さなボックスの 2 種類のボックスがあります。どちらのボックスも統計情報を表示するために使用します。

情報ボックス
メッセージ 1,410
ブックマーク 410
アップロード 13,648
<div class="info-box">
  <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Messages</span>
    <span class="info-box-number">1,410</span>
  </div>
</div>

<div class="info-box bg-success">
  <span class="info-box-icon"><i class="far fa-flag"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Bookmarks</span>
    <span class="info-box-number">410</span>
  </div>
</div>

<div class="info-box bg-gradient-warning">
  <span class="info-box-icon"><i class="far fa-copy"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Uploads</span>
    <span class="info-box-number">13,648</span>
  </div>
</div>
注!

テキストを新しい行に折り返すには、info-box-text にクラス text-wrap を追加します。テキストを ... で切り捨てるには、info-box-content にクラス text-truncate を追加します。（ここでは、文全体を表示するためのツールチップを追加する必要があります）

プログレスバー付き情報ボックス
ブックマーク 41,410
30 日間の 70% 増加
いいね！ 41,410
30 日間の 70% 増加
イベント 41,410
30 日間の 70% 増加 
<div class="info-box">
  <span class="info-box-icon bg-info"><i class="far fa-bookmark"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Bookmarks</span>
    <span class="info-box-number">41,410</span>
    <div class="progress">
      <div class="progress-bar bg-info" style="width: 70%"></div>
    </div>
    <span class="progress-description">
      70% Increase in 30 Days
    </span>
  </div>
</div>

<div class="info-box bg-success">
  <span class="info-box-icon"><i class="far fa-thumbs-up"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Likes</span>
    <span class="info-box-number">41,410</span>
    <div class="progress">
      <div class="progress-bar" style="width: 70%"></div>
    </div>
    <span class="progress-description">
      70% Increase in 30 Days
    </span>
  </div>
</div>

<div class="info-box bg-gradient-warning">
  <span class="info-box-icon"><i class="far fa-calendar-alt"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Events</span>
    <span class="info-box-number">41,410</span>
    <div class="progress">
      <div class="progress-bar" style="width: 70%"></div>
    </div>
    <span class="progress-description">
      70% Increase in 30 Days
    </span>
  </div>
</div>
小さなボックス

150

新規注文

詳細

44

ユーザー登録

詳細 
<div class="small-box bg-info">
  <div class="inner">
    <h3>150</h3>
    <p>New Orders</p>
  </div>
  <div class="icon">
    <i class="fas fa-shopping-cart"></i>
  </div>
  <a href="#" class="small-box-footer">
    More info <i class="fas fa-arrow-circle-right"></i>
  </a>
</div>

<div class="small-box bg-gradient-success">
  <div class="inner">
    <h3>44</h3>
    <p>User Registrations</p>
  </div>
  <div class="icon">
    <i class="fas fa-user-plus"></i>
  </div>
  <a href="#" class="small-box-footer">
    More info <i class="fas fa-arrow-circle-right"></i>
  </a>
</div>
読み込みスタイル

読み込み状態をシミュレートするには、このコードを .info-box / .small-box 終了タグの前に配置します。

ヒント!

Info Box には .fa-2x を、Small Box には .fa-3x を使用して、適切なサイズの読み込みアイコンを取得することをお勧めします。
このドキュメントのように。

<div class="overlay">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
メッセージ 1,410
ブックマーク 41,410
30 日間の 70% 増加

150

新規注文

詳細

このコードのように .overlay に .dark を追加して、暗い読み込みスタイルを使用することもできます。

<div class="overlay dark">
  <i class="fas fa-2x fa-sync-alt fa-spin"></i>
</div>
メッセージ 1,410
ブックマーク 41,410
30 日間の 70% 増加

150

新規注文

詳細