Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
in English

Offcanvas

Pangani zisankho zobisika mu projekiti yanu kuti muyendere, ngolo zogulira, ndi zina zambiri ndi makalasi ochepa komanso pulogalamu yathu yowonjezera ya JavaScript.

Patsamba ili

Momwe zimagwirira ntchito

Offcanvas ndi chigawo cham'mbali chomwe chitha kusinthidwa kudzera pa JavaScript kuti chiwoneke kuchokera kumanzere, kumanja, kapena kumunsi kwa malo owonera. Mabatani kapena anangula amagwiritsidwa ntchito ngati zoyambitsa zomwe zimalumikizidwa ndi zinthu zina zomwe mumasintha, ndipo datamawonekedwe amagwiritsidwa ntchito kuyitanitsa JavaScript yathu.

  • Offcanvas imagawana ma code ena a JavaScript ngati ma modals. M'malingaliro, ndizofanana, koma ndi mapulagini osiyana.
  • Momwemonso, zosintha zina za Sass zama masitaelo ndi miyeso ya offcanvas zimatengera kusinthika kwa modal.
  • Ikawonetsedwa, offcanvas imakhala ndi mawonekedwe osasinthika omwe mungadindidwe kuti mubise chinsalucho.
  • Mofanana ndi ma modal, chinsalu chimodzi chokha chimatha kuwonetsedwa panthawi imodzi.

Mungodziwiratu! Poganizira momwe CSS imagwirira ntchito makanema ojambula, simungagwiritse ntchito marginkapena translatepa .offcanvaschinthu. M'malo mwake, gwiritsani ntchito kalasi ngati chinthu chodzikulunga chodziyimira payokha.

Kanema wa gawoli amadalira prefers-reduced-motionfunso la media. Onani gawo lochepetsedwa la zolemba zathu zofikira .

Zitsanzo

Zida za Offcanvas

Pansipa pali chitsanzo cha offcanvas chomwe chimawonetsedwa mwachisawawa (kudzera .showpa .offcanvas). Offcanvas imaphatikizapo kuthandizira mutu wokhala ndi batani lotseka ndi gulu losasankha lamagulu oyambira padding. Tikukulimbikitsani kuti muphatikizepo mitu ya offcanvas ndikuchotsa zochita zilizonse ngati kuli kotheka, kapena mupereke choletsa.

Offcanvas
Zolemba za offcanvas zimapita apa. Mutha kuyika pafupifupi gawo lililonse la Bootstrap kapena zokonda pano. 
<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>

Chiwonetsero chamoyo

Gwiritsani ntchito mabatani omwe ali pansipa kuti muwonetse ndi kubisa chinthu cha offcanvas kudzera pa JavaScript chomwe chimasintha .showkalasi pa chinthu ndi .offcanvaskalasi.

  • .offcanvasimabisa zomwe zili (zosakhazikika)
  • .offcanvas.showzikuwonetsa zomwe zili

Mutha kugwiritsa ntchito ulalo wokhala ndi mawonekedwe href, kapena batani lokhala ndi tanthauzo data-bs-target. Muzochitika zonsezi, data-bs-toggle="offcanvas"ndikofunikira.

Lumikizani ndi href
Offcanvas
Malemba ena ngati chosungira. M'moyo weniweni mutha kukhala ndi zinthu zomwe mwasankha. Monga, zolemba, zithunzi, mindandanda, ndi zina. 
<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>

Kuyika

Palibe kuyika kokhazikika kwa zida zakunja, chifukwa chake muyenera kuwonjezera imodzi mwamakalasi osinthira pansipa;

  • .offcanvas-startamayika chinsalu kumanzere kwa malo owonera (omwe ali pamwambapa)
  • .offcanvas-endamayika zinsalu kumanja kwa malo owonera
  • .offcanvas-topamayika zinsalu pamwamba pa malo owonera
  • .offcanvas-bottomamayika zinsalu pansi pa malo owonera

Yesani pamwamba, kumanja, ndi zitsanzo zapansi pansipa.

Offcanvas pamwamba
... 
<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 kumanja
... 
<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 pansi
... 
<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>

Kumbuyo

Kupukusa <body>chinthucho kumayimitsidwa ngati chinsalu chakumbuyo ndi kumbuyo kwake zikuwonekera. Gwiritsani ntchito mawonekedwewo data-bs-scrollkuti musinthe <body>scrolling data-bs-backdropndikusintha zakumbuyo.

Wakuda ndi scrolling

Yesani kusuntha tsamba lonse kuti muwone izi zikugwira ntchito.

Offcanvas yokhala ndi kumbuyo

.....

Kumbuyo ndi scrolling

Yesani kusuntha tsamba lonse kuti muwone izi zikugwira ntchito.

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

Kufikika

Popeza gulu la offcanvas mwalingaliro ndilokambirana, onetsetsani kuti aria-labelledby="..."mwawonjezera -kutengera mutu wa offcanvas - ku .offcanvas. Dziwani kuti simukuyenera kuwonjezera role="dialog"popeza tidawonjezera kale kudzera pa JavaScript.

Sass

Zosintha

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

