డ్రాప్డౌన్లు
బూట్స్ట్రాప్ డ్రాప్డౌన్ ప్లగిన్తో లింక్ల జాబితాలు మరియు మరిన్నింటిని ప్రదర్శించడం కోసం సందర్భోచిత ఓవర్లేలను టోగుల్ చేయండి.
డ్రాప్డౌన్లు టోగుల్ చేయదగినవి, లింక్ల జాబితాలు మరియు మరిన్నింటిని ప్రదర్శించడానికి సందర్భోచిత ఓవర్లేలు. చేర్చబడిన బూట్స్ట్రాప్ డ్రాప్డౌన్ జావాస్క్రిప్ట్ ప్లగ్ఇన్తో అవి ఇంటరాక్టివ్గా తయారయ్యాయి. అవి హోవర్ చేయడం ద్వారా కాకుండా క్లిక్ చేయడం ద్వారా టోగుల్ చేయబడతాయి; ఇది ఉద్దేశపూర్వక రూపకల్పన నిర్ణయం.
డ్రాప్డౌన్లు డైనమిక్ పొజిషనింగ్ మరియు వ్యూపోర్ట్ డిటెక్షన్ను అందించే మూడవ పార్టీ లైబ్రరీ, Popper.js లో నిర్మించబడ్డాయి. బూట్స్ట్రాప్ యొక్క జావాస్క్రిప్ట్కు ముందు popper.min.js ని చేర్చాలని నిర్ధారించుకోండి లేదా Popper.jsని కలిగి ఉన్న bootstrap.bundle.min.js
/ ని ఉపయోగించండి bootstrap.bundle.js
. డైనమిక్ పొజిషనింగ్ అవసరం లేనప్పటికీ నావ్బార్లలో డ్రాప్డౌన్లను ఉంచడానికి Popper.js ఉపయోగించబడదు.
మీరు మూలం నుండి మా జావాస్క్రిప్ట్ని రూపొందిస్తున్నట్లయితే, దీనికి అవసరంutil.js
.
WAI ARIA ప్రమాణం వాస్తవ role="menu"
విడ్జెట్ను నిర్వచిస్తుంది, అయితే ఇది చర్యలు లేదా ఫంక్షన్లను ప్రేరేపించే అప్లికేషన్-వంటి మెనులకు ప్రత్యేకమైనది. ARIA మెనుల్లో మెను ఐటెమ్లు, చెక్బాక్స్ మెను ఐటెమ్లు, రేడియో బటన్ మెను ఐటెమ్లు, రేడియో బటన్ గ్రూప్లు మరియు సబ్ మెనూలు మాత్రమే ఉంటాయి.
మరోవైపు, బూట్స్ట్రాప్ యొక్క డ్రాప్డౌన్లు సాధారణమైనవి మరియు విభిన్న పరిస్థితులకు మరియు మార్కప్ నిర్మాణాలకు వర్తించేలా రూపొందించబడ్డాయి. ఉదాహరణకు, శోధన ఫీల్డ్లు లేదా లాగిన్ ఫారమ్ల వంటి అదనపు ఇన్పుట్లు మరియు ఫారమ్ నియంత్రణలను కలిగి ఉన్న డ్రాప్డౌన్లను సృష్టించడం సాధ్యమవుతుంది. ఈ కారణంగా, బూట్స్ట్రాప్ నిజమైన ARIA మెనుల కోసం అవసరమైన ఏవైనా role
మరియు లక్షణాలను ఆశించదు (లేదా స్వయంచాలకంగా జోడించదు) . రచయితలు ఈ మరింత నిర్దిష్ట లక్షణాలను స్వయంగా చేర్చవలసి ఉంటుంది.aria-
అయినప్పటికీ, బూట్స్ట్రాప్ చాలా ప్రామాణిక కీబోర్డ్ మెను పరస్పర చర్యలకు అంతర్నిర్మిత మద్దతును జోడిస్తుంది, .dropdown-item
కర్సర్ కీలను ఉపయోగించి వ్యక్తిగత మూలకాల ద్వారా తరలించగల సామర్థ్యం మరియు కీతో మెనుని మూసివేయడం వంటివి ESC.
డ్రాప్డౌన్ టోగుల్ (మీ బటన్ లేదా లింక్) మరియు డ్రాప్డౌన్ మెను లోపల .dropdown
లేదా ప్రకటించే మరొక మూలకాన్ని వ్రాప్ చేయండి position: relative;
. మీ సంభావ్య అవసరాలకు బాగా సరిపోయేలా డ్రాప్డౌన్లు <a>
లేదా మూలకాల నుండి ట్రిగ్గర్ చేయబడవచ్చు .<button>
ఏదైనా సింగిల్ని .btn
కొన్ని మార్కప్ మార్పులతో డ్రాప్డౌన్ టోగుల్గా మార్చవచ్చు. మీరు వాటిని ఏ <button>
అంశాలతోనైనా పని చేయడానికి ఎలా ఉంచవచ్చో ఇక్కడ ఉంది:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
మరియు <a>
అంశాలతో:
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
ఉత్తమ భాగం ఏమిటంటే మీరు దీన్ని ఏదైనా బటన్ వేరియంట్తో కూడా చేయవచ్చు:
అదేవిధంగా, సింగిల్ బటన్ డ్రాప్డౌన్ల వలె వాస్తవంగా అదే మార్కప్తో స్ప్లిట్ బటన్ డ్రాప్డౌన్లను సృష్టించండి, కానీ .dropdown-toggle-split
డ్రాప్డౌన్ కేరెట్ చుట్టూ సరైన స్పేసింగ్తో పాటు.
padding
మేము క్యారెట్కి ఇరువైపులా క్షితిజ సమాంతరాన్ని 25% తగ్గించడానికి మరియు margin-left
సాధారణ బటన్ డ్రాప్డౌన్ల కోసం జోడించిన వాటిని తీసివేయడానికి ఈ అదనపు తరగతిని ఉపయోగిస్తాము. ఆ అదనపు మార్పులు కేరెట్ను స్ప్లిట్ బటన్లో కేంద్రీకరిస్తాయి మరియు ప్రధాన బటన్కు ప్రక్కన మరింత సరైన పరిమాణంలో హిట్ ఏరియాని అందిస్తాయి.
బటన్ డ్రాప్డౌన్లు డిఫాల్ట్ మరియు స్ప్లిట్ డ్రాప్డౌన్ బటన్లతో సహా అన్ని పరిమాణాల బటన్లతో పని చేస్తాయి.
.dropup
పేరెంట్ ఎలిమెంట్కు జోడించడం ద్వారా ఎలిమెంట్స్ పైన డ్రాప్డౌన్ మెనులను ట్రిగ్గర్ చేయండి.
.dropright
పేరెంట్ ఎలిమెంట్కు జోడించడం ద్వారా మూలకాల కుడివైపు డ్రాప్డౌన్ మెనులను ట్రిగ్గర్ చేయండి .
.dropleft
పేరెంట్ ఎలిమెంట్కు జోడించడం ద్వారా ఎలిమెంట్ల ఎడమవైపు డ్రాప్డౌన్ మెనులను ట్రిగ్గర్ చేయండి .
చారిత్రాత్మకంగా డ్రాప్డౌన్ మెను కంటెంట్లు లింక్లుగా ఉండాలి, కానీ అది ఇకపై v4 విషయంలో ఉండదు. ఇప్పుడు మీరు కేవలం s <button>
కి బదులుగా మీ డ్రాప్డౌన్లలోని ఎలిమెంట్లను ఐచ్ఛికంగా ఉపయోగించవచ్చు .<a>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
డిఫాల్ట్గా, డ్రాప్డౌన్ మెను స్వయంచాలకంగా ఎగువ నుండి 100% దాని పేరెంట్కి ఎడమ వైపున ఉంచబడుతుంది. డ్రాప్డౌన్ మెనుని కుడికి సమలేఖనం .dropdown-menu-right
చేయడానికి a కి జోడించండి ..dropdown-menu
హెడ్ అప్! డ్రాప్డౌన్లు Popper.jsకి ధన్యవాదాలు (అవి నావ్బార్లో ఉన్నప్పుడు మినహా) ఉంచబడ్డాయి.
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Right-aligned menu
</button>
<div class="dropdown-menu dropdown-menu-right">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</div>
</div>
ఏదైనా డ్రాప్డౌన్ మెనులో చర్యల విభాగాలను లేబుల్ చేయడానికి హెడర్ను జోడించండి.
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div>
డివైడర్తో సంబంధిత మెను ఐటెమ్ల యొక్క ప్రత్యేక సమూహాలు.
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
డ్రాప్డౌన్ మెనులో ఫారమ్ను ఉంచండి లేదా దానిని డ్రాప్డౌన్ మెనుగా చేయండి మరియు మీకు అవసరమైన ప్రతికూల స్థలాన్ని ఇవ్వడానికి మార్జిన్ లేదా పాడింగ్ యుటిలిటీలను ఉపయోగించండి.
<div class="dropdown-menu">
<form class="px-4 py-3">
<div class="form-group">
<label for="exampleDropdownFormEmail1">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">New around here? Sign up</a>
<a class="dropdown-item" href="#">Forgot password?</a>
</div>
<form class="dropdown-menu p-4">
<div class="form-group">
<label for="exampleDropdownFormEmail2">Email address</label>
<input type="email" class="form-control" id="exampleDropdownFormEmail2" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword2">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword2" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck2">
<label class="form-check-label" for="dropdownCheck2">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
వాటిని సక్రియంగా స్టైల్ చేయడానికి.active
డ్రాప్డౌన్లోని అంశాలను జోడించండి .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item active" href="#">Active link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
వాటిని డిసేబుల్గా స్టైల్ చేయడానికి.disabled
డ్రాప్డౌన్లోని అంశాలను జోడించండి .
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Regular link</a>
<a class="dropdown-item disabled" href="#">Disabled link</a>
<a class="dropdown-item" href="#">Another link</a>
</div>
.show
డేటా అట్రిబ్యూట్లు లేదా జావాస్క్రిప్ట్ ద్వారా , మాతృ జాబితా అంశంలోని తరగతిని టోగుల్ చేయడం ద్వారా డ్రాప్డౌన్ ప్లగ్ఇన్ దాచిన కంటెంట్ను (డ్రాప్డౌన్ మెనులు) టోగుల్ చేస్తుంది . అప్లికేషన్ స్థాయిలో డ్రాప్డౌన్ మెనులను మూసివేయడం కోసం లక్షణం ఆధారపడి ఉంటుంది, కాబట్టి data-toggle="dropdown"
దీన్ని ఎల్లప్పుడూ ఉపయోగించడం మంచిది.
టచ్-ఎనేబుల్ చేయబడిన పరికరాలలో, డ్రాప్డౌన్ను తెరవడం వలన ఎలిమెంట్ యొక్క తక్షణ పిల్లలకు ఖాళీ ( $.noop
) హ్యాండ్లర్లు జోడించబడతాయి. ఐఓఎస్ ఈవెంట్ డెలిగేషన్లోని చమత్కారానికి సంబంధించి పని చేయడానికి ఈ అగ్లీ హ్యాక్ అవసరం , ఇది డ్రాప్డౌన్ వెలుపల ఎక్కడైనా ట్యాప్ చేస్తే డ్రాప్డౌన్ను మూసివేసే కోడ్ను ట్రిగ్గర్ చేయకుండా నిరోధించవచ్చు. డ్రాప్డౌన్ మూసివేయబడిన తర్వాత, ఈ అదనపు ఖాళీ హ్యాండ్లర్లు తీసివేయబడతాయి.mouseover
<body>
mouseover
data-toggle="dropdown"
డ్రాప్డౌన్ను టోగుల్ చేయడానికి లింక్ లేదా బటన్కు జోడించండి .
జావాస్క్రిప్ట్ ద్వారా డ్రాప్డౌన్లను కాల్ చేయండి:
data-toggle="dropdown"
ఇప్పటికీ అవసరం
మీరు జావాస్క్రిప్ట్ ద్వారా మీ డ్రాప్డౌన్కి కాల్ చేసినా లేదా బదులుగా డేటా-ఎపిని ఉపయోగించాలా అనే దానితో సంబంధం లేకుండా, data-toggle="dropdown"
డ్రాప్డౌన్ ట్రిగ్గర్ ఎలిమెంట్లో ఎల్లప్పుడూ ఉండటం అవసరం.
ఎంపికలు డేటా లక్షణాలు లేదా జావాస్క్రిప్ట్ ద్వారా పంపబడతాయి. డేటా అట్రిబ్యూట్ల కోసం, ఎంపిక పేరును data-
, లో వలె జత చేయండి data-offset=""
.
పేరు | టైప్ చేయండి | డిఫాల్ట్ | వివరణ |
---|---|---|---|
ఆఫ్సెట్ | సంఖ్య | స్ట్రింగ్ | ఫంక్షన్ | 0 | దాని లక్ష్యానికి సంబంధించి డ్రాప్డౌన్ ఆఫ్సెట్. మరింత సమాచారం కోసం Popper.js ఆఫ్సెట్ డాక్స్ని చూడండి . |
కుదుపు | బూలియన్ | నిజం | సూచన మూలకంపై అతివ్యాప్తి చెందితే డ్రాప్డౌన్ను ఫ్లిప్ చేయడానికి అనుమతించండి. మరింత సమాచారం కోసం Popper.js యొక్క ఫ్లిప్ డాక్స్ చూడండి . |
సరిహద్దు | స్ట్రింగ్ | మూలకం | 'స్క్రోల్ పేరెంట్' | డ్రాప్డౌన్ మెను యొక్క ఓవర్ఫ్లో పరిమితి సరిహద్దు. 'viewport' , 'window' , 'scrollParent' , లేదా HTMLElement సూచన (జావాస్క్రిప్ట్ మాత్రమే) విలువలను అంగీకరిస్తుంది . మరింత సమాచారం కోసం Popper.js's preventOverflow డాక్స్ని చూడండి . |
boundary
కంటే ఇతర ఏదైనా విలువకు సెట్ చేయబడినప్పుడు గమనించండి 'scrollParent'
, శైలి కంటైనర్కు position: static
వర్తించబడుతుంది ..dropdown
పద్ధతి | వివరణ |
---|---|
$().dropdown('toggle') |
ఇచ్చిన నావ్బార్ లేదా ట్యాబ్ చేయబడిన నావిగేషన్ యొక్క డ్రాప్డౌన్ మెనుని టోగుల్ చేస్తుంది. |
$().dropdown('update') |
మూలకం యొక్క డ్రాప్డౌన్ స్థానాన్ని నవీకరిస్తుంది. |
$().dropdown('dispose') |
మూలకం యొక్క డ్రాప్డౌన్ను నాశనం చేస్తుంది. |
అన్ని డ్రాప్డౌన్ ఈవెంట్లు .dropdown-menu
'పేరెంట్ ఎలిమెంట్పై తొలగించబడతాయి మరియు relatedTarget
టోగులింగ్ యాంకర్ ఎలిమెంట్ విలువ కలిగిన ఆస్తిని కలిగి ఉంటాయి.
ఈవెంట్ | వివరణ |
---|---|
show.bs.dropdown |
షో ఇన్స్టాన్స్ మెథడ్ని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే ఫైర్ అవుతుంది. |
shown.bs.dropdown |
డ్రాప్డౌన్ వినియోగదారుకు కనిపించేలా చేసినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (పూర్తి చేయడానికి CSS పరివర్తనాల కోసం వేచి ఉంటుంది). |
hide.bs.dropdown |
దాచు ఉదాహరణ పద్ధతిని పిలిచినప్పుడు ఈ ఈవెంట్ వెంటనే తొలగించబడుతుంది. |
hidden.bs.dropdown |
డ్రాప్డౌన్ వినియోగదారు నుండి దాచబడటం పూర్తయినప్పుడు ఈ ఈవెంట్ తొలగించబడుతుంది (CSS పరివర్తనలు పూర్తయ్యే వరకు వేచి ఉంటుంది). |