Eksterkanvaso

Konstruu kaŝitajn flankbretojn en vian projekton por navigado, aĉetĉaroj kaj pli kun kelkaj klasoj kaj nia JavaScript-kromaĵo.

Sur ĉi tiu paĝo

Kiel ĝi funkcias

Offcanvas estas flankmenuo komponanto, kiu povas esti ŝanĝita per JavaScript por aperi de la maldekstra, dekstre aŭ malsupra rando de la vidfenestro. Butonoj aŭ ankroj estas uzataj kiel ellasiloj, kiuj estas ligitaj al specifaj elementoj, kiujn vi ŝanĝas, kaj dataatributoj estas uzataj por alvoki nian JavaScript.

Offcanvas dividas iujn el la sama JavaScript-kodo kiel modaloj. Koncipe, ili estas sufiĉe similaj, sed ili estas apartaj kromprogramoj.
Simile, kelkaj fontaj Sass -variabloj por la stiloj kaj dimensioj de offcanvas estas hereditaj de la variabloj de la modalo.
Kiam montrita, eksterkanvaso inkluzivas defaŭltan fonon, kiun oni povas klaki por kaŝi la eksterkanvason.
Simile al modaloj, nur unu eksterkanvaso povas esti montrita samtempe.

Atentu! Konsiderante kiel CSS pritraktas animaciojn, vi ne povas uzi marginaŭ translatesur .offcanvaselemento. Anstataŭe, uzu la klason kiel sendependan envolvan elementon.

La animacia efiko de ĉi tiu komponanto dependas de la prefers-reduced-motionamaskomunikila demando. Vidu la sekcion pri reduktita moviĝo de nia dokumentaro pri alirebleco .

Ekzemploj

Offcanvas-komponantoj

Malsupre estas eksterkanvasa ekzemplo, kiu montriĝas defaŭlte (per .showsur .offcanvas). Offcanvas inkluzivas subtenon por kaplinio kun fermbutono kaj laŭvola korpoklaso por iu komenca padding. Ni sugestas ke vi enmetu eksterkanvasajn kapliniojn kun malakceptaj agoj kiam ajn eblas, aŭ disponigu eksplicitan forĵetan agon.

Enhavo por la eksterkanvaso iras ĉi tie. Vi povas meti ĉi tie preskaŭ ajnan Bootstrap-komponenton aŭ kutimajn elementojn.

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

Viva demonstraĵo

Uzu la subajn butonojn por montri kaj kaŝi eksterkanvasan elementon per JavaScript, kiu ŝanĝas la .showklason al elemento kun la .offcanvasklaso.

.offcanvaskaŝas enhavon (defaŭlte)
.offcanvas.showmontras enhavon

Vi povas uzi ligilon kun la hrefatributo, aŭ butonon kun la data-bs-targetatributo. En ambaŭ kazoj, la data-bs-toggle="offcanvas"estas postulata.

Ligo kun href

Iu teksto kiel anstataŭilo. En la reala vivo vi povas havi la elementojn, kiujn vi elektis. Kiel, teksto, bildoj, listoj, ktp.

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

Lokigo

Ne ekzistas defaŭlta lokigo por eksterkanvasaj komponantoj, do vi devas aldoni unu el la modifklasoj sube;

.offcanvas-startmetas eksterkanvason maldekstre de la vidfenestro (montrita supre)
.offcanvas-endmetas eksterkanvason dekstre de la vidfenestro
.offcanvas-topmetas ekstertolon sur la supro de la vidfenestro
.offcanvas-bottommetas eksterkanvason sur la fundon de la vidfenestro

Provu la suprajn, dekstrejn kaj malsuprajn ekzemplojn sube.

...

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

Fono

Rulumado de la <body>elemento estas malŝaltita kiam eksterkanvaso kaj ĝia fono estas videblaj. Uzu la data-bs-scrollatributon por ŝanĝi <body>movadadon kaj data-bs-backdroppor ŝanĝi la fonon.

Provu rulumi la reston de la paĝo por vidi ĉi tiun opcion en ago.

.....

Provu rulumi la reston de la paĝo por vidi ĉi tiun opcion en ago.

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

Alirebleco

Ĉar la eksterkanvasa panelo estas koncipe modala dialogo, nepre aldonu aria-labelledby="..."—referencante la eksterkanvasan titolon— al .offcanvas. Notu, ke vi ne bezonas aldoni role="dialog"ĉar ni jam aldonas ĝin per JavaScript.

Sass

Variabloj

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

Uzado

La offcanvas kromaĵo uzas kelkajn klasojn kaj atributojn por trakti la pezan ŝarĝon:

.offcanvaskaŝas la enhavon
.offcanvas.showmontras la enhavon
.offcanvas-startkaŝas la eksterkanvason maldekstre
.offcanvas-endkaŝas la eksterkanvason dekstre
.offcanvas-bottomkaŝas la ekstertolon sur la fundo

Aldonu forĵeti butonon kun la data-bs-dismiss="offcanvas"atributo, kiu ekigas la JavaScript-funkcion. Nepre uzu la <button>elementon kun ĝi por taŭga konduto tra ĉiuj aparatoj.

Per datumaj atributoj

Aldonu data-bs-toggle="offcanvas"kaj a data-bs-targetaŭ hrefal la elemento por aŭtomate atribui kontrolon de unu eksterkanvasa elemento. La data-bs-targetatributo akceptas CSS-elektilon al kiu apliki la eksterkanvason. Nepre aldonu la klason offcanvasal la elemento offcanvas. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klason show.

Per JavaScript

Ebligu permane per:

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

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-bs-, kiel en data-bs-backdrop="".

Nomo	Tajpu	Defaŭlte	Priskribo
`backdrop`	bulea	`true`	Apliki fonon sur korpo dum ekstertolo estas malfermita
`keyboard`	bulea	`true`	Fermas la eksterkanvason kiam eskapa klavo estas premata
`scroll`	bulea	`false`	Permesu korpan movadon dum eksterkanvaso estas malfermita

Metodoj

Nesinkronaj metodoj kaj transiroj

Ĉiuj API-metodoj estas nesinkronaj kaj komencas transiron . Ili revenas al la alvokanto tuj kiam la transiro estas komencita sed antaŭ ol ĝi finiĝas . Krome, metodovoko sur transira komponento estos ignorita .

Vidu nian JavaScript-dokumentaron por pliaj informoj .

Aktivigas vian enhavon kiel eksterkanvasa elemento. Akceptas laŭvolajn opciojn object.

Vi povas krei eksterkanvasan ekzemplon per la konstrukciisto, ekzemple:

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

Metodo	Priskribo
`toggle`	Ŝaltas eksterkanvasan elementon al montrita aŭ kaŝita. Revenas al la alvokanto antaŭ ol la offcanvas-elemento efektive estis montrita aŭ kaŝita (te antaŭ ol la `shown.bs.offcanvas`evento `hidden.bs.offcanvas`okazas).
`show`	Montras eksterkanvasan elementon. Revenas al la alvokanto antaŭ ol la offcanvas-elemento efektive estis montrita (te antaŭ ol la `shown.bs.offcanvas`evento okazas).
`hide`	Kaŝas eksterkanvasan elementon. Revenas al la alvokanto antaŭ ol la offcanvas-elemento efektive estis kaŝita (te antaŭ ol la `hidden.bs.offcanvas`evento okazas).
`getInstance`	Statika metodo, kiu ebligas al vi akiri la eksterkanvasan ekzemplon asociitan kun DOM-elemento
`getOrCreateInstance`	Senmova metodo kiu ebligas al vi akiri la eksterkanvasan ekzemplon asociitan kun DOM-elemento, aŭ krei novan se ĝi ne estis pravigita

Eventoj

La eksterkanvasa klaso de Bootstrap elmontras kelkajn eventojn por enkroĉi al offcanvas-funkcio.

Eventa tipo	Priskribo
`show.bs.offcanvas`	Ĉi tiu evento tuj ekfunkciigas kiam la `show`ekzempla metodo estas vokita.
`shown.bs.offcanvas`	Ĉi tiu evento estas lanĉita kiam eksterkanvasa elemento fariĝis videbla por la uzanto (atendos ke CSS-transiroj finiĝos).
`hide.bs.offcanvas`	Ĉi tiu evento estas lanĉita tuj kiam la `hide`metodo estas vokita.
`hidden.bs.offcanvas`	Ĉi tiu evento estas lanĉita kiam eksterkanvasa elemento estis kaŝita de la uzanto (atendos ke CSS-transiroj finiĝos).

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

Eksterkanvaso

Kiel ĝi funkcias

Ekzemploj

Offcanvas-komponantoj

Eksterkanvaso

Viva demonstraĵo

Eksterkanvaso

Lokigo

Eksterkanvasa supro

Eksterkanvas dekstre

Eksterkanvasa fundo

Fono

Kolorita kun movo

Eksterkanvaso kun fono

Fone kun movo

Alirebleco

Sass

Variabloj

Uzado

Per datumaj atributoj

Per JavaScript

Opcioj

Metodoj

Nesinkronaj metodoj kaj transiroj

Eventoj