Унтраах цэсүүд

Bootstrap унадаг залгаасыг ашиглан холбоосын жагсаалт болон бусад зүйлийг харуулах контекст давхаргыг сэлгэх.

Тойм

Унтраах цэсүүд нь сэлгэх боломжтой, холбоосын жагсаалт болон бусад зүйлсийг харуулах контекст давхаргууд юм. Тэдгээрийг оруулсан Bootstrap унадаг JavaScript залгаастай интерактив болгосон. Тэдгээрийг зөөвөрлөх замаар биш харин товших замаар сэлгэх боломжтой; Энэ бол санаатай дизайны шийдвэр юм.

Унтраах файлуудыг гуравдагч талын Popper.js номын сан дээр бүтээдэг бөгөөд энэ нь динамик байрлал тогтоох болон харагдах хэсгийг илрүүлэх боломжийг олгодог. Bootstrap-ийн JavaScript-н өмнө popper.min.js оруулах эсвэл Popper.js-г агуулсан bootstrap.bundle.min.js/ ашиглахаа мартуузай. bootstrap.bundle.jsPopper.js нь динамик байрлал тогтоох шаардлагагүй тул унадаг цэсийг navbar дээр байрлуулахад ашигладаггүй.

Хэрэв та манай JavaScript-г эх сурвалжаас бүтээж байгаа бол энэ ньutil.js .

Хүртээмжтэй байдал

WAI ARIA стандарт нь бодит виджетийг role="menu"тодорхойлдог боловч энэ нь үйлдэл эсвэл функцийг идэвхжүүлдэг програмтай төстэй цэсүүдэд зориулагдсан юм. ARIA цэс нь зөвхөн цэсийн зүйл, шалгах хайрцагны цэсийн зүйл, радио товчлуурын цэсийн зүйл, радио товчлуурын бүлгүүд болон дэд цэсүүдийг агуулж болно.

Нөгөө талаас Bootstrap-ийн уналт нь ерөнхий байхаар бүтээгдсэн бөгөөд янз бүрийн нөхцөл байдал, тэмдэглэгээний бүтцэд хэрэглэгдэх боломжтой. Жишээлбэл, хайлтын талбар эсвэл нэвтрэх маягт гэх мэт нэмэлт оролт, маягтын удирдлагыг агуулсан унадаг цэсүүдийг үүсгэх боломжтой. Ийм учраас Bootstrap нь жинхэнэ ARIA цэсэнд шаардлагатай шинж чанаруудын аль нэгийг нь хүлээхгүй ( roleмөн автоматаар нэмдэггүй). Зохиогчид эдгээр илүү тодорхой шинж чанаруудыг өөрсдөө оруулах ёстой.aria-

.dropdown-itemГэсэн хэдий ч Bootstrap нь курсорын товчлууруудыг ашиглан бие даасан элементүүдээр шилжих, цэсийг товчлуураар хаах зэрэг гарны цэсийн ихэнх стандарт харилцан үйлчлэлд суурилуулсан дэмжлэгийг нэмдэг 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баруун тийш зэрэгцүүлэх.

Анхаараарай! Унтраах цэсүүд нь 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Өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулан унадаг залгаас нь эх жагсаалтын зүйл дээрх ангийг сэлгэх замаар далд агуулгыг (унадаг цэс) сэлгэдэг . Атрибут data-toggle="dropdown"нь програмын түвшинд унждаг цэсийг хаахад тулгуурладаг тул үүнийг үргэлж ашиглах нь зүйтэй.

Мэдрэгчтэй төхөөрөмжүүд дээр унадаг цэсийг нээх нь элементийн шууд хүүхдүүд рүү хоосон ( $.noop) зохицуулагчийг нэмнэ. Энэхүү муухай хакерт нь iOS-ийн арга хэмжээний төлөөлөгчдийн доторх хачирхалтай байдлыг арилгахад зайлшгүй шаардлагатай бөгөөд энэ нь унадаг цэснээс гадна хаана ч товших нь унадаг цэсийг хаадаг кодыг өдөөхөөс сэргийлнэ. Унтраах цонхыг хаасны дараа эдгээр нэмэлт хоосон зохицуулагчийг устгана.mouseover<body>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>

JavaScript-ээр дамжуулан

JavaScript-ээр унадаг цэс рүү залгана уу:

$('.dropdown-toggle').dropdown()

`data-toggle="dropdown"`шаардлагатай хэвээр байна

Та JavaScript-ээр унадаг цэс рүү залгах эсвэл оронд нь data-api ашиглах эсэхээс үл хамааран унадаг цэсний data-toggle="dropdown"гох элемент дээр байнга байх шаардлагатай.

