Sto cercando di aggiungere un badge alle mie icone nelle schede. Il risultato corrente è: http://play.ionic.io/app/decfc14cb171Badge ionici Badge
Qualcuno sa come metterli nell'angolo in alto a destra di ogni icona?
Ho provato a utilizzare ma si è rivelato più problematico in altri aspetti, anche se con l'attributo "badge" è stato più facile ottenere l'effetto desiderato. C'è un modo per replicarlo senza l'uso di linguette ioniche?
[funziona solo per ioinc 1]
Vedi questo: http://play.ionic.io/app/52586f24b84d
Hai bisogno di fare una classe con posizione relativa
.badge-container{
position: relative;
}
e assegnarlo a <i> tag in questo modo, distintivo viene regolato automaticamente
<i class="icon ion-home badge-container"><span class="badge badge-assertive">3</span></i>
Lo stesso vale per altri scheda
<i class="icon ion-ios-paper badge-container"><span class="badge badge-assertive">5</span></i>
Ora è possibile modificare ulteriormente la posizione del badge anche dando margine ecc. All'intervallo con badge.
Grazie! Esattamente stavo cercando! – galgo
Ottimo! Questo ha funzionato per me. Grazie –
Suggerirei di utilizzare la direttiva ion-tabs di Ionic, in quanto ha il supporto di "prima classe" per i badge. L'elemento scheda ion ha un attributo "badge" che rende davvero facile aggiungere testo (nel tuo caso un numero) a un'icona.
Ho scritto un demo di esso in azione qui:
http://play.ionic.io/app/c6e96276e8fd
Il codice per aggiungere i tag è qui:
<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>
E il risultato è simile al seguente:
Come ho scritto, ho provato le schede ion. Il problema è che a volte voglio nascondere l'intera barra delle schede in base ad alcune espressioni e non posso con le schede ion. Il modo in cui ho il mio codice nell'esempio funziona, non riesco a ottenere lo stesso risultato con il badge. – galgo
Perché non riesci a mostrare/nascondere la barra delle linguette? Vedi qui per un esempio http://play.ionic.io/app/8e4426a8eb18 –
questa soluzione non funziona più ... Ho pubblicato un'altra soluzione che funziona nel 2017/2018 – AriWais
Nell'ultimo doc ionica sembra un modo diverso di fare questo:
Utilizzando la tabBadget e tabBadgetStyle attributi nel codice scheda, in questo modo:
<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>
in cui si dice "pericolo" è il colore che definisci nel tema ...
Spero che aiuti i nuovi a venire a trovare una risposta nel 2017!
fammi sapere se la mia risposta è di aiuto. –