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

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

1 个答案: