బ్యాడ్జ్ల కోసం డాక్యుమెంటేషన్ మరియు ఉదాహరణలు, మా చిన్న కౌంట్ మరియు లేబులింగ్ భాగం.
ఉదాహరణ
emసంబంధిత ఫాంట్ సైజింగ్ మరియు యూనిట్లను ఉపయోగించడం ద్వారా తక్షణ పేరెంట్ ఎలిమెంట్ పరిమాణాన్ని సరిపోల్చడానికి బ్యాడ్జ్లు స్కేల్ చేస్తాయి .
ఉదాహరణ శీర్షికకొత్తది
ఉదాహరణ శీర్షికకొత్తది
ఉదాహరణ శీర్షికకొత్తది
ఉదాహరణ శీర్షికకొత్తది
ఉదాహరణ శీర్షికకొత్తది
ఉదాహరణ శీర్షికకొత్తది
కౌంటర్ను అందించడానికి లింక్లు లేదా బటన్లలో భాగంగా బ్యాడ్జ్లను ఉపయోగించవచ్చు.
బ్యాడ్జ్లు ఎలా ఉపయోగించబడుతున్నాయి అనేదానిపై ఆధారపడి, స్క్రీన్ రీడర్లు మరియు ఇలాంటి సహాయక సాంకేతికతల వినియోగదారులకు బ్యాడ్జ్లు గందరగోళంగా ఉండవచ్చని గమనించండి. బ్యాడ్జ్ల స్టైలింగ్ వాటి ప్రయోజనం గురించి దృశ్యమాన సూచనను అందించినప్పటికీ, ఈ వినియోగదారులు కేవలం బ్యాడ్జ్లోని కంటెంట్తో అందించబడతారు. నిర్దిష్ట పరిస్థితిని బట్టి, ఈ బ్యాడ్జ్లు వాక్యం, లింక్ లేదా బటన్ చివరిలో యాదృచ్ఛిక అదనపు పదాలు లేదా సంఖ్యల వలె కనిపించవచ్చు.
సందర్భం స్పష్టంగా లేనట్లయితే ("నోటిఫికేషన్లు" ఉదాహరణ వలె, "4" అనేది నోటిఫికేషన్ల సంఖ్య అని అర్థం చేసుకుంటే), దృశ్యమానంగా దాచబడిన అదనపు టెక్స్ట్ ముక్కతో అదనపు సందర్భాన్ని చేర్చడాన్ని పరిగణించండి.
సందర్భోచిత వైవిధ్యాలు
బ్యాడ్జ్ రూపాన్ని మార్చడానికి దిగువ పేర్కొన్న మాడిఫైయర్ తరగతుల్లో దేనినైనా జోడించండి.
అర్థాన్ని జోడించడానికి రంగును ఉపయోగించడం అనేది దృశ్యమాన సూచనను మాత్రమే అందిస్తుంది, ఇది స్క్రీన్ రీడర్ల వంటి సహాయక సాంకేతికతల వినియోగదారులకు తెలియజేయబడదు. రంగు ద్వారా సూచించబడిన సమాచారం కంటెంట్లోనే స్పష్టంగా ఉందని (ఉదా. కనిపించే వచనం) లేదా .sr-onlyక్లాస్తో దాచిన అదనపు వచనం వంటి ప్రత్యామ్నాయ మార్గాల ద్వారా చేర్చబడిందని నిర్ధారించుకోండి.
పిల్ బ్యాడ్జ్లు
.badge-pillబ్యాడ్జ్లను మరింత గుండ్రంగా (పెద్ద border-radiusమరియు అదనపు క్షితిజ సమాంతరంతో ) చేయడానికి మాడిఫైయర్ క్లాస్ని ఉపయోగించండి padding. మీరు v3 నుండి బ్యాడ్జ్లను మిస్ అయితే ఉపయోగకరంగా ఉంటుంది.