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

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>

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.

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>

Scorrimento del corpo

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

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

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>

Scorrimento del corpo e sfondo

Puoi anche abilitare lo <body>scorrimento con uno sfondo visibile.

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

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>

Sfondo statico

Quando lo sfondo è impostato su statico, la tela non si chiude quando si fa clic al di fuori di essa.

Non chiuderò se fai clic fuori di me.

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>

Tela scura

Aggiunto nella v5.2.0

Modifica l'aspetto dei telai esterni con le utilità per adattarli meglio a contesti diversi come le barre di navigazione scure. Qui aggiungiamo .text-bg-darka .offcanvase .btn-close-whiteper .btn-closeuno styling corretto con una tela di canapa scura. Se hai dei menu a discesa all'interno, considera anche l'aggiunta .dropdown-menu-darka .dropdown-menu.

Inserisci qui i contenuti fuori tela.

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>

reattivo

Aggiunto nella v5.2.0

Le classi offcanvas reattive nascondono il contenuto all'esterno della finestra da un punto di interruzione specificato e verso il basso. Al di sopra di tale punto di interruzione, i contenuti all'interno si comporteranno come al solito. Ad esempio, .offcanvas-lgnasconde il contenuto in un'area secondaria al di sotto del punto di lginterruzione, ma mostra il contenuto al di sopra del punto di lginterruzione.

Ridimensiona il browser per mostrare l'interruttore offcanvas reattivo.

Questo è contenuto all'interno di un .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>

Le classi offcanvas reattive sono disponibili per ogni punto di interruzione.

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

Posizionamento

Non esiste un posizionamento predefinito per i componenti fuori tela, quindi devi aggiungere una delle classi di modificatori seguenti.

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

...

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>

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.

CSS

Variabili

Aggiunto nella v5.2.0

Come parte dell'approccio in evoluzione delle variabili CSS di Bootstrap, offcanvas ora utilizza le variabili CSS locali .offcanvasper una migliore personalizzazione in tempo reale. I valori per le variabili CSS vengono impostati tramite Sass, quindi anche la personalizzazione di Sass è ancora supportata.

  --#{$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};

variabili Sas

$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-topnasconde la tela sulla parte superiore
.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 parziale, tieni presente che l'eliminazione dall'esterno di una tela non corrisponde al modello di dialogo (modale) della Guida alle pratiche di creazione di ARIA . Fai questo a tuo rischio.

Tramite JavaScript

Abilita manualmente con:

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

Opzioni

Poiché le opzioni possono essere passate tramite attributi di dati o JavaScript, puoi aggiungere un nome di opzione a data-bs-, come in data-bs-animation="{value}". Assicurati di cambiare il tipo di caso del nome dell'opzione da " camelCase " a " kebab-case " quando passi le opzioni tramite attributi di dati. Ad esempio, utilizzare data-bs-custom-class="beautifier"invece di data-bs-customClass="beautifier".

A partire da Bootstrap 5.2.0, tutti i componenti supportano un attributo di dati riservato sperimentaledata-bs-config che può ospitare una semplice configurazione del componente come una stringa JSON. Quando un elemento ha data-bs-config='{"delay":0, "title":123}'e data-bs-title="456"attributi, il titlevalore finale sarà 456e gli attributi di dati separati sovrascriveranno i valori forniti su data-bs-config. Inoltre, gli attributi di dati esistenti sono in grado di ospitare valori JSON come data-bs-delay='{"show":0,"hide":150}'.

Nome	Tipo	Predefinito	Descrizione
`backdrop`	booleano o la stringa`static`	`true`	Applicare uno sfondo sul corpo mentre la tela è aperta. In alternativa, specifica `static`uno sfondo che non chiude la tela quando viene fatto clic.
`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:

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

Metodo	Descrizione
`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.
`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).
`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).
`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`).

Eventi

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

Tipo di evento	Descrizione
`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).
`hidePrevented.bs.offcanvas`	Questo evento viene attivato quando viene mostrato il fuori tela, il suo sfondo è `static`e viene eseguito un clic all'esterno del fuori tela. L'evento viene attivato anche quando viene premuto il tasto Esc e l' `keyboard`opzione è impostata su `false`.
`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).

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

Fuori tela

Come funziona

Esempi

Componenti fuori tela

Fuori tela

Dimostrazione dal vivo

Fuori tela

Scorrimento del corpo

Fuori tela con scorrimento del corpo

Scorrimento del corpo e sfondo

Sfondo con scorrimento

Sfondo statico

Fuori tela

Tela scura

Fuori tela

reattivo

Fuori tela reattivo

Posizionamento

Parte superiore in tela

Fuori tela a destra

Fondo in tela

Accessibilità

CSS

Variabili

variabili Sas

Utilizzo

Tramite attributi di dati

Attiva/disattiva

Congedare

Tramite JavaScript

Opzioni

Metodi

Metodi e transizioni asincrone

Eventi