Я пытаюсь добавить значок на значки на вкладках. Текущий результат: http://play.ionic.io/app/decfc14cb171Ионные вкладки Значок
Кто-нибудь знает, как положить их в верхнем правом углу каждой иконки?
Я попытался использовать , но это оказалось более проблематичным в других аспектах, хотя с атрибутом «значка» было легче достичь желаемого эффекта. Есть ли способ воспроизвести его без использования ионных вкладок?
[работает только для ioinc 1]
Смотреть это: http://play.ionic.io/app/52586f24b84d
Вам нужно сделать класс с относительным положением
.badge-container{
position: relative;
}
и назначить его <i> тега таким образом, значок будет автоматически регулировать
<i class="icon ion-home badge-container"><span class="badge badge-assertive">3</span></i>
То же самое относится и к другой вкладке
<i class="icon ion-ios-paper badge-container"><span class="badge badge-assertive">5</span></i>
Теперь вы можете изменить дополнительное положение значка, указав маржу и т. Д. С помощью значка.
Спасибо! Именно этого я и искал! – galgo
Отлично! Это сработало для меня. благодаря –
Я бы посоветовал использовать директиву Ionic ion-tabs, так как она имеет поддержку «первого класса» для значков. Элемент «иконка-табулатура» имеет атрибут «значок», который позволяет легко добавить текст (в вашем случае число) к значку.
Я написал демо его в действии здесь:
http://play.ionic.io/app/c6e96276e8fd
код для добавления тегов здесь:
<ion-tabs class="tabs-icon-top tabs-striped">
<ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="3" badge style="badge-assertive">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
<ion-tab title="About" icon=" ion-ios-paper" href="#/tab/about" badge="5" badge-style="badge-assertive">
<ion-nav-view name="about-tab"></ion-nav-view>
</ion-tab>
</ion-tabs>
И результат выглядит следующим образом:
Как я уже писал, я попробовал ионные вкладки. Проблема в том, что иногда я хочу скрыть всю панель вкладок на основе некоторого выражения, и я не могу использовать ионные вкладки. То, как я использую свой код в этом примере, просто не могу получить тот же результат с значком. – galgo
Почему вы не можете показать/скрыть панель ионных вкладок? См. Здесь пример http://play.ionic.io/app/8e4426a8eb18 –
Это решение больше не работает ... Я опубликовал другое решение, которое работает в 2017/2018 – AriWais
В последнем Ионные документ появляется другой способ сделать это:
Использование tabBadget и tabBadgetStyle атрибуты в закладке кода, как это:
<ion-tabs>
<ion-tab tabIcon="call" [root]="tabOne" tabBadge="3" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabIcon="chatbubbles" [root]="tabTwo" tabBadge="14" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabIcon="musical-notes" [root]="tabThree"></ion-tab>
</ion-tabs>
, где он говорит: «опасность» является цвет, который вы определяете в теме ...
Надеюсь, что это поможет новым найти ответ в 2017 году!
дайте мне знать, если мой ответ поможет. –