გადადით მთავარ შინაარსზე დოკუმენტების ნავიგაციაზე გადასვლა
in English

ტილო

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

Როგორ მუშაობს

Offcanvas არის გვერდითი ზოლის კომპონენტი, რომლის გადართვა შესაძლებელია JavaScript-ის საშუალებით, რათა გამოჩნდეს ხედის მარცხენა, მარჯვენა ან ქვედა კიდიდან. ღილაკები ან წამყვანები გამოიყენება როგორც ტრიგერები, რომლებიც მიმაგრებულია კონკრეტულ ელემენტებზე, რომლებსაც გადართავთ, და dataატრიბუტები გამოიყენება ჩვენი JavaScript-ის გამოსაძახებლად.

  • Offcanvas იზიარებს რამდენიმე იმავე JavaScript კოდს, როგორც მოდალს. კონცეპტუალურად, ისინი საკმაოდ მსგავსია, მაგრამ ისინი ცალკე დანამატებია.
  • ანალოგიურად, ზოგიერთი წყარო Sass ცვლადი offcanvas-ის სტილისა და ზომებისთვის მემკვიდრეობით მიიღება მოდალის ცვლადებიდან.
  • როდესაც ნაჩვენებია, offcanvas მოიცავს ნაგულისხმევ ფონს, რომელზედაც შეიძლება დააწკაპუნოთ offcanvas-ის დასამალად.
  • მოდალების მსგავსად, შესაძლებელია მხოლოდ ერთი ტილოების ჩვენება ერთდროულად.

Თავები მაღლა! იმის გათვალისწინებით, თუ როგორ ამუშავებს CSS ანიმაციებს, თქვენ არ შეგიძლიათ marginგამოიყენოთ translateელემენტი .offcanvas. ამის ნაცვლად, გამოიყენეთ კლასი, როგორც დამოუკიდებელი შეფუთვის ელემენტი.

ამ კომპონენტის ანიმაციური ეფექტი დამოკიდებულია prefers-reduced-motionმედიის მოთხოვნაზე. იხილეთ ჩვენი ხელმისაწვდომობის დოკუმენტაციის შემცირებული მოძრაობის განყოფილება .

მაგალითები

Offcanvas კომპონენტები

ქვემოთ მოცემულია offcanvas-ის მაგალითი, რომელიც ნაჩვენებია ნაგულისხმევად (-ის მეშვეობით .show) .offcanvas. Offcanvas მოიცავს სათაურის მხარდაჭერას დახურვის ღილაკით და სხეულის არჩევით კლასს ზოგიერთი საწყისისთვის padding. ჩვენ გირჩევთ, რომ შეძლებისდაგვარად, ჩართოთ offcanvas-ის სათაურები გაუქმების ქმედებებით, ან მიაწოდოთ ცალსახა გაუქმების ქმედება.

ტილო
კონტენტი offcanvas-ისთვის არის აქ. თქვენ შეგიძლიათ მოათავსოთ თითქმის ნებისმიერი Bootstrap კომპონენტი ან მორგებული ელემენტები აქ.
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas" aria-labelledby="offcanvasLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
  </div>
</div>

ცოცხალი დემო

გამოიყენეთ ქვემოთ მოცემული ღილაკები, რათა აჩვენოთ და დამალოთ offcanvas ელემენტი JavaScript-ის საშუალებით, რომელიც ცვლის .showკლასს ელემენტზე .offcanvasკლასთან.

  • .offcanvasმალავს კონტენტს (ნაგულისხმევი)
  • .offcanvas.showაჩვენებს შინაარსს

შეგიძლიათ გამოიყენოთ ბმული hrefატრიბუტით, ან ღილაკი data-bs-targetატრიბუტით. ორივე შემთხვევაში data-bs-toggle="offcanvas"აუცილებელია.

