ድሮፕዳውንድስ

ዝርዝር መላግቦታትን ካልእን ንምርኣይ ብBotstrap ንቑልቁል ዝወርድ ፕላግ-ኢን ንምርኣይ ዓውደ-ጽሑፋዊ ምድብላቕ ምቕያር።

ሓፈሻዊ ትሕዝቶ

ንቑልቁል ዝወርድ ዝርዝር መላግቦታትን ካልእን ንምርኣይ ዝሕግዙ ተለዋወጥቲ ዝኾኑ፣ ዓውደ-ጽሑፋዊ ምድብላቕ እዮም። በቲ ዝተሓወሶ ቡትስትራፕ ንቑልቁል ዝወርድ ጃቫስክሪፕት ፕላግ-ኢን መስተጋብራዊ ይኾኑ። ብምጥዋቕ እምበር ብምንሳሕ ኣይኮኑን ዝቕየሩ፤ እዚ ኮነ ኢልካ ዝተገብረ ውሳነ ዲዛይን ’ ዩ ።

ድሮፕዳውንድ ኣብ ሳልሳይ ወገን ቤተ-መጻሕፍቲ ዝተሃንጸ ኮይኑ ፡ Popper.js ፡ ዳይናሚክ ኣቀማምጣን ቪውፖርት ምልላይን ይህብ። ቅድሚ ናይ Bootstrap ጃቫስክሪፕት popper.min.js ምእታውካ ኣረጋግጽ ወይ Popper.js ዝሓዘ bootstrap.bundle.min.js/ ተጠቐም። bootstrap.bundle.jsPopper.js ዳይናሚክ ኣቀማምጣ ስለዘየድሊ ግን ኣብ navbars ንውድቀት ንምቕማጥ ኣይጥቀመሉን እዩ።

ጃቫስክሪፕትና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">
  <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 ከምኡ ኣይኮነን። <button>ሕጂ ብኣማራጺ ኣብ ክንዲ <a>s ጥራይ ኣብ ንቑልቁል ዝወርድ ባእታታት ክትጥቀም ትኽእል ኢኻ ።

<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>

ብተወሳኺ ብዘይ መስተጋብራዊ ንቑልቁል ዝወርድ ነገራት ብ .dropdown-item-text. ብብሕታዊ CSS ወይ ጽሑፍ ዩቲሊቲታት ዝያዳ ቅዲ ክትገብሩ ናጻ ትኾኑ።

<div class="dropdown-menu">
  <span class="dropdown-item-text">Dropdown item text</span>
  <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>

ንቑሕ

.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="#" tabindex="-1" aria-disabled="true">Disabled link</a>
  <a class="dropdown-item" href="#">Another link</a>
</div>

ብነባሪ መልክዑ፡ ሓደ ንቑልቁል ዝወርድ ዝርዝር ብኣውቶማቲክ ካብ ላዕሊን ብጸጋማይ ሸነኽ ወላዲኡን 100% ይቕመጥ። .dropdown-menu-rightናብ a ወስኹ ናብ .dropdown-menuየማን ነቲ ንቑልቁል ዝወርድ ዝርዝር ኣሰላልፍዎ።

ርእሲ ንላዕሊ! ድሮፕዳውንድ ሳላ Popper.js (ብዘይካ ኣብ navbar ክሕዙ ከለዉ) ይቕመጡ።

<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>

ምላሽ ዝህብ ኣሰላልፋ

ምላሽ ዝህብ ኣሰላልፋ ክትጥቀም እንተደሊኻ፡ ነቲ data-display="static"ባህሪ ብምውሳኽ ዳይናሚክ ኣቀማምጣ ኣሰናኽልን ነቶም ምላሽ ዝህቡ ናይ ለውጢ ክፍልታት ተጠቐምን።

ነቲ ንቑልቁል ዝወርድ ዝርዝር ምስቲ ዝተዋህበ ነጥቢ ምብታኽ ወይ ካብኡ ዝዓቢ ንየማን ንምስምማዕ ፡ ወስኸሉ .dropdown-menu{-sm|-md|-lg|-xl}-right።

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Left-aligned but right aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-lg-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>