Сонголтууд

Сонголтуудыг өгөгдлийн шинж чанарууд эсвэл JavaScript-ээр дамжуулж болно. Өгөгдлийн шинж чанаруудын хувьд сонголтын нэрийг -д data-хавсаргана data-offset="".

Нэр	Төрөл	Өгөгдмөл	Тодорхойлолт
офсет	тоо \| мөр \| функц	0	Зорилтоттой харьцуулахад унждаг цэсийн офсет. Дэлгэрэнгүй мэдээллийг Popper.js-ийн офсет баримтаас үзнэ үү .
эргүүлэх	логик	үнэн	Лавлагаа элемент дээр давхцсан тохиолдолд Dropdown-ыг эргүүлэхийг зөвшөөрнө үү. Дэлгэрэнгүй мэдээллийг Popper.js-ийн flip docs -оос үзнэ үү .
хил хязгаар	мөр \| элемент	'scrollParent'	Унждаг цэсний халих хязгаарлалтын хил хязгаар. `'viewport'`, `'window'`, `'scrollParent'`, эсвэл HTMLElement лавлагааны утгуудыг (зөвхөн JavaScript) хүлээн авна. Дэлгэрэнгүй мэдээллийг Popper.js-ийн preventOverflow баримтаас үзнэ үү .

boundary-аас өөр ямар ч утгыг тохируулах үед 'scrollParent'уг загвар position: staticнь .dropdownсаванд хэрэглэгдэхийг анхаарна уу.

Арга зүй

Арга	Тодорхойлолт
`$().dropdown('toggle')`	Өгөгдсөн навигацийн самбар эсвэл цонхтой навигацийн унждаг цэсийг сэлгэх.
`$().dropdown('update')`	Элементийн унадаг цэсийн байрлалыг шинэчилнэ.
`$().dropdown('dispose')`	Элементийн унадаг цэсийг устгана.

Үйл явдал

Унтраах бүх үйл явдлууд нь .dropdown-menuүндсэн элемент дээр ажилладаг relatedTargetбөгөөд үнэ цэнэ нь залгах зангуу элемент болох өмчтэй байна.

Үйл явдал	Тодорхойлолт
`show.bs.dropdown`	Show instance аргыг дуудах үед энэ үйл явдал шууд идэвхждэг.
`shown.bs.dropdown`	Унтраах цэсийг хэрэглэгчдэд харагдуулах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).
`hide.bs.dropdown`	Нуух жишээний аргыг дуудсан үед энэ үйл явдал шууд идэвхждэг.
`hidden.bs.dropdown`	Унтраах цэсийг хэрэглэгчээс нууж дуусах үед энэ үйл явдал идэвхждэг (CSS шилжилтийг дуусгахыг хүлээх болно).

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

Унтраах цэсүүд

Тойм

Хүртээмжтэй байдал

Жишээ

Нэг товчлуурын уналт

Унтраах товчлууруудыг хуваах

Хэмжээ тогтоох

Унтраах хувилбар

Дуслах өөрчлөлт

Зүүн дусал өөрчлөлт

Цэсийн зүйл

Цэсний тохируулга

Цэсний толгой хэсэг

Цэс хуваагч

Цэсийн хэлбэрүүд

Идэвхтэй цэсийн зүйлүүд

Цэсийн зүйлсийг идэвхгүй болгосон

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

JavaScript-ээр дамжуулан

`data-toggle="dropdown"`шаардлагатай хэвээр байна

Сонголтууд

Арга зүй

Үйл явдал

Унтраах цэсүүд

Тойм

Хүртээмжтэй байдал

Жишээ

Нэг товчлуурын уналт

Унтраах товчлууруудыг хуваах

Хэмжээ тогтоох

Унтраах хувилбар

Дуслах өөрчлөлт

Зүүн дусал өөрчлөлт

Цэсийн зүйл

Цэсний тохируулга

Цэсний толгой хэсэг

Унждаг толгой хэсэг

Цэс хуваагч

Цэсийн хэлбэрүүд

Идэвхтэй цэсийн зүйлүүд

Цэсийн зүйлсийг идэвхгүй болгосон

Хэрэглээ

Өгөгдлийн шинж чанаруудаар дамжуулан

JavaScript-ээр дамжуулан

data-toggle="dropdown"шаардлагатай хэвээр байна

Сонголтууд

Арга зүй

Үйл явдал

`data-toggle="dropdown"`шаардлагатай хэвээр байна