Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
in English

Εκτός καμβά

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

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

Μπλουζάκι εκτός καμβά
... 
<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>
Offcanvas δεξιά
... 
<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>στοιχείου είναι απενεργοποιημένη όταν είναι ορατό ένας offcanvas και το φόντο του. Χρησιμοποιήστε το data-bs-scrollχαρακτηριστικό για εναλλαγή της <body>κύλισης και data-bs-backdropγια εναλλαγή του φόντου.

Χρωματισμένο με κύλιση

Δοκιμάστε να κάνετε κύλιση στην υπόλοιπη σελίδα για να δείτε αυτήν την επιλογή σε δράση.

Offcanvas με φόντο

......

Φόντο με κύλιση

Δοκιμάστε να κάνετε κύλιση στην υπόλοιπη σελίδα για να δείτε αυτήν την επιλογή σε δράση.

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

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 χρησιμοποιεί μερικές κλάσεις και χαρακτηριστικά για να χειριστεί τη βαριά ανύψωση:

  • .offcanvasκρύβει το περιεχόμενο
  • .offcanvas.showδείχνει το περιεχόμενο
  • .offcanvas-startκρύβει το offcanvas στα αριστερά
  • .offcanvas-endκρύβει το 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.

Μέσω 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 boolean true Εφαρμόστε ένα σκηνικό στο σώμα ενώ το offcanvas είναι ανοιχτό
keyboard boolean true Κλείνει το offcanvas όταν πατηθεί το πλήκτρο escape
scroll boolean false Επιτρέψτε την κύλιση σώματος ενώ το offcanvas είναι ανοιχτό

Μέθοδοι

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

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

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

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

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

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

Εκδηλώσεις

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