ንጸጋም ነቲ ንቑልቁል ዝወርድ ዝርዝር ምስቲ ዝተዋህበ ነጥቢ ምብታኽ ወይ ካብኡ ዝዓቢ ንምስምማዕ .dropdown-menu-right፡ ወስኸሉን .dropdown-menu{-sm|-md|-lg|-xl}-left።

<div class="btn-group">
  <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
    Right-aligned but left aligned when large screen
  </button>
  <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-left">
    <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>

data-display="static"Popper.js ኣብ navbars ስለዘይጥቀም፡ ኣብ navbars ንዝርከቡ ንቑልቁል ዝወርድ መጠወቒታት ባህሪ ምውሳኽ ከምዘየድልየካ ኣስተውዕል።

ኣርእስታት

ኣብ ዝኾነ ንቑልቁል ዝወርድ ዝርዝር ንክፋላት ተግባራት ስያመ ንምሃብ ርእሲ ምውሳኽ።

<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 p-4 text-muted" style="max-width: 200px;">
  <p>
    Some example text that's free-flowing within the dropdown menu.
  </p>
  <p class="mb-0">
    And this is more example text.
  </p>
</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-group">
      <div class="form-check">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Remember me
        </label>
      </div>
    </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-group">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="dropdownCheck2">
      <label class="form-check-label" for="dropdownCheck2">
        Remember me
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

ነቲ ንቑልቁል ዝወርድ ቦታ ንምቕያር data-offsetወይ ተጠቐም ።data-reference

<div class="d-flex">
  <div class="dropdown mr-1">
    <button type="button" class="btn btn-secondary dropdown-toggle" id="dropdownMenuOffset" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-offset="10,20">
      Offset
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuOffset">
      <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>
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Reference</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
      <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>
</div>

ኣጠቓቕማ

.showብመንገዲ ባህርያት ዳታ ወይ ጃቫስክሪፕት፡ እቲ ንቑልቁል ዝወርድ ተወሰኽቲ፡ ነቲ ክፍሊ ኣብቲ ወላዲ ዝርዝር ኣቕሓ ብምቕያር፡ ንዝተሓብአ ትሕዝቶ (ንቑልቁል ዝወርድ ዝርዝር) ይቕይሮ ። እቲ data-toggle="dropdown"ባህሪ ብደረጃ መተግበሪ ንዝርከቡ ንቑልቁል ዝወርድ ምልክታታት ንምዕጻው ዝጽጋዕ እዩ፣ ስለዚ ኩሉ ግዜ ክትጥቀመሉ ጽቡቕ ሓሳብ እዩ።

ኣብ ምትንኻፍ ዝኽእል መሳርሒታት፡ ንቑልቁል ዝወርድ ምኽፋት ባዶ ( $.noop) mouseoverመትሓዚታት ናብቶም ናይ ቀረባ ቆልዑ ናይቲ <body>ባእታ ይውስኽ። This admittedly ugly hack is necessary to work around a quirk in iOS' event delegation , እዚ እንተዘይኮይኑ ካብቲ ንቑልቁል ዝወርድ ወጻኢ ኣብ ዝኾነ ቦታ ምጥዋይ ነቲ ንቑልቁል ዝወርድ ኮድ ካብ ምብጋስ ክኽልክል ምኸኣለ። እቲ ንቑልቁል ዝወርድ ምስ ተዓጽወ፡ እዞም ተወሳኺ ባዶ 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-api ትጥቀም ብዘየገድስ data-toggle="dropdown"፡ ኩሉ ግዜ ኣብቲ ንቑልቁል ዝወርድ መበገሲ ባእታ ህልው ክህሉ ይግደድ።

ኣማራጺታት

ኣማራጺታት ብመንገዲ ዳታ ባህርያት ወይ ጃቫስክሪፕት ክሓልፉ ይኽእሉ። ንባህርያት ዳታ፡ ስም ኣማራጺ ናብ ምውሳኽ data-፡ ከምቲ ኣብ data-offset="".

