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 კომპონენტი ან მორგებული ელემენტები აქ.

html

<div class="offcanvas offcanvas-start show" 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" 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-თან

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

html

<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" 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" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu">
        <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>

სხეულის გადახვევა

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

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

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</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">Offcanvas with body scrolling</h5>
    <button type="button" class="btn-close" 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>

სხეულის გადახვევა და ფონი

თქვენ ასევე შეგიძლიათ ჩართოთ <body>გადახვევა ხილული ფონით.

html

<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" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
    <button type="button" class="btn-close" 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 არ დაიხურება მის გარეთ დაწკაპუნებისას.

არ დავხურავ, თუ ჩემს გარეთ დააწკაპუნებ.

html

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
  Toggle static offcanvas
</button>

<div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      I will not close if you click outside of me.
    </div>
  </div>
</div>

მუქი ტილო

დამატებულია v5.2.0-ში

შეცვალეთ ტილოების გარეგნობა კომუნალური პროგრამებით, რათა უკეთ შეესაბამებოდეს მათ სხვადასხვა კონტექსტს, როგორიცაა მუქი ნავი ზოლები. აქ ჩვენ დავამატებთ .text-bg-darkდა to- .offcanvasს სწორი სტილისთვის მუქი ტილოთი. თუ თქვენ გაქვთ ჩამოსაშლელი ფაილები, განიხილეთ ასევე დამატება ..btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

განათავსეთ offcanvas შინაარსი აქ.

html

<div class="offcanvas offcanvas-start show text-bg-dark" tabindex="-1" id="offcanvasDark" aria-labelledby="offcanvasDarkLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasDarkLabel">Offcanvas</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvasDark" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Place offcanvas content here.</p>
  </div>
</div>

საპასუხო

დამატებულია v5.2.0-ში

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

შეცვალეთ თქვენი ბრაუზერის ზომა, რათა აჩვენოს რეაგირებადი offcanvas გადართვა.

ეს არის შინაარსის ფარგლებში .offcanvas-lg.

html

<button class="btn btn-primary d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasResponsive" aria-controls="offcanvasResponsive">Toggle offcanvas</button>

<div class="alert alert-info d-none d-lg-block">Resize your browser to show the responsive offcanvas toggle.</div>

<div class="offcanvas-lg offcanvas-end" tabindex="-1" id="offcanvasResponsive" aria-labelledby="offcanvasResponsiveLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasResponsiveLabel">Responsive offcanvas</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#offcanvasResponsive" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p class="mb-0">This is content within an <code>.offcanvas-lg</code>.</p>
  </div>
</div>

საპასუხო offcanvas კლასები ხელმისაწვდომია თითოეული წყვეტის წერტილისთვის.

.offcanvas
.offcanvas-sm
.offcanvas-md
.offcanvas-lg
.offcanvas-xl
.offcanvas-xxl

განთავსება

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

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

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

...

html

<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 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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 class="offcanvas-title" id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

html

<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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

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

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

CSS

ცვლადები

დამატებულია v5.2.0-ში

როგორც Bootstrap-ის განვითარებადი CSS ცვლადების მიდგომის ნაწილი, offcanvas ახლა იყენებს ადგილობრივ CSS ცვლადებს .offcanvasრეალურ დროში გაუმჯობესებული პერსონალიზაციისთვის. CSS ცვლადების მნიშვნელობები დაყენებულია Sass-ის საშუალებით, ამიტომ Sass-ის პერსონალიზაცია კვლავ მხარდაჭერილია.

  --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
  --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
  --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
  --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
  --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
  --#{$prefix}offcanvas-color: #{$offcanvas-color};
  --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
  --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
  --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
  --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};

Sass ცვლადები

$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-backdrop-bg:             $modal-backdrop-bg;
$offcanvas-backdrop-opacity:        $modal-backdrop-opacity;

გამოყენება

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

.offcanvasმალავს შინაარსს
.offcanvas.showაჩვენებს შინაარსს
.offcanvas-startმალავს ტილო მარცხნივ
.offcanvas-endმალავს ტილო მარჯვნივ
.offcanvas-topმალავს ტილო ზემოდან
.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.

გაუქმება

განთავისუფლება შეიძლება მიღწეული dataატრიბუტით ღილაკზე offcanvas-ში , როგორც ეს ნაჩვენებია ქვემოთ:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>

ან ღილაკზე offcanvas- ის გარეთ, გამოყენებით, data-bs-targetროგორც ნაჩვენებია ქვემოთ:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>

მიუხედავად იმისა, რომ offcanvas-ის გაუქმების ორივე გზა მხარდაჭერილია, გაითვალისწინეთ, რომ offcanvas-ის გარედან გაუქმება არ ემთხვევა ARIA ავტორინგის პრაქტიკის სახელმძღვანელოს დიალოგის (მოდალური) შაბლონს . გააკეთეთ ეს საკუთარი რისკის ქვეშ.

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

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

