መውረድ
የአገናኞች ዝርዝሮችን እና ሌሎችንም በBootstrap ተቆልቋይ ተሰኪ ለማሳየት አውድ ተደራቢዎችን ቀይር።
ተቆልቋይዎች ሊቀያየሩ የሚችሉ፣ የአገናኞች ዝርዝሮችን ለማሳየት አውድ ተደራቢዎች እና ሌሎችም። ከተካተቱት የቡትስትራፕ ተቆልቋይ ጃቫ ስክሪፕት ተሰኪ ጋር መስተጋብራዊ እንዲሆኑ ተደርገዋል። እነሱ በማንዣበብ ሳይሆን ጠቅ በማድረግ ይቀየራሉ; ይህ ሆን ተብሎ የተደረገ የንድፍ ውሳኔ ነው.
ተቆልቋይዎች በሶስተኛ ወገን ቤተ-መጽሐፍት, Popper.js ላይ የተገነቡ ናቸው , ይህም ተለዋዋጭ አቀማመጥ እና የመመልከቻ ፍለጋን ያቀርባል. ከ Bootstrap ጃቫ ስክሪፕት በፊት popper.min.js ን ማካተትዎን ያረጋግጡ bootstrap.bundle.min.js
ወይም bootstrap.bundle.js
ፖፐር.js የያዘውን ይጠቀሙ። ምንም እንኳን ተለዋዋጭ አቀማመጥ የማያስፈልግ በመሆኑ Popper.js ተቆልቋይ ቦታዎችን በ navbars ውስጥ ለማስቀመጥ አያገለግልም።
የእኛን ጃቫ ስክሪፕት ከምንጩ እየገነቡ ከሆነ ያስፈልገዋልutil.js
።
የ WAI ARIA ስታንዳርድ ትክክለኛ role="menu"
መግብርን ይገልፃል ፣ ነገር ግን ይህ ተግባርን ወይም ተግባርን ለሚቀሰቅሱ እንደ መተግበሪያ ላሉ ምናሌዎች የተወሰነ ነው። የ ARIA ሜኑዎች የምናሌ ንጥሎችን፣ የአመልካች ሳጥን ሜኑ ንጥሎችን፣ የሬዲዮ አዝራሮችን የምናሌ ንጥሎችን፣ የሬዲዮ አዝራር ቡድኖችን እና ንዑስ-ምናሌዎችን ብቻ ነው መያዝ የሚችሉት።
በሌላ በኩል የቡትስትራፕ ተቆልቋይ ቦታዎች ሁሉን አቀፍ እና ለተለያዩ ሁኔታዎች እና የማርክ መስጫ መዋቅሮች ተፈጻሚ እንዲሆኑ የተነደፉ ናቸው። ለምሳሌ፣ ተጨማሪ ግብዓቶችን የያዙ ተቆልቋይዎችን መፍጠር እና እንደ የፍለጋ መስኮች ወይም የመግቢያ ቅጾች ያሉ የቅጽ መቆጣጠሪያዎችን መፍጠር ይቻላል። በዚህ ምክንያት, Bootstrap ለእውነተኛ 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
ወደ .dropdown-menu
ቀኝ አሰላለፍ።
ቀና በል! ለፖpper.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>
። ይህ ተቀባይነት ያለው አስቀያሚ ጠለፋ በ iOS' ክስተት ውክልና ዙሪያ ለመስራት አስፈላጊ ነው ፣ ይህ ካልሆነ ግን ከተቆልቋዩ ውጭ የትኛውም ቦታ መታ ተቆልቋይ የሚዘጋውን ኮድ እንዳያነሳሳ ይከላከላል። አንዴ ተቆልቋዩ ከተዘጋ፣ እነዚህ ተጨማሪ ባዶ mouseover
ተቆጣጣሪዎች ይወገዳሉ።
data-toggle="dropdown"
ተቆልቋይ ለመቀየር ወደ አገናኝ ወይም አዝራር ያክሉ ።
ተቆልቋዮቹን በጃቫስክሪፕት ይደውሉ፡-
data-toggle="dropdown"
አሁንም ያስፈልጋል
ተቆልቋይዎን በጃቫ ስክሪፕት ቢደውሉም ሆነ በምትኩ ዳታ-ኤፒውን ቢጠቀሙ data-toggle="dropdown"
ሁል ጊዜ በተቆልቋዩ ቀስቅሴ ክፍል ላይ መገኘት አለባቸው።
አማራጮች በመረጃ ባህሪያት ወይም በጃቫስክሪፕት ሊተላለፉ ይችላሉ. ለውሂብ ባህሪያት፣ data-
እንደ ውስጥ ያለውን የአማራጭ ስም ወደ ላይ ጨምር data-offset=""
።
ስም | ዓይነት | ነባሪ | መግለጫ |
---|---|---|---|
ማካካሻ | ቁጥር | ሕብረቁምፊ | ተግባር | 0 | ከዒላማው አንጻር የተቆልቋዩ ማካካሻ። ለበለጠ መረጃ የPopper.js ማካካሻ ሰነዶችን ይመልከቱ ። |
መገልበጥ | ቡሊያን | እውነት ነው። | በማጣቀሻው አካል ላይ ተደራራቢ ከሆነ ተቆልቋይ እንዲገለበጥ ፍቀድ። ለበለጠ መረጃ የPopper.js's Flip Docs ይመልከቱ ። |
ወሰን | ሕብረቁምፊ | ኤለመንት | 'ማሸብለል ወላጅ' | የተቆልቋይ ምናሌው የትርፍ ፍሰት ገደብ ወሰን። 'viewport' የ , 'window' , 'scrollParent' , ወይም HTMLElement ማጣቀሻ (ጃቫስክሪፕት ብቻ) እሴቶችን ይቀበላል . ለበለጠ መረጃ የPopper.jsን ከመጠን ያለፈ ፍሰትን ይመልከቱ ። |
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 ሽግግሮችን እስኪጠናቀቅ ድረስ ይጠብቃል)። |