ሽም	ዓይነት	ትሑዝ	መግለፂ
ኦፍሴት ዝበሃል ምዃኑ’ዩ።	ቁጽሪ \| ሕብረ ቃላት \| ተግባር	0.	ምትዕርራይ ናይቲ ምውራድ ብተዛማዲ ምስቲ ዕላማኡ። ሓደ ፋንክሽን ነቲ ኦፍሴት ንምውሳን ኣብ ዝጥቀመሉ እዋን፡ ነቲ ኦፍሴት ዳታ ዝሓዘ ነገር ከም ቀዳማይ ምጉቱ ሒዙ ይጽዋዕ። እቲ ፋንክሽን ተመሳሳሊ ኣቃውማ ዘለዎ ነገር ክመልስ ኣለዎ። እቲ መበገሲ ባእታ DOM node ከም ካልኣይ ሞጎተ ይሓልፍ። ንዝያዳ ሓበሬታ ኣብ Popper.js's offset docs ተወከሱ ።
መንገብገብ	ቡልያን ዝብል እዩ።	ሓቂ	ኣብቲ መወከሲ ባእታ ምድብላቕ እንተጋጢሙ ድሮፕዳውን ክግልበጥ ፍቐደሉ። ንዝያዳ ሓበሬታ ኣብ Popper.js's flip docs ተወከሱ ።
ዶብ ምዃኑ’ዩ።	ሕብረ ቃላት \| ባእታ	'ስክሮልወላዲ'።	ናይ ምፍሳስ ደረት ዶብ ናይቲ ንቑልቁል ዝወርድ ዝርዝር። `'viewport'`ናይ , `'window'`, `'scrollParent'`, ወይ ናይ HTMLElement መወከሲ ክብርታት ይቕበል (ጃቫስክሪፕት ጥራይ)። ንዝያዳ ሓበሬታ ኣብ Popper.js's preventOverflow docs ተወከሱ ።
መጣቀሲ	ሕብረ ቃላት \| ባእታ	'ምቕያር'።	መወከሲ ባእታ ናይቲ ንቑልቁል ዝወርድ ዝርዝር። `'toggle'`ናይ , `'parent'`, ወይ ናይ HTMLElement መወከሲ ክብርታት ይቕበል። ንዝያዳ ሓበሬታ ኣብ Popper.js's referenceObject docs ተወከሱ ።
ኣጫውት	ገመድ	'ዳይናሚክ'።	ብነባሪ ንዳይናሚክ ኣቀማምጣ Popper.js ንጥቀም። ነዚ ብ `static`.
ፖፐርኮንፊግ	ባዶ \| ግኡዝ ነገር	ከንቱ	ናይ Bootstrap ነባሪ Popper.js config ንምቕያር፡ ናይ Popper.js ውቅር ርአ

ኣስተውዕል boundaryካብ , ናብ ዝኾነ ዋጋ ክቕመጥ ከሎ 'scrollParent'፣ እቲ ቅዲ ኣብቲ መትሓዚ position: staticይትግበር ።.dropdown

ኣገባባት

ሜላ	መግለፂ
`$().dropdown('toggle')`	ናይ ሓደ ዝተዋህበ ናቭባር ወይ ትቦ ዘለዎ ምድህሳስ ንቑልቁል ዝወርድ ዝርዝር ይቕይሮ።
`$().dropdown('show')`	ናይ ሓደ ዝተዋህበ ናቭባር ወይ ትቦ ዘለዎ ምድህሳስ ንቑልቁል ዝወርድ ዝርዝር የርኢ።
`$().dropdown('hide')`	ናይ ሓደ ዝተዋህበ ናቭባር ወይ ትቦ ዘለዎ ምድህሳስ ንቑልቁል ዝወርድ ዝርዝር ይሓብእ።
`$().dropdown('update')`	ናይ ሓደ ባእታ ንቑልቁል ዝወርድ ቦታ ኣቀማምጣ የዘምን።
`$().dropdown('dispose')`	ናይ ሓደ ባእታ ንቑልቁል ዝወርድ የጥፍኦ።