const offcanvasElementList = document.querySelectorAll('.offcanvas')
const offcanvasList = [...offcanvasElementList].map(offcanvasEl => new bootstrap.Offcanvas(offcanvasEl))

Პარამეტრები

იმის გამო, რომ ოფციების გადაცემა შესაძლებელია მონაცემთა ატრიბუტების ან JavaScript-ის საშუალებით, შეგიძლიათ დაამატოთ ოფციის სახელი data-bs-, როგორც data-bs-animation="{value}". დარწმუნდით, რომ შეცვალეთ ოფციის სახელის ქეისის ტიპი „ camelCase “-დან „ kebab-case “-ზე ოფციების მონაცემთა ატრიბუტების მეშვეობით გადაცემისას. მაგალითად, გამოიყენეთ data-bs-custom-class="beautifier"ნაცვლად data-bs-customClass="beautifier".

როგორც Bootstrap 5.2.0, ყველა კომპონენტი მხარს უჭერს ექსპერიმენტულ რეზერვირებული მონაცემთა ატრიბუტს data-bs-config, რომელსაც შეუძლია მარტივი კომპონენტის კონფიგურაცია JSON სტრიქონის სახით. როდესაც ელემენტს აქვს data-bs-config='{"delay":0, "title":123}'და data-bs-title="456"ატრიბუტები, საბოლოო titleმნიშვნელობა იქნება 456და ცალკეული მონაცემთა ატრიბუტები გადალახავს მნიშვნელობებს, რომლებიც მოცემულია data-bs-config. გარდა ამისა, არსებულ მონაცემთა ატრიბუტებს შეუძლიათ JSON მნიშვნელობების შენახვა, როგორიცაა data-bs-delay='{"show":0,"hide":150}'.

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

მეთოდები

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

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

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

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

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

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

მეთოდი	აღწერა
`getInstance`	სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ offcanvas მაგალითი, რომელიც დაკავშირებულია DOM ელემენტთან.
`getOrCreateInstance`	სტატიკური მეთოდი, რომელიც საშუალებას გაძლევთ მიიღოთ offcanvas ეგზემპლარი, რომელიც დაკავშირებულია DOM ელემენტთან, ან შექმნათ ახალი, თუ ის არ იყო ინიციალიზებული.
`hide`	მალავს offcanvas ელემენტს. უბრუნდება აბონენტს offcanvas ელემენტის დამალვამდე (ანუ `hidden.bs.offcanvas`მოვლენის დაწყებამდე).
`show`	აჩვენებს offcanvas ელემენტს. უბრუნდება აბონენტს offcanvas ელემენტის რეალურად ჩვენებამდე (ანუ `shown.bs.offcanvas`მოვლენის დადგომამდე).
`toggle`	გადართავს offcanvas ელემენტს ჩვენებაზე ან დამალვაზე. უბრუნდება აბონენტს offcanvas ელემენტის რეალურად ჩვენებამდე ან დამალვამდე (ანუ, სანამ `shown.bs.offcanvas`ან `hidden.bs.offcanvas`მოვლენა მოხდება).

Ივენთი

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

ღონისძიების ტიპი	აღწერა
`hide.bs.offcanvas`	ეს ღონისძიება ჩართულია მაშინვე, როდესაც `hide`მეთოდი გამოიძახება.
`hidden.bs.offcanvas`	ეს ღონისძიება გააქტიურებულია, როდესაც offcanvas ელემენტი დამალულია მომხმარებლისგან (დაელოდება CSS გადასვლების დასრულებას).
`hidePrevented.bs.offcanvas`	ეს ღონისძიება ირთვება, როდესაც offcanvas გამოჩნდება, მისი ფონი არის `static`და offcanvas-ის გარეთ დაწკაპუნება შესრულდება. ღონისძიება ასევე ირთვება გაქცევის ღილაკზე დაჭერისას და `keyboard`პარამეტრის დაყენებისას `false`.
`show.bs.offcanvas`	ეს მოვლენა მაშინვე ირთვება, როდესაც `show`გამოიძახება ეგზემპლარის მეთოდი.
`shown.bs.offcanvas`	ეს ღონისძიება გააქტიურებულია, როდესაც offcanvas ელემენტი გახდება მომხმარებლისთვის ხილული (დაელოდება CSS გადასვლების დასრულებას).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

ტილო

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

მაგალითები

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

ტილო

ცოცხალი დემო

ტილო

სხეულის გადახვევა

ტილო ტანის გადახვევით

სხეულის გადახვევა და ფონი

ფონი გადახვევით

სტატიკური ფონი

ტილო

მუქი ტილო

ტილო

საპასუხო

საპასუხო ტილო

განთავსება

ტილოს ზედა

ტილოზე მარჯვნივ

ტილოზე ქვედა

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

CSS

ცვლადები

Sass ცვლადები

გამოყენება

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

გადართვა

გაუქმება

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

Პარამეტრები

მეთოდები

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

Ივენთი