Fuori tela

Crea barre laterali nascoste nel tuo progetto per la navigazione, i carrelli della spesa e altro ancora con alcune classi e il nostro plug-in JavaScript.

Su questa pagina

Come funziona

Offcanvas è un componente della barra laterale che può essere attivato tramite JavaScript in modo che appaia dal bordo sinistro, destro o inferiore della finestra. I pulsanti o gli ancoraggi vengono utilizzati come trigger collegati a elementi specifici che si attivano e datagli attributi vengono utilizzati per richiamare il nostro JavaScript.

Offcanvas condivide parte dello stesso codice JavaScript di modali. Concettualmente, sono abbastanza simili, ma sono plugin separati.
Allo stesso modo, alcune variabili Sass di origine per gli stili e le dimensioni di offcanvas vengono ereditate dalle variabili del modale.
Quando viene mostrato, offcanvas include uno sfondo predefinito su cui è possibile fare clic per nascondere il offcanvas.
Simile alle modali, è possibile mostrare solo una tela alla volta.

Dritta! Dato il modo in cui CSS gestisce le animazioni, non puoi usare margino translatesu un .offcanvaselemento. Utilizzare invece la classe come elemento di avvolgimento indipendente.

L'effetto di animazione di questo componente dipende dalla prefers-reduced-motionmedia query. Vedi la sezione movimento ridotto della nostra documentazione sull'accessibilità .

Esempi

Componenti fuori tela

Di seguito è riportato un esempio offcanvas che viene mostrato per impostazione predefinita (tramite .showon .offcanvas). Offcanvas include il supporto per un'intestazione con un pulsante di chiusura e una classe body opzionale per alcuni iniziali padding. Ti suggeriamo di includere le intestazioni offcanvas con azioni di eliminazione quando possibile o di fornire un'azione di eliminazione esplicita.

Il contenuto per l'offcanvas va qui. Puoi posizionare praticamente qualsiasi componente Bootstrap o elementi personalizzati qui.

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

Dimostrazione dal vivo

Usa i pulsanti sottostanti per mostrare e nascondere un elemento offcanvas tramite JavaScript che alterna la .showclasse su un elemento con la .offcanvasclasse.

.offcanvasnasconde il contenuto (predefinito)
.offcanvas.showmostra il contenuto

È possibile utilizzare un collegamento con l' hrefattributo o un pulsante con l' data-bs-targetattributo. In entrambi i casi data-bs-toggle="offcanvas"è richiesto.

Collegamento con href

Del testo come segnaposto. Nella vita reale puoi avere gli elementi che hai scelto. Come, testo, immagini, elenchi, ecc.

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

Posizionamento

Non esiste un posizionamento predefinito per i componenti fuori tela, quindi è necessario aggiungere una delle classi di modifica di seguito;

.offcanvas-startposiziona fuori tela a sinistra del viewport (mostrato sopra)
.offcanvas-endposiziona fuori tela a destra del viewport
.offcanvas-topposiziona fuori tela nella parte superiore del viewport
.offcanvas-bottomposiziona fuori tela nella parte inferiore della finestra

Prova gli esempi in alto, a destra e in basso di seguito.

...

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

Sfondo

Lo scorrimento <body>dell'elemento è disabilitato quando sono visibili una tela e il relativo sfondo. Utilizzare l' data-bs-scrollattributo per attivare lo <body>scorrimento e data-bs-backdropper attivare lo sfondo.

Prova a scorrere il resto della pagina per vedere questa opzione in azione.

.....

Prova a scorrere il resto della pagina per vedere questa opzione in azione.

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

Accessibilità

Poiché il pannello fuori tela è concettualmente una finestra di dialogo modale, assicurati di aggiungere aria-labelledby="...", facendo riferimento al titolo fuori tela, a .offcanvas. Nota che non è necessario aggiungere role="dialog"poiché lo aggiungiamo già tramite JavaScript.

Sass

Variabili

$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;

Utilizzo

Il plug-in offcanvas utilizza alcune classi e attributi per gestire il sollevamento di carichi pesanti:

.offcanvasnasconde il contenuto
.offcanvas.showmostra il contenuto
.offcanvas-startnasconde la tela a sinistra
.offcanvas-endnasconde il fuori tela a destra
.offcanvas-bottomnasconde la tela sul fondo

Aggiungi un pulsante Ignora con l' data-bs-dismiss="offcanvas"attributo, che attiva la funzionalità JavaScript. Assicurati di utilizzare l' <button>elemento con esso per un comportamento corretto su tutti i dispositivi.