ፍጻሜታት

ኩሎ�� ንቑልቁል ዝወርድ ፍጻመታት ኣብቲ .dropdown-menu's ወላዲ ባእታ ይትኮሱን ንብረት ኣለዎምን relatedTarget፣ ዋጋኡ ድማ እቲ ዝቕይር መልህቕ ባእታ እዩ። hide.bs.dropdownከምኡውን hidden.bs.dropdownፍጻመታት ንፍጻመ ጠውቂ ዝኸውን Event Object ዝሓዘ clickEventንብረት ኣለዎም (እቲ መበቆላዊ ዓይነት ፍጻመ ) ምስ ዝኸውን ጥራይ ።click

ዝግጅት	መግለፂ
`show.bs.dropdown`	እዚ ፍጻመ እዚ show instance ሜላ ምስ ዝጽዋዕ ብቕጽበት ይትኩስ።
`shown.bs.dropdown`	እዚ ክስተት ዝትኮስ እቲ ንቑልቁል ዝወርድ ንተጠቃሚ ርኡይ ምስ ዝኸውን እዩ (ክሳብ CSS ምስግጋራት ክጽበ እዩ፣ ክሳብ ዝዛዘም)።
`hide.bs.dropdown`	እዚ ፍጻመ እዚ እቲ hide instance method ምስ ተጸውዐ ብቕጽበት ይትኮስ።
`hidden.bs.dropdown`	እዚ ፍጻመ እዚ እቲ ንቑልቁል ዝወርድ ካብ ተጠቃሚ ምሕባእ ምስ ወድአ እዩ ዝትኮስ (ንCSS ምስግጋራት ክጽበ እዩ፣ ክሳብ ዝዛዘም)።

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something...
})

ድሮፕዳውንድስ

ሓፈሻዊ ትሕዝቶ

ተበጻሕነት

ኣብነታት

ንጽል መጠወቒ

ምፍንጫል ዝብል መጠወቒ

ሳይዚንግ ምግባር

ኣንፈታት

ድሮፕኣፕ

ድሮፕራይት።

ድሮፕለፍት

ናይ ምልክት ዝርዝር ነገራት

ንቑሕ

ስንኩል

ኣሰላልፋ ዝርዝር መግቢ

ምላሽ ዝህብ ኣሰላልፋ

ትሕዝቶ ዝርዝር መግቢ

ኣርእስታት

መከፋፈልቲ

ጽሑፍ

ቅጥዕታት

ኣጠቓቕማ

ብመንገዲ ባህርያት ዳታ

ብመንገዲ ጃቫስክሪፕት።

`data-toggle="dropdown"`ሕጂ’ውን ኣድላዪ እዩ።

ኣማራጺታት

ኣገባባት

ፍጻሜታት

ድሮፕዳውንድስ

ሓፈሻዊ ትሕዝቶ

ተበጻሕነት

ኣብነታት

ንጽል መጠወቒ

ምፍንጫል ዝብል መጠወቒ

ሳይዚንግ ምግባር

ኣንፈታት

ድሮፕኣፕ

ድሮፕራይት።

ድሮፕለፍት

ናይ ምልክት ዝርዝር ነገራት

ንቑሕ

ስንኩል

ኣሰላልፋ ዝርዝር መግቢ

ምላሽ ዝህብ ኣሰላልፋ

ትሕዝቶ ዝርዝር መግቢ

ኣርእስታት

ንቑልቁል ዝወርድ ርእሲ

መከፋፈልቲ

ጽሑፍ

ቅጥዕታት

ንቑልቁል ዝወርድ ኣማራጺታት

ኣጠቓቕማ

ብመንገዲ ባህርያት ዳታ

ብመንገዲ ጃቫስክሪፕት።

data-toggle="dropdown"ሕጂ’ውን ኣድላዪ እዩ።

ኣማራጺታት

ኣገባባት

ፍጻሜታት

`data-toggle="dropdown"`ሕጂ’ውን ኣድላዪ እዩ።