ტილო
შექმენით ფარული გვერდითი ზოლები თქვენს პროექტში ნავიგაციისთვის, საყიდლების კალათებისთვის და სხვა რამდენიმე კლასებით და ჩვენი 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-ის სათაურები გაუქმების ქმედებებით, ან მიაწოდოთ ცალსახა გაუქმების ქმედება.
ტილო
<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"
აუცილებელია.
ტილო
<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-ის გამოსაყენებლად . დარწმუნდით, რომ დაამატეთ კლასი offcanvas
offcanvas ელემენტს. თუ გსურთ ნაგულისხმევად გახსნა, დაამატეთ დამატებითი კლასი 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...
})