ლინკი href-თან
ტილო
ზოგიერთი ტექსტი, როგორც ჩანაცვლების ადგილი. რეალურ ცხოვრებაში თქვენ შეგიძლიათ გქონდეთ არჩეული ელემენტები. მოწონება, ტექსტი, სურათები, სიები და ა.შ.
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
  Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
    </div>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>
  </div>
</div>

განთავსება

არ არის ნაგულისხმევი განთავსება offcanvas კომპონენტებისთვის, ასე რომ თქვენ უნდა დაამატოთ მოდიფიკატორის ერთ-ერთი კლასი ქვემოთ;

  • .offcanvas-startათავსებს ტილოებს ხედის მარცხნივ (ზემოთ ნაჩვენები)
  • .offcanvas-endათავსებს ტილოებს ხედის მარჯვენა მხარეს
  • .offcanvas-topათავსებს ტილოებს ხედის ზედა ნაწილში
  • .offcanvas-bottomათავსებს ტილოებს ხედის ქვედა ნაწილში

სცადეთ ზედა, მარჯვენა და ქვედა მაგალითები ქვემოთ.

ტილოს ზედა
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Toggle top offcanvas</button>

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
ტილოზე მარჯვნივ
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle right offcanvas</button>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
  <div class="offcanvas-header">
    <h5 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>
ტილოზე ქვედა
...
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Toggle bottom offcanvas</button>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas bottom</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

ფონი

ელემენტის გადახვევა <body>გამორთულია, როდესაც ტილო და მისი ფონი ჩანს. გამოიყენეთ data-bs-scrollატრიბუტი <body>გადასასვლელად და data-bs-backdropფონის გადასართავად.

ფერადი გადახვევით

სცადეთ გადაახვიოთ გვერდის დანარჩენი ნაწილი, რომ ნახოთ ეს ვარიანტი მოქმედებაში.

ტილო ფონზე

.....

ფონზე გადახვევა

სცადეთ გადაახვიოთ გვერდის დანარჩენი ნაწილი, რომ ნახოთ ეს ვარიანტი მოქმედებაში.

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable both scrolling & backdrop</button>

<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Try scrolling the rest of the page to see this option in action.</p>
  </div>
</div>

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

ვინაიდან offcanvas პანელი კონცეპტუალურად არის მოდალური დიალოგი, დარწმუნდით, რომ დაამატეთ aria-labelledby="..."— offcanvas სათაურის მითითებით — .offcanvas. გაითვალისწინეთ, რომ თქვენ არ გჭირდებათ დამატება, role="dialog"რადგან ჩვენ უკვე ვამატებთ მას JavaScript-ის საშუალებით.

სას

ცვლადები

$offcanvas-padding-y:               $modal-inner-padding;
$offcanvas-padding-x:               $modal-inner-padding;
$offcanvas-horizontal-width:        400px;
$offcanvas-vertical-height:         30vh;
$offcanvas-transition-duration:     .3s;
$offcanvas-border-color:            $modal-content-border-color;
$offcanvas-border-width:            $modal-content-border-width;
$offcanvas-title-line-height:       $modal-title-line-height;
$offcanvas-bg-color:                $modal-content-bg;
$offcanvas-color:                   $modal-content-color;
$offcanvas-box-shadow:              $modal-content-box-shadow-xs;

გამოყენება

offcanvas მოდული იყენებს რამდენიმე კლასს და ატრიბუტს მძიმე აწევისთვის:

  • .offcanvasმალავს შინაარსს
  • .offcanvas.showაჩვენებს შინაარსს
  • .offcanvas-startმალავს ტილო მარცხნივ
  • .offcanvas-endმალავს ტილო მარჯვნივ
  • .offcanvas-bottomმალავს ტილო ბოლოში

დაამატეთ გაუქმების ღილაკი data-bs-dismiss="offcanvas"ატრიბუტით, რაც იწვევს JavaScript ფუნქციონირებას. დარწმუნდით, რომ გამოიყენეთ <button>ელემენტი ყველა მოწყობილობაში სათანადო ქცევისთვის.

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