Tramite attributi di dati

Attiva/disattiva

Aggiungi data-bs-toggle="offcanvas"e a data-bs-targeto hrefall'elemento per assegnare automaticamente il controllo di un elemento fuori tela. L' data-bs-targetattributo accetta un selettore CSS a cui applicare l'offcanvas. Assicurati di aggiungere la classe offcanvasall'elemento offcanvas. Se desideri che sia aperto di default, aggiungi la classe aggiuntiva show.

Congedare

Il licenziamento può essere ottenuto con l' dataattributo su un pulsante all'interno dell'offcanvas come mostrato di seguito:

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

o su un pulsante fuori tela usando il data-bs-targetcome mostrato di seguito:

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

Sebbene siano supportati entrambi i modi per eliminare un'area di tela, tieni presente che l'eliminazione dall'esterno di una tela non corrisponde al modello di progettazione della finestra di dialogo modale WAI-ARIA . Fai questo a tuo rischio.

Tramite JavaScript

Abilita manualmente con:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Opzioni

Le opzioni possono essere passate tramite attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome dell'opzione a data-bs-, come in data-bs-backdrop="".

Nome	Tipo	Predefinito	Descrizione
`backdrop`	booleano	`true`	Applicare uno sfondo sul corpo mentre la tela è aperta
`keyboard`	booleano	`true`	Chiude l'offcanvas quando viene premuto il tasto Esc
`scroll`	booleano	`false`	Consenti lo scorrimento del corpo mentre Offcanvas è aperto

Metodi

Metodi e transizioni asincrone

Tutti i metodi API sono asincroni e avviano una transizione . Ritornano al chiamante non appena la transizione è iniziata ma prima che termini . Inoltre, una chiamata al metodo su un componente in transizione verrà ignorata .

Consulta la nostra documentazione JavaScript per ulteriori informazioni .

Attiva il tuo contenuto come elemento offcanvas. Accetta opzioni opzionali object.

Puoi creare un'istanza offcanvas con il costruttore, ad esempio:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Metodo	Descrizione
`toggle`	Attiva o disattiva un elemento fuori tela da mostrare o nascondere. Ritorna al chiamante prima che l'elemento offcanvas sia stato effettivamente mostrato o nascosto (cioè prima che si verifichi l' evento `shown.bs.offcanvas`o `hidden.bs.offcanvas`).
`show`	Mostra un elemento fuori tela. Ritorna al chiamante prima che l'elemento offcanvas sia stato effettivamente mostrato (cioè prima `shown.bs.offcanvas`che si verifichi l'evento).
`hide`	Nasconde un elemento fuori tela. Ritorna al chiamante prima che l'elemento offcanvas sia stato effettivamente nascosto (cioè prima `hidden.bs.offcanvas`che si verifichi l'evento).
`getInstance`	Metodo statico che consente di ottenere l'istanza offcanvas associata a un elemento DOM
`getOrCreateInstance`	Metodo statico che ti consente di ottenere l'istanza offcanvas associata a un elemento DOM o di crearne una nuova nel caso non sia stata inizializzata

Eventi

La classe offcanvas di Bootstrap espone alcuni eventi per l'aggancio alla funzionalità offcanvas.

Tipo di evento	Descrizione
`show.bs.offcanvas`	Questo evento viene attivato immediatamente quando `show`viene chiamato il metodo dell'istanza.
`shown.bs.offcanvas`	Questo evento viene attivato quando un elemento offcanvas è stato reso visibile all'utente (attenderà il completamento delle transizioni CSS).
`hide.bs.offcanvas`	Questo evento viene generato immediatamente quando il `hide`metodo è stato chiamato.
`hidden.bs.offcanvas`	Questo evento viene attivato quando un elemento offcanvas è stato nascosto all'utente (attenderà il completamento delle transizioni CSS).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Fuori tela

Come funziona

Esempi

Componenti fuori tela

Fuori tela

Dimostrazione dal vivo

Fuori tela

Posizionamento

Parte superiore in tela

Fuori tela a destra

Fondo in tela

Sfondo

Colorato con scorrimento

Offcanvas con fondale

Sfondo con scorrimento

Accessibilità

Sass

Variabili

Utilizzo

Tramite attributi di dati

Attiva/disattiva

Congedare

Tramite JavaScript

Opzioni

Metodi

Metodi e transizioni asincrone

Eventi