Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
in English

Offcanvas

Tsim cov sidebars zais rau hauv koj qhov project rau navigation, lub tawb nqa khoom, thiab ntau ntxiv nrog ob peb chav kawm thiab peb JavaScript plugin.

Ntawm nplooj ntawv no

Nws ua haujlwm li cas

Offcanvas yog ib qho sidebar tivthaiv uas tuaj yeem toggled ntawm JavaScript kom tshwm los ntawm sab laug, sab xis, lossis hauv qab ntug ntawm qhov chaw saib. Cov nyees khawm lossis cov thauj tog rau nkoj yog siv los ua cov cim uas txuas rau cov ntsiab lus tshwj xeeb uas koj hloov mus, thiab datacov cwj pwm yog siv los hu peb JavaScript.

  • Offcanvas qhia qee yam ntawm tib JavaScript code li modals. Conceptually, lawv zoo sib xws, tab sis lawv yog cais plugins.
  • Ib yam li ntawd, qee qhov Sass hloov pauv rau offcanvas cov qauv thiab qhov ntev yog tau txais los ntawm cov qauv hloov pauv.
  • Thaum pom, offcanvas suav nrog lub neej ntawd keeb kwm yav dhau uas tuaj yeem raug nyem los nkaum lub offcanvas.
  • Zoo ib yam li modals, tsuas yog ib qho offcanvas tuaj yeem pom ib zaug.

Tau taub hau! Muab CSS ua haujlwm li cas rau cov animations, koj siv tsis tau marginlossis translatentawm ib .offcanvaslub ntsiab lus. Hloov chaw, siv cov chav kawm ua ib qho kev nthuav dav ntawm cov ntaub qhwv.

Cov nyhuv animation ntawm cov khoom siv no yog nyob ntawm cov prefers-reduced-motionlus nug xov xwm. Saib qhov txo qis ntawm peb cov ntaub ntawv nkag mus tau .

Piv txwv

Offcanvas Cheebtsam

Hauv qab no yog ib qho piv txwv offcanvas uas tau qhia los ntawm lub neej ntawd (ntawm .showntawm .offcanvas). Offcanvas suav nrog kev txhawb nqa rau lub taub hau nrog lub pob kaw thiab ib qho kev xaiv lub cev rau qee qhov pib padding. Peb xav kom koj suav nrog offcanvas headers nrog tso tawm qhov kev txiav txim thaum twg los tau, los yog muab ib qho kev txiav txim tso tseg.

Offcanvas
Cov ntsiab lus rau offcanvas mus ntawm no. Koj tuaj yeem tso ib qho ntawm Bootstrap tivthaiv lossis cov ntsiab lus kev cai ntawm no. 
<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>

Nyob demo

Siv cov nyees khawm hauv qab no los qhia thiab zais ib qho offcanvas keeb ntawm JavaScript uas toggles .showchav kawm ntawm ib lub caij nrog .offcanvaschav kawm.

  • .offcanvashides cov ntsiab lus (default)
  • .offcanvas.showqhia cov ntsiab lus

Koj tuaj yeem siv qhov txuas nrog tus hrefcwj pwm, lossis khawm nrog tus data-bs-targetcwj pwm. Hauv ob qho xwm txheej, qhov data-bs-toggle="offcanvas"yuav tsum tau ua.

Txuas nrog href
Offcanvas
Qee cov ntawv ua qhov chaw. Hauv lub neej tiag tiag koj tuaj yeem muaj cov ntsiab lus koj tau xaiv. Zoo li, ntawv, duab, npe, thiab lwm yam. 
<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>

Qhov chaw

Tsis muaj qhov chaw nyob rau hauv offcanvas Cheebtsam, yog li koj yuav tsum ntxiv ib qho ntawm cov kev hloov kho hauv qab no;

  • .offcanvas-startqhov chaw offcanvas nyob rau sab laug ntawm qhov chaw saib (pom saum toj no)
  • .offcanvas-endtso offcanvas rau sab xis ntawm qhov chaw saib
  • .offcanvas-topmuab qhov chaw offcanvas rau sab saum toj ntawm qhov chaw saib
  • .offcanvas-bottomtso offcanvas rau hauv qab ntawm qhov chaw saib

Sim cov piv txwv saum toj, txoj cai, thiab hauv qab hauv qab no.

Offcanvas sab saum toj
... 
<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>
Offcanvas txoj cai
... 
<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>
Offcanvas hauv qab
... 
<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>

Backdrop

Scrolling lub <body>caij yog neeg xiam thaum lub offcanvas thiab nws cov backdrop pom. Siv tus data-bs-scrollcwj pwm toggle <body>scrolling thiab data-bs-backdroptoggle backdrop.

Xim nrog scrolling

Sim scrolling tus so ntawm nplooj ntawv kom pom qhov kev xaiv no hauv kev nqis tes ua.

Offcanvas nrog backdrop

.....

Backdroped nrog scrolling

Sim scrolling tus so ntawm nplooj ntawv kom pom qhov kev xaiv no hauv kev nqis tes ua.

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

Kev siv tau