Kugwiritsa ntchito

Pulagi ya offcanvas imagwiritsa ntchito makalasi angapo ndi mawonekedwe kuti athe kunyamula zolemetsa:

  • .offcanvasamabisa zomwe zili
  • .offcanvas.showzikuwonetsa zomwe zili
  • .offcanvas-startamabisa chinsalu kumanzere
  • .offcanvas-endamabisa chinsalu kumanja
  • .offcanvas-bottomamabisa offcanvas pansi

Onjezani batani lochotsa ndi mawonekedwe data-bs-dismiss="offcanvas", omwe amayambitsa magwiridwe antchito a JavaScript. Onetsetsani kuti mukugwiritsa ntchito <button>chinthucho kuti muzichita bwino pazida zonse.

Kudzera muzochita za data

Sinthani

Onjezani data-bs-toggle="offcanvas"ndi a data-bs-targetkapena hrefku chinthucho kuti muzitha kuwongolera chinthu chimodzi cha offcanvas. Malingaliro data-bs-targetamavomereza chosankha cha CSS kuti agwiritse ntchito. Onetsetsani kuti mwawonjezera kalasi offcanvasku chinthu cha offcanvas. Ngati mukufuna kuti isatseguke, onjezani kalasi yowonjezera show.

Chotsani

Kuthamangitsidwa kumatha kutheka ndi lingaliro lomwe lili datapa batani mkati mwa chinsalu monga momwe zasonyezedwera pansipa:

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

kapena pa batani kunja kwa chinsalu pogwiritsa ntchito data-bs-targetzomwe zili pansipa:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Ngakhale njira zonse ziwiri zothamangitsira chinsalu zimathandizidwa, dziwani kuti kuchotsa kunja kwa chinsalu sikufanana ndi WAI-ARIA modal dialog design pattern . Chitani izi mwakufuna kwanu.

Kudzera pa JavaScript

Yambitsani pamanja ndi:

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

Zosankha

Zosankha zitha kuperekedwa kudzera pa data kapena JavaScript. Pamawonekedwe a data, yonjezerani dzina lachisankho ku data-bs-, monga mu data-bs-backdrop="".

Dzina Mtundu Zosasintha Kufotokozera
backdrop boolean true Ikani chithunzi chakumbuyo pathupi pomwe chinsalu chili chotsegula
keyboard boolean true Amatseka chinsalu pamene kiyi yothawa ikanikizidwa
scroll boolean false Lolani kuti thupi liziyenda pomwe chinsalu chili chotsegula

Njira

Asynchronous njira ndi kusintha

Njira zonse za API ndizosasinthika ndipo zimayamba kusintha . Amabwerera kwa woyimbayo atangoyamba kusintha koma asanathe . Kuonjezera apo, kuyitana kwa njira pa gawo losintha kudzanyalanyazidwa .

Onani zolemba zathu za JavaScript kuti mudziwe zambiri .

Imatsegula zomwe muli nazo ngati chinthu chakunja. Imavomereza zomwe mungachite object.

Mutha kupanga chitsanzo cha offcanvas ndi womanga, mwachitsanzo:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
Njira Kufotokozera
toggle Imatembenuza chinthu chakunja kuti chiwonetsedwe kapena kubisika. Imabwerera kwa woyimbirayo chinthu cha offcanvas chisanasonyezedwe kapena kubisika (ie chisanachitike shown.bs.offcanvaskapena hidden.bs.offcanvaschochitikacho).
show Ikuwonetsa chinthu cha offcanvas. Imabwereranso kwa woyimbayo chinthu cha offcanvas chisanasonyezedwe (ie zisanachitike shown.bs.offcanvas).
hide Imabisa chinthu cha offcanvas. Imabwereranso kwa woyimbirayo chinthu cha offcanvas chisanabisike (ie zisanachitike hidden.bs.offcanvas).
getInstance Njira yosasunthika yomwe imakupatsani mwayi woti muthane ndi chithunzi cha offcanvas cholumikizidwa ndi chinthu cha DOM
getOrCreateInstance Njira yosasunthika yomwe imakupatsani mwayi woti muthane ndi zochitika zakunja zolumikizidwa ndi chinthu cha DOM, kapena pangani china china ngati sichinayambike.

Zochitika

Kalasi ya offcanvas ya Bootstrap imawulula zochitika zingapo zolumikizira magwiridwe antchito a offcanvas.

Mtundu wa chochitika Kufotokozera
show.bs.offcanvas Chochitika ichi chimayaka nthawi yomweyo shownjira yachitsanzo itayitanidwa.
shown.bs.offcanvas Chochitikachi chimachotsedwa pamene chinthu cha offcanvas chawonetsedwa kwa wogwiritsa ntchito (chidikira kuti kusintha kwa CSS kumalize).
hide.bs.offcanvas Chochitikachi chimathamangitsidwa nthawi yomweyo hidenjirayo itayitanidwa.
hidden.bs.offcanvas Chochitikachi chimachotsedwa pomwe chinthu cha offcanvas chabisidwa kwa wogwiritsa ntchito (chidikirira kuti kusintha kwa CSS kumalize). 
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})