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

Question

如何在ion卡头添加折叠按钮？我在尝试：

  <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 并告诉我这是否是您想要的。

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

How to add collapse button in ion card header?

css

ionic-framework