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>

...

<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για εναλλαγή του φόντου.

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

......

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

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

Χρήση

Το πρόσθετο 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.

Απολύω

Η απόρριψη μπορεί να επιτευχθεί με το 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 δεν ταιριάζει με το μοτίβο σχεδίασης τροπικού διαλόγου WAI-ARIA . Κάντε αυτό με δική σας ευθύνη.

Μέσω 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 (δηλαδή πριν συμβεί το `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...
})

Εκτός καμβά

Πως δουλεύει

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

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

Εκτός καμβά

Ζωντανή επίδειξη

Εκτός καμβά

Τοποθέτηση

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

Offcanvas δεξιά

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

σκηνικό

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

Offcanvas με φόντο

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

Προσιτότητα

Sass

Μεταβλητές

Χρήση

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

Μεταβάλλω

Απολύω

Μέσω JavaScript

Επιλογές

Μέθοδοι

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

Εκδηλώσεις