如何使離子面板？

Question

有沒有人知道如何做下面的圖像面板？

我試圖讓卡，但它不是 This image

Answer 1

你在尋找類似this圖像中喜歡？

HTML：

<div ng-app="myfiddle"> 
    <div ng-controller="BaseCtrl"> 

<div class="list card"> 
    <div class="item item-divider">Credit Limit 
     <a href="#" class="item-icon-right"> 
      <i class="icon ion-minus" ng-click="toggleGroup(group)"></i> 
     </a> 
    </div> 
    <div class="item item-body"> 
     <ion-content> 

     <div id="search-bar"> 
     <div class="item item-input-inset"> 
      <label class="item-input-wrapper" id="search-input"> 
      <i class="icon ion-search placeholder-icon"></i> 
      <input type="text" placeholder="Search" ng-model="myfiddle" ng-click="search()"> 
      </label> 
     </div> 
     </div> 
     <div class="list card"> 

     <div class="item item-avatar"> 

      <div class="circle positive-bg"> 
      <i class="fa fa-usd"></i> 
      </div> 
      <h2>20000</h2> 
      <p>Available</p> 
     </div> 
     </div> 


     <div class="list card"> 

     <div class="item item-avatar"> 

      <div class="circle positive-bg"> 
      <i class="fa fa-usd"></i> 
      </div> 
      <h2>20000</h2> 
      <p>Used</p> 
     </div> 
     </div> 

     <div class="list card"> 

     <div class="item item-avatar"> 

      <div class="circle positive-bg"> 
      <i class="fa fa-usd"></i> 
      </div> 
      <h2>20000</h2> 
      <p>Limit</p> 
     </div> 
     </div> 


     <div class="list card"> 

     <div class="item item-avatar"> 

      <div class="circle assertive-bg"> 
      <i class="fa fa-usd"></i> 
      </div> 
      <h2>20000</h2> 
      <p>Overdue</p> 
     </div> 
     </div> 
    </ion-content> 
    </div> 
</div> 
    </div> 
</div> 

JS

var app = angular.module('myfiddle', ['ionic']).controller('BaseCtrl', function($scope) { 
     $scope.exclamation = 'rocks'; 
     $scope.search = function() { 
     alert("search"); 
     }; 
    $scope.toggleGroup = function(group) { 
     group.show = !group.show; 
     }; 
    }); 

CSS：

ion-card.cards-list-demo ion-card-header { 
    color: #387df5; 
} 

ion-card.cards-list-demo a > icon { 
    color: #444444; 
} 

.item-avatar > div.circle:first-child { 
    position: absolute; 
    top: 16px; 
    left: 16px; 
    max-width: 40px; 
    max-height: 40px; 
    width: 100%; 
    height: 100%; 
    border-radius: 50%; 
    padding: 2% 3%; 

    color: #ffffff; 
} 

.floatright { 
    float: right; 
} 

.list.card { 
    border-top: 3px solid blue; 
} 

.item.item-avatar h2, .item.item-avatar p{ 
    margin-top:0px; 
    margin-bottom:1px; 
}