如何在离子卡片头中添加折叠按钮?
如何在离子卡片标题中添加折叠按钮?我尝试:如何在离子卡片头中添加折叠按钮?
<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
但它无法正常工作。有任何想法吗?
您将不得不在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,并告诉我,如果这是你想要的。
是的,那是我想要的:D。谢谢! – 2015-03-27 09:16:34
我想知道,如果点击 - 图标可以折叠整个卡只显示标题和 - 图标切换到+图标提供一个选项来扩展卡显示像以前的所有项目? – 2016-01-08 07:11:58
@SagarMody是的,你是对的,标准的崩溃/扩展功能。 – 2016-10-10 14:39:49
您的HTML不完整,问题不严谨。你能分享一个截图/设计,以便我们可以帮助你吗? – Keval 2015-03-25 11:47:48
谢谢Keval,我编辑我的问题。 – 2015-03-26 08:23:33