დაამატეთ data-bs-toggle="offcanvas"და a data-bs-targetან hrefელემენტს, რათა ავტომატურად მიენიჭოთ კონტროლი ერთი offcanvas ელემენტის. data-bs-targetატრიბუტი იღებს CSS ამომრჩეველს offcanvas-ის გამოსაყენებლად . დარწმუნდით, რომ დაამატეთ კლასი offcanvasoffcanvas ელემენტს. თუ გსურთ ნაგულისხმევად გახსნა, დაამატეთ დამატებითი კლასი show.

JavaScript-ის საშუალებით

ხელით ჩართეთ:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Პარამეტრები

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

სახელი ტიპი ნაგულისხმევი აღწერა
backdrop ლოგიკური true დაიტანეთ ფონი სხეულზე, სანამ ოფისი ღიაა
keyboard ლოგიკური true ხურავს offcanvas-ს გაქცევის ღილაკის დაჭერისას
scroll ლოგიკური false სხეულის გადახვევის დაშვება, სანამ ტილო ღიაა

მეთოდები

ასინქრონული მეთოდები და გადასვლები

ყველა API მეთოდი ასინქრონულია და იწყებს გადასვლას . ისინი უბრუნდებიან აბონენტს გადასვლის დაწყებისთანავე, მაგრამ მის დასრულებამდე . გარდა ამისა, მეთოდის გამოძახება გარდამავალ კომპონენტზე იგნორირებული იქნება .

იხილეთ ჩვენი JavaScript დოკუმენტაცია დამატებითი ინფორმაციისთვის .

ააქტიურებს თქვენს კონტენტს, როგორც offcanvas ელემენტს. იღებს არასავალდებულო ვარიანტებს object.

თქვენ შეგიძლიათ შექმნათ offcanvas მაგალითი კონსტრუქტორით, მაგალითად:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
მეთოდი აღწერა
toggle გადართავს offcanvas ელემენტს ჩვენებაზე ან დამალვაზე. უბრუნდება აბონენტს offcanvas ელემენტის რეალურად ჩვენებამდე ან დამალვამდე (ანუ, სანამ shown.bs.offcanvasან hidden.bs.offcanvasმოვლენა მოხდება).
show აჩვენებს offcanvas ელემენტს. უბრუნდება აბონენტს offcanvas ელემენტის რეალურად ჩვენებამდე (ანუ shown.bs.offcanvasმოვლენის დადგომამდე).
hide მალავს offcanvas ელემენტს. უბრუნდება აბონენტს offcanvas ელემენტის დამალვამდე (ანუ hidden.bs.offcanvasმოვლენის დაწყებამდე).
getInstance სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ offcanvas მაგალითი, რომელიც დაკავშირებულია DOM ელემენტთან
getOrCreateInstance სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ offcanvas ეგზემპლარი, რომელიც დაკავშირებულია DOM ელემენტთან, ან შექმნათ ახალი, თუ ის არ იყო ინიციალიზებული

Ივენთი

Bootstrap-ის offcanvas კლასი ავლენს რამდენიმე მოვლენას offcanvas-ის ფუნქციონირებაში ჩასართავად.

ღონისძიების ტიპი აღწერა
show.bs.offcanvas ეს მოვლენა მაშინვე ირთვება, როდესაც showგამოიძახება ეგზემპლარის მეთოდი.
shown.bs.offcanvas ეს ღონისძიება გააქტიურებულია, როდესაც offcanvas ელემენტი გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას).
hide.bs.offcanvas ეს ღონისძიება ჩართულია მაშინვე, როდესაც hideმეთოდი გამოიძახება.
hidden.bs.offcanvas ეს ღონისძიება გააქტიურებულია, როდესაც offcanvas ელემენტი დამალულია მომხმარებლისგან (დაელოდება CSS გადასვლების დასრულებას).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})