ჩამოსაშლელები

გადართეთ კონტექსტური გადაფარვები ბმულების სიების საჩვენებლად და სხვა Bootstrap ჩამოსაშლელი მოდულით.

მიმოხილვა

ჩამოსაშლელები არის გადართვადი, კონტექსტური გადაფარვები ბმულების სიების საჩვენებლად და სხვა. ისინი ინტერაქტიულია ჩართული Bootstrap ჩამოსაშლელი JavaScript მოდულით. მათი გადართვა ხდება დაწკაპუნებით და არა მატრიცით; ეს არის მიზანმიმართული დიზაინის გადაწყვეტილება.

ჩამოსაშლელი ფაილები აგებულია მესამე მხარის ბიბლიოთეკაზე, Popper.js , რომელიც უზრუნველყოფს დინამიურ პოზიციონირებას და ხედვის პორტის ამოცნობას. დარწმუნდით, რომ ჩართეთ popper.min.js Bootstrap-ის JavaScript-მდე ან გამოიყენეთ bootstrap.bundle.min.js/ bootstrap.bundle.jsრომელიც შეიცავს Popper.js-ს. Popper.js არ გამოიყენება ჩამოსაშლელი ფაილების პოზიციონირებისთვის navbars-ში, თუმცა დინამიური პოზიციონირება არ არის საჭირო.

თუ თქვენ აშენებთ ჩვენს JavaScript-ს წყაროდან, ის მოითხოვსutil.js .

ხელმისაწვდომობა

WAI ARIA სტანდარტი განსაზღვრავს რეალურ role="menu"ვიჯეტს , მაგრამ ეს სპეციფიკურია აპლიკაციის მსგავსი მენიუებისთვის, რომლებიც ახდენენ მოქმედებებს ან ფუნქციებს. ARIA მენიუები შეიძლება შეიცავდეს მხოლოდ მენიუს ელემენტებს, მონიშვნის ველის მენიუს ელემენტებს, რადიო ღილაკების მენიუს ელემენტებს, რადიოს ღილაკების ჯგუფებს და ქვემენიუებს.

მეორეს მხრივ, Bootstrap-ის ჩამოსაშლელი ფაილები შექმნილია როგორც ზოგადი და გამოსაყენებელი სხვადასხვა სიტუაციებისა და მარკირების სტრუქტურებისთვის. მაგალითად, შესაძლებელია ჩამოსაშლელი ფანჯრების შექმნა, რომლებიც შეიცავენ დამატებით შენატანს და ფორმის კონტროლს, როგორიცაა საძიებო ველები ან შესვლის ფორმები. ამ მიზეზით, Bootstrap არ მოელის (არც ავტომატურად დაამატებს) რომელიმე ატრიბუტს role, aria-რომელიც საჭიროა ნამდვილი ARIA მენიუსთვის. ავტორებმა თავად უნდა შეიტანონ ეს უფრო კონკრეტული ატრიბუტები.

თუმცა, Bootstrap ამატებს ჩაშენებულ მხარდაჭერას კლავიატურის მენიუს უმეტესი სტანდარტული ურთიერთქმედებისთვის, როგორიცაა ცალკეულ .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-ში. ახლა თქვენ შეგიძლიათ სურვილისამებრ გამოიყენოთ <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>

მენიუს გასწორება

ნაგულისხმევად, ჩამოსაშლელი მენიუ ავტომატურად განლაგებულია 100%-ით ზემოდან და მისი მშობლის მარცხენა მხარეს. დაამატეთ .dropdown-menu-righta- .dropdown-menuში მარჯვნივ გასწორება ჩამოსაშლელი მენიუში.

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

მენიუს ფორმები

განათავსეთ ფორმა ჩამოსაშლელ მენიუში, ან გადააქციეთ ის ჩამოსაშლელ მენიუში და გამოიყენეთ ზღვრული ან padding უტილიტები , რომ მისცეთ მას თქვენთვის საჭირო უარყოფითი სივრცე.

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

გამოყენება

მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით ჩამოსაშლელი დანამატი გადართავს ფარულ შინაარსს (ჩამოშლელ მენიუებს) .showკლასის გადართვით მშობელი სიის ელემენტზე. data-toggle="dropdown"ატრიბუტს ეყრდნობა ჩამოსაშლელი მენიუების დახურვისთვის აპლიკაციის დონეზე, ამიტომ კარგი იდეაა მისი ყოველთვის გამოყენება .

მონაცემთა ატრიბუტების მეშვეობით

დაამატეთ 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()

Პარამეტრები

ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით. მონაცემთა ატრიბუტებისთვის, დაამატეთ ვარიანტის სახელი data-, როგორც data-offset="".

გაითვალისწინეთ, როდესაც boundaryდაყენებულია სხვა მნიშვნელობაზე, გარდა 'scrollParent', სტილი position: staticგამოიყენება .dropdownკონტეინერზე.

მეთოდები

Ივენთი

ყველა ჩამოსაშლელი მოვლენა გაშვებულია .dropdown-menu'-ის მშობელ ელემენტზე და აქვს relatedTargetთვისება, რომლის მნიშვნელობა არის გადართვის წამყვანი ელემენტი.

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