Dokumentasyon at mga halimbawa para sa mga badge, ang aming maliit na bilang at bahagi ng pag-label.
Halimbawa
Ang sukat ng mga badge upang tumugma sa laki ng agarang parent na elemento sa pamamagitan ng paggamit ng kaugnay na laki ng font at mga emunit.
Halimbawang pamagat
Bago
Halimbawang pamagat
Bago
Halimbawang pamagat
Bago
Halimbawang pamagat
Bago
Halimbawang pamagat
Bago
Halimbawang pamagat
Bago
Maaaring gamitin ang mga badge bilang bahagi ng mga link o mga button para magbigay ng counter.
Tandaan na depende sa kung paano ginagamit ang mga ito, maaaring nakakalito ang mga badge para sa mga user ng mga screen reader at katulad na mga teknolohiyang pantulong. Bagama't ang pag-istilo ng mga badge ay nagbibigay ng visual na cue sa kanilang layunin, ang mga user na ito ay ipapakita lamang sa nilalaman ng badge. Depende sa partikular na sitwasyon, ang mga badge na ito ay maaaring mukhang random na karagdagang mga salita o numero sa dulo ng isang pangungusap, link, o button.
Maliban kung malinaw ang konteksto (tulad ng halimbawa ng "Mga Notification," kung saan nauunawaan na ang "4" ay ang bilang ng mga notification), isaalang-alang ang pagsasama ng karagdagang konteksto na may nakikitang nakatagong piraso ng karagdagang teksto.
Mga pagkakaiba-iba sa konteksto
Magdagdag ng alinman sa mga nabanggit na klase ng modifier sa ibaba upang baguhin ang hitsura ng isang badge.
Naghahatid ng kahulugan sa mga pantulong na teknolohiya
Ang paggamit ng kulay upang magdagdag ng kahulugan ay nagbibigay lamang ng visual na indikasyon, na hindi ibibigay sa mga gumagamit ng mga pantulong na teknolohiya - tulad ng mga screen reader. Siguraduhin na ang impormasyong tinutukoy ng kulay ay maaaring halata mula sa nilalaman mismo (hal. ang nakikitang teksto), o kasama sa pamamagitan ng mga alternatibong paraan, tulad ng karagdagang tekstong nakatago sa .sr-onlyklase.
Mga badge ng tableta
Gamitin ang .badge-pillklase ng modifier para gawing mas bilugan ang mga badge (na may mas malaki border-radiusat karagdagang pahalang padding). Kapaki-pakinabang kung makaligtaan mo ang mga badge mula sa v3.