Source

መውረድ

የአገናኞች ዝርዝሮችን እና ሌሎችንም በ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>

በጣም ጥሩው ክፍል ይህንን በማንኛውም የአዝራር ልዩነት ማድረግ ይችላሉ፡

<!-- Example single danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action
  </button>
  <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>

የተከፈለ ቁልፍ ተቆልቋይ

በተመሳሳይ፣ የተከፈለ አዝራር ተቆልቋይዎችን ይፍጠሩ እንደ ነጠላ የአዝራር ተቆልቋይዎች ተመሳሳይ ምልክት ያደረጉ፣ ነገር ግን .dropdown-toggle-splitበተቆልቋይ ተንከባካቢው ዙሪያ ለትክክለኛ ክፍተት በማከል።

ይህንን ተጨማሪ ክፍል paddingበመንከባከቢያው በሁለቱም በኩል ያለውን አግድም በ25% ለመቀነስ እና margin-leftለመደበኛ የአዝራሮች ተቆልቋይዎች የተጨመረውን ለማስወገድ እንጠቀማለን። እነዚያ ተጨማሪ ለውጦች ተንከባካቢው በተከፋፈለው ቁልፍ ላይ ያተኩሩታል እና ከዋናው ቁልፍ ቀጥሎ ያለውን ትክክለኛ መጠን ያለው የተመታ ቦታ ያቅርቡ።

<!-- Example split danger button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <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>

መጠናቸው

የአዝራር ተቆልቋይዎች ነባሪ እና የተከፋፈሉ ተቆልቋይ አዝራሮችን ጨምሮ ከሁሉም መጠኖች አዝራሮች ጋር ይሰራሉ።

<!-- Large button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-lg" type="button">
    Large split button
  </button>
  <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

<!-- Small button groups (default and split) -->
<div class="btn-group">
  <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>
<div class="btn-group">
  <button class="btn btn-secondary btn-sm" type="button">
    Small split button
  </button>
  <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    ...
  </div>
</div>

የመጣል ልዩነት

.dropupወደ ወላጅ ኤለመንት በማከል የተቆልቋይ ምናሌዎችን ከንጥረ ነገሮች በላይ ያስነሱ ።

<!-- Default dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropup button -->
<div class="btn-group dropup">
  <button type="button" class="btn btn-secondary">
    Split dropup
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

ጠብታ ልዩነት

.droprightወደ ወላጅ ኤለመንት በማከል በንጥረ ነገሮች በስተቀኝ ያሉ ተቆልቋይ ምናሌዎችን ያስነሱ ።

<!-- Default dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropright
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropright button -->
<div class="btn-group dropright">
  <button type="button" class="btn btn-secondary">
    Split dropright
  </button>
  <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="sr-only">Toggle Dropright</span>
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

የመውደቅ ልዩነት

.dropleftወደ ወላጅ ኤለመንት በማከል ከንጥረ ነገሮች በስተግራ ተቆልቋይ ምናሌዎችን ያስነሱ ።

<!-- Default dropleft button -->
<div class="btn-group dropleft">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropleft
  </button>
  <div class="dropdown-menu">
    <!-- Dropdown menu links -->
  </div>
</div>

<!-- Split dropleft button -->
<div class="btn-group">
  <div class="btn-group dropleft" role="group">
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropleft</span>
    </button>
    <div class="dropdown-menu">
      <!-- Dropdown menu links -->
    </div>
  </div>
  <button type="button" class="btn btn-secondary">
    Split dropleft
  </button>
</div>

በታሪክ ተቆልቋይ ምናሌ ይዘቶች አገናኞች መሆን ነበረባቸው ፣ ነገር ግን ይህ ከአሁን በኋላ 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"ተቆልቋይ ለመቀየር ወደ አገናኝ ወይም አዝራር ያክሉ ።

<div class="dropdown">
  <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown trigger
  </button>
  <div class="dropdown-menu" aria-labelledby="dLabel">
    ...
  </div>
</div>

በጃቫስክሪፕት በኩል

ተቆልቋዮቹን በጃቫስክሪፕት ይደውሉ፡-

$('.dropdown-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 ሽግግሮችን እስኪጠናቀቅ ድረስ ይጠብቃል)።
$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})