vue-lte-ui/src/components/info-box/usage.html

The vue components wrapper for AdminLTE UI.

<div class="demo-page">
  <div class="row">
    <div class="col-xs-4">
      <lte-info-box icon="fa fa-book" icon-bg-class="bg-red">
        这是Box内容
      </lte-info-box>
    </div>
    <div class="col-xs-4">
      <lte-info-box icon="fa fa-lock" box-bg="orange">
        这是Box内容
      </lte-info-box>
    </div>
    <div class="col-xs-4">
      <lte-info-box icon="fa fa-star" box-bg="gray" icon-bg="#654321">
        这是Box内容
      </lte-info-box>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-6">
      <lte-info-box box-bg-class="bg-green" icon="fa fa-heart">
        <span class="info-box-text">Inventory</span>
        <span class="info-box-number">5,200</span>

        <div class="progress">
          <div class="progress-bar" style="width: 50%"></div>
        </div>
        <span class="progress-description">
                    50% Increase in 30 Days
                  </span>
      </lte-info-box>
    </div>
  </div>
</div>