Saltu al ĉefa enhavo Saltu al navigado de dokumentoj
Check
in English

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 flankbreto komponanto, kiu povas esti ŝanĝita per JavaScript por aperi de la maldekstra, dekstre, supra 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.

Eksterkanvaso
Enhavo por la eksterkanvaso iras ĉi tie. Vi povas meti ĉi tie preskaŭ ajnan Bootstrap-komponenton aŭ kutimajn elementojn.
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>

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
Eksterkanvaso
Iu teksto kiel anstataŭilo. En la reala vivo vi povas havi la elementojn, kiujn vi elektis. Kiel, teksto, bildoj, listoj, ktp.
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>

Korpa movo

Rulumado de la <body>elemento estas malŝaltita kiam eksterkanvaso kaj ĝia fono estas videblaj. Uzu la data-bs-scrollatributon por ebligi <body>ruladon.

Eksterkanvaso kun korpa movo

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

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>

Korpa movo kaj fono

Vi ankaŭ povas ebligi <body>movadon kun videbla fono.

Fono kun movo

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

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>

Senmova fono

Kiam fono estas fiksita al senmova, la eksterkanvaso ne fermiĝos kiam oni klakas ekster ĝi.

Eksterkanvaso
Mi ne fermos se vi klakas ekster mi.
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>

Malhela eksterkanvaso

Aldonita en v5.2.0

Ŝanĝu la aspekton de eksterkanvasoj per utilecoj por pli bone kongrui ilin al malsamaj kuntekstoj kiel malhelaj navbaroj. Ĉi tie ni aldonas .text-bg-darkal la .offcanvaskaj .btn-close-whiteal .btn-closepor taŭga stilo kun malhela ekstertolo. Se vi havas falmenuojn ene, konsideru ankaŭ aldoni .dropdown-menu-darkal .dropdown-menu.

Eksterkanvaso

Metu eksterkanvasan enhavon ĉi tie.

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>

Respondema

Aldonita en v5.2.0

Respondema eksterkanvasaj klasoj kaŝas enhavon ekster la vidfenestro de difinita rompopunkto kaj malsupren. Super tiu rompopunkto, la enhavo ene kondutos kiel kutime. Ekzemple, .offcanvas-lgkaŝas enhavon en eksterkanvaso sub la lgrompopunkto, sed montras la enhavon super la lgrompopunkto.

Regrandigu vian retumilon por montri la respondeman offcanvas baskulon.
Respondema eksterkanvaso

Ĉi tio estas enhavo ene de .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>

Respondema eksterkanvasaj klasoj estas disponeblaj laŭlonge por ĉiu rompopunkto.

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

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.

Eksterkanvasa supro
...
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>
Eksterkanvas dekstre
...
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>
Eksterkanvasa fundo
...
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>

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.

CSS

Variabloj

Aldonita en v5.2.0

Kiel parto de la aliro de evoluantaj CSS-variabloj de Bootstrap, offcanvas nun uzas lokajn CSS .offcanvas-variablojn por plibonigita realtempa personigo. Valoroj por la CSS-variabloj estas fiksitaj per Sass, do ankaŭ Sass-adaptigo ankoraŭ estas subtenata.

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

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

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-topkaŝas la ekstertolon sur la supro
  • .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

Baskuligi

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.

Forĵeti

Malakcepto povas esti atingita per la dataatributo sur butono ene de la eksterkanvaso kiel montrite sube:

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

aŭ sur butono ekster la eksterkanvaso uzante la data-bs-targetkiel montrite sube:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Dum ambaŭ manieroj forĵeti eksterkanvason estas subtenataj, memoru, ke forĵeti eksterkanvason ne kongruas kun la dialogo (modala) ŝablono de ARIA Aŭtoring Practices Guide . Faru tion je via propra risko.

Per JavaScript

Ebligu permane per:

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

Opcioj

Ĉar opcioj povas esti pasigitaj per datumaj atributoj aŭ JavaScript, vi povas almeti opcionomon al data-bs-, kiel en data-bs-animation="{value}". Nepre ŝanĝu la kazon de la opcionomo de " camelCase " al " kebab-case " kiam vi pasas la opciojn per datumaj atributoj. Ekzemple, uzu data-bs-custom-class="beautifier"anstataŭ data-bs-customClass="beautifier".

Ekde Bootstrap 5.2.0, ĉiuj komponantoj subtenas eksperimentan rezervitan datuman atributon data-bs-config, kiu povas enhavi simplan komponan agordon kiel JSON-ĉeno. Kiam elemento havas data-bs-config='{"delay":0, "title":123}'kaj data-bs-title="456"atributojn, la fina titlevaloro estos 456kaj la apartaj datumaj atributoj anstataŭigos valorojn donitajn sur data-bs-config. Krome, ekzistantaj datumaj atributoj povas enhavi JSON-valorojn kiel data-bs-delay='{"show":0,"hide":150}'.

Nomo Tajpu Defaŭlte Priskribo
backdrop bulea aŭ la ĉenostatic true Apliki fonon sur korpo dum ekstertolo estas malfermita. Alternative, specifu staticpor fono, kiu ne fermas la eksterkanvason kiam oni alklakas.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Metodo Priskribo
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.
hide Kaŝas eksterkanvasan elementon. Revenas al la alvokanto antaŭ ol la offcanvas-elemento efektive estis kaŝita (te antaŭ ol la hidden.bs.offcanvasevento okazas).
show Montras eksterkanvasan elementon. Revenas al la alvokanto antaŭ ol la offcanvas-elemento efektive estis montrita (te antaŭ ol la shown.bs.offcanvasevento okazas).
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.offcanvasevento hidden.bs.offcanvasokazas).

Eventoj

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

Eventa tipo Priskribo
hide.bs.offcanvas Ĉi tiu evento estas lanĉita tuj kiam la hidemetodo 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).
hidePrevented.bs.offcanvas Ĉi tiu evento estas lanĉita kiam la eksterkanvaso estas montrita, ĝia fono estas statickaj klako ekster la eksterkanvaso estas farita. La okazaĵo ankaŭ estas pafita kiam la eskapoklavo estas premata kaj la keyboardopcio estas agordita al false.
show.bs.offcanvas Ĉi tiu evento tuj ekfunkciigas kiam la showekzempla 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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})