如何在离子卡片头中添加折叠按钮？

Question

如何在离子卡片标题中添加折叠按钮？我尝试：

<div class="list card"> 
    <div class="item item-divider">Пошук 
    <i class="icon ion-chevron-right icon-accessory ion-star"></i> 
    </div> 
    <div class="item item-body"> 

     <label class="item item-input item-select"> 
     <div class="input-label"> 
      Звіти 
     </div> 
     <select mobi_select_picker=true data-role="none"> 
      <option value=''>Всі</option> 
      <option value='1'>Осаго</option> 
      <option value='2'>Каско</option> 
     </select> 
     </label>   

    </div> 
    </div> 

我想这样的事情：

http://s18.postimg.org/d9si9ixjd/toggle_card.png

但它无法正常工作。有任何想法吗？

Answer 1

您将不得不在item-divider div内添加带有图标的锚定标记。

<a href="#" class="item-icon-right"> 
    <i class="icon ion-minus"></i> 
</a> 

所以，现在你的HTML看起来像：

<div class="list card"> 
    <div class="item item-divider">Пошук 
     <a href="#" class="item-icon-right"> 
      <i class="icon ion-minus"></i> 
     </a> 
    </div> 
    <div class="item item-body"> 
     <label class="item item-input item-select"> 
      <div class="input-label"> 
       Звіти 
      </div> 
      <select mobi_select_picker=true data-role="none"> 
       <option value=''>Всі</option> 
       <option value='1'>Осаго</option> 
       <option value='2'>Каско</option> 
      </select> 
     </label> 
    </div> 
</div> 

您可以检查此Codepen，并告诉我，如果这是你想要的。