Εκτός καμβά

Δημιουργήστε κρυφές πλαϊνές γραμμές στο έργο σας για πλοήγηση, καλάθια αγορών και πολλά άλλα με μερικές κατηγορίες και την προσθήκη JavaScript.

Σε αυτήν την σελίδα

Πως δουλεύει

Το Offcanvas είναι ένα στοιχείο πλαϊνής γραμμής που μπορεί να εναλλάσσεται μέσω JavaScript για να εμφανίζεται από την αριστερή, τη δεξιά, την επάνω ή την κάτω άκρη της θύρας προβολής. Τα κουμπιά ή οι άγκυρες χρησιμοποιούνται ως ενεργοποιητές που συνδέονται με συγκεκριμένα στοιχεία που κάνετε εναλλαγή και dataτα χαρακτηριστικά χρησιμοποιούνται για την κλήση της JavaScript μας.

Το Offcanvas μοιράζεται μερικούς από τον ίδιο κώδικα JavaScript με τα modals. Εννοιολογικά, είναι αρκετά παρόμοια, αλλά είναι ξεχωριστά πρόσθετα.
Ομοίως, ορισμένες μεταβλητές Sass πηγής για τα στυλ και τις διαστάσεις του offcanvas κληρονομούνται από τις μεταβλητές του modal.
Όταν εμφανίζεται, το offcanvas περιλαμβάνει ένα προεπιλεγμένο σκηνικό στο οποίο μπορείτε να κάνετε κλικ για να αποκρύψετε το offcanvas.
Παρόμοια με τα modals, μόνο ένας offcanvas μπορεί να εμφανίζεται κάθε φορά.

Ψηλά το κεφάλι! Δεδομένου του τρόπου με τον οποίο το CSS χειρίζεται κινούμενα σχέδια, δεν μπορείτε να χρησιμοποιήσετε marginή translateσε ένα .offcanvasστοιχείο. Αντίθετα, χρησιμοποιήστε την κλάση ως ανεξάρτητο στοιχείο αναδίπλωσης.

Το εφέ κίνησης αυτού του στοιχείου εξαρτάται από το prefers-reduced-motionερώτημα πολυμέσων. Δείτε την ενότητα μειωμένης κίνησης της τεκμηρίωσης προσβασιμότητας .

Παραδείγματα

Εξαρτήματα εκτός καμβά

Παρακάτω είναι ένα παράδειγμα 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>στοιχείου είναι απενεργοποιημένη όταν είναι ορατό ένας offcanvas και το φόντο του. Χρησιμοποιήστε το 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>

Στατικό σκηνικό

Όταν το Backdrop έχει οριστεί σε στατικό, ο 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>

Σκούρο offcanvas

Προστέθηκε στην έκδοση 5.2.0

Αλλάξτε την εμφάνιση των offcanvases με βοηθητικά προγράμματα για να τα ταιριάξετε καλύτερα σε διαφορετικά περιβάλλοντα, όπως σκοτεινές γραμμές πλοήγησης. Εδώ προσθέτουμε .text-bg-darkστο .offcanvasκαι .btn-close-whiteστο .btn-closeγια σωστό styling με σκούρο offcanvas. Εάν έχετε αναπτυσσόμενα μενού μέσα, σκεφτείτε επίσης να προσθέσετε .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>

Ευαίσθητος

Προστέθηκε στην έκδοση 5.2.0

Οι αποκριτικές κλάσεις offcanvas αποκρύπτουν περιεχόμενο εκτός της θύρας προβολής από ένα καθορισμένο σημείο διακοπής και προς τα κάτω. Πάνω από αυτό το σημείο διακοπής, τα περιεχόμενα εντός θα συμπεριφέρονται ως συνήθως. Για παράδειγμα, .offcanvas-lgαποκρύπτει περιεχόμενο σε έναν εκτός καμβά κάτω από το 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 στα αριστερά της θύρας προβολής (εμφανίζεται παραπάνω)
.offcanvas-endτοποθετεί offcanvas στα δεξιά της θύρας προβολής
.offcanvas-topτοποθετεί το offcanvas στο επάνω μέρος της θύρας προβολής
.offcanvas-bottomτοποθετεί offcanvas στο κάτω μέρος της θύρας προβολής

Δοκιμάστε τα παραδείγματα πάνω, δεξιά και κάτω παρακάτω.

...

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

Μεταβλητές

Προστέθηκε στην έκδοση 5.2.0

Ως μέρος της εξελισσόμενης προσέγγισης μεταβλητών CSS του Bootstrap, το 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 στα αριστερά
.offcanvas-endκρύβει το offcanvas στα δεξιά
.offcanvas-topκρύβει το offcanvas στην κορυφή
.offcanvas-bottomκρύβει το offcanvas στο κάτω μέρος

Προσθέστε ένα κουμπί απόρριψης με το data-bs-dismiss="offcanvas"χαρακτηριστικό, το οποίο ενεργοποιεί τη λειτουργία JavaScript. Φροντίστε να χρησιμοποιήσετε το <button>στοιχείο μαζί του για σωστή συμπεριφορά σε όλες τις συσκευές.

Μέσω χαρακτηριστικών δεδομένων

Μεταβάλλω

Προσθέστε data-bs-toggle="offcanvas"και ένα data-bs-targetή hrefστο στοιχείο για να εκχωρήσετε αυτόματα τον έλεγχο ενός στοιχείου offcanvas. Το data-bs-targetχαρακτηριστικό δέχεται έναν επιλογέα CSS για εφαρμογή του offcanvas. Φροντίστε να προσθέσετε την κλάση offcanvasστο στοιχείο offcanvas. Εάν θέλετε να είναι ανοιχτό από προεπιλογή, προσθέστε την πρόσθετη κλάση 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 δεν ταιριάζει με το μοτίβο διαλόγου (modal) του οδηγού πρακτικών συγγραφής 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`	boolean ή η συμβολοσειρά`static`	`true`	Εφαρμόστε ένα σκηνικό στο σώμα ενώ το offcanvas είναι ανοιχτό. Εναλλακτικά, καθορίστε `static`ένα σκηνικό που δεν κλείνει το offcanvas όταν γίνεται κλικ.
`keyboard`	boolean	`true`	Κλείνει το offcanvas όταν πατηθεί το πλήκτρο escape.
`scroll`	boolean	`false`	Επιτρέψτε την κύλιση σώματος ενώ το offcanvas είναι ανοιχτό.

Μέθοδοι

Ασύγχρονες μέθοδοι και μεταβάσεις

Όλες οι μέθοδοι API είναι ασύγχρονες και ξεκινούν μια μετάβαση . Επιστρέφουν στον καλούντα μόλις ξεκινήσει η μετάβαση αλλά πριν τελειώσει . Επιπλέον, μια κλήση μεθόδου σε ένα στοιχείο μετάβασης θα αγνοηθεί .

Δείτε την τεκμηρίωση JavaScript για περισσότερες πληροφορίες .

Ενεργοποιεί το περιεχόμενό σας ως στοιχείο offcanvas. Αποδέχεται μια προαιρετική επιλογή object.

Μπορείτε να δημιουργήσετε μια παρουσία offcanvas με τον κατασκευαστή, για παράδειγμα:

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

Μέθοδος	Περιγραφή
`getInstance`	Στατική μέθοδος που σας επιτρέπει να λάβετε την παρουσία offcanvas που σχετίζεται με ένα στοιχείο DOM.
`getOrCreateInstance`	Στατική μέθοδος που σας επιτρέπει να λάβετε την παρουσία offcanvas που σχετίζεται με ένα στοιχείο DOM ή να δημιουργήσετε μια νέα σε περίπτωση που δεν είχε αρχικοποιηθεί.
`hide`	Κρύβει ένα στοιχείο εκτός καμβά. Επιστρέφει στον καλούντα πριν από την πραγματική απόκρυψη του στοιχείου offcanvas (δηλαδή πριν συμβεί το `hidden.bs.offcanvas`συμβάν).
`show`	Εμφανίζει ένα στοιχείο offcanvas. Επιστρέφει στον καλούντα πριν εμφανιστεί πραγματικά το στοιχείο offcanvas (δηλαδή πριν συμβεί το `shown.bs.offcanvas`συμβάν).
`toggle`	Εναλλάσσει ένα στοιχείο εκτός καμβά σε εμφάνιση ή απόκρυψη. Επιστρέφει στον καλούντα πριν εμφανιστεί ή κρυφτεί το στοιχείο offcanvas (δηλαδή πριν συμβεί το `shown.bs.offcanvas`ή το `hidden.bs.offcanvas`συμβάν).

Εκδηλώσεις

Η κλάση offcanvas του Bootstrap εκθέτει μερικά συμβάντα για σύνδεση στη λειτουργικότητα 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

Εκτός καμβά

Ευαίσθητος

Απόκριση εκτός καμβά

Τοποθέτηση

Μπλουζάκι εκτός καμβά

Offcanvas δεξιά

Κάτω από καμβά

Προσιτότητα

CSS

Μεταβλητές

Μεταβλητές Sass

Χρήση

Μέσω χαρακτηριστικών δεδομένων

Μεταβάλλω

Απολύω

Μέσω JavaScript

Επιλογές

Μέθοδοι

Ασύγχρονες μέθοδοι και μεταβάσεις

Εκδηλώσεις