Txij li thaum lub offcanvas vaj huam sib luag yog conceptually ib modal dialog, nco ntsoov ntxiv aria-labelledby="..."- referencing lub offcanvas title-rau .offcanvas. Nco ntsoov tias koj tsis tas yuav ntxiv role="dialog"vim peb twb ntxiv nws ntawm JavaScript.

Sass

Hloov pauv

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

Kev siv

Lub offcanvas plugin siv ob peb chav kawm thiab cov cwj pwm los tswj qhov hnyav nqa:

  • .offcanvaszais cov ntsiab lus
  • .offcanvas.showqhia cov ntsiab lus
  • .offcanvas-startnkaum lub offcanvas ntawm sab laug
  • .offcanvas-endnkaum lub offcanvas ntawm sab xis
  • .offcanvas-bottomhides lub offcanvas nyob rau hauv qab

Ntxiv lub khawm tso tawm nrog tus data-bs-dismiss="offcanvas"cwj pwm, uas ua rau JavaScript ua haujlwm. Nco ntsoov siv lub <button>caij nrog nws rau kev coj tus cwj pwm zoo thoob plaws txhua yam khoom siv.

Los ntawm cov ntaub ntawv attributes

Ntxiv data-bs-toggle="offcanvas"thiab ib data-bs-targetlossis hrefrau lub caij kom tau txais kev tswj hwm ntawm ib lub caij offcanvas. Tus data-bs-targetcwj pwm lees txais CSS xaiv los siv cov offcanvas rau. Nco ntsoov ntxiv cov chav kawm offcanvasrau lub caij offcanvas. Yog tias koj xav kom nws qhib lub neej ntawd, ntxiv cov chav kawm ntxiv show.

Ntawm JavaScript

Qhib manually nrog:

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

Kev xaiv

Cov kev xaiv tuaj yeem dhau los ntawm cov ntaub ntawv tus cwj pwm lossis JavaScript. Rau cov ntaub ntawv tus cwj pwm, ntxiv rau qhov kev xaiv npe rau data-bs-, xws li hauv data-bs-backdrop="".

Lub npe Hom Default Kev piav qhia
backdrop boolean true Siv lub nraub qaum ntawm lub cev thaum offcanvas qhib
keyboard boolean true Kaw lub offcanvas thaum khiav khiav yog nias
scroll boolean false Cia lub cev scrolling thaum offcanvas qhib

Cov txheej txheem

Asynchronous txoj kev thiab kev hloov

Txhua txoj kev API yog asynchronous thiab pib hloov pauv . Lawv rov qab mus rau tus neeg hu xov tooj sai li sai tau thaum qhov kev hloov pauv pib tab sis ua ntej nws xaus . Tsis tas li ntawd, ib txoj kev hu rau ib qho kev hloov pauv yuav raug tsis quav ntsej .

Saib peb cov ntaub ntawv JavaScript kom paub ntau ntxiv .

Qhib koj cov ntsiab lus raws li lub hauv paus offcanvas. Txais ib qho kev xaiv xaiv object.

Koj tuaj yeem tsim ib qho offcanvas piv txwv nrog tus tsim, piv txwv li:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Txoj kev Kev piav qhia
toggle Toggles lub caij offcanvas los qhia lossis zais. Rov qab mus rau tus neeg hu ua ntej lub caij offcanvas tau tshwm sim los yog muab zais (piv txwv li ua ntej qhov shown.bs.offcanvaskev hidden.bs.offcanvastshwm sim tshwm sim).
show Qhia ib qho offcanvas keeb. Rov qab mus rau tus neeg hu ua ntej lub caij offcanvas tau tshwm sim tiag tiag (piv txwv li ua ntej qhov shown.bs.offcanvasxwm txheej tshwm sim).
hide Hide ib qho offcanvas keeb. Rov qab mus rau tus neeg hu ua ntej lub caij offcanvas tau muab zais tiag tiag (piv txwv li ua ntej qhov hidden.bs.offcanvasxwm txheej tshwm sim).
getInstance Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv offcanvas txuam nrog DOM lub caij
getOrCreateInstance Txoj kev zoo li qub uas tso cai rau koj kom tau txais qhov piv txwv offcanvas txuam nrog DOM lub caij, lossis tsim ib qho tshiab yog tias nws tsis tau pib

Cov xwm txheej

Bootstrap's offcanvas chav kawm nthuav tawm ob peb txheej xwm rau hooking rau hauv offcanvas functionality.

Hom xwm txheej Kev piav qhia
show.bs.offcanvas Qhov xwm txheej no tua hluav taws tam sim ntawd thaum showhu ua piv txwv.
shown.bs.offcanvas Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub caij offcanvas tau pom rau tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav).
hide.bs.offcanvas Qhov kev tshwm sim no raug rho tawm haujlwm tam sim ntawd thaum hidehu ua txoj kev.
hidden.bs.offcanvas Qhov kev tshwm sim no raug rho tawm haujlwm thaum lub caij offcanvas tau muab zais los ntawm tus neeg siv (yuav tos rau CSS kev hloov pauv kom tiav). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})