Pitani kuzinthu zazikulu Pitani kumayendedwe adocs
Check
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, pamwamba, kapena m'mphepete mwa 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.
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>

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

Kupukusa thupi

Kupukusa <body>chinthucho kumayimitsidwa ngati chinsalu chakumbuyo ndi kumbuyo kwake zikuwonekera. Gwiritsani ntchito mawonekedwe data-bs-scrollkuti <body>mutsegule.

Offcanvas ndi thupi scrolling

Yesani kusuntha tsamba lonse kuti muwone izi zikugwira ntchito.

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>

Kuzungulira thupi ndi kumbuyo

Muthanso <body>kuloleza kupukusa ndi mawonekedwe owoneka.

Kumbuyo ndi scrolling

Yesani kusuntha tsamba lonse kuti muwone izi zikugwira ntchito.

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>

Zosasunthika

Kumbuyo kukakhala static, offcanvas sidzatsekedwa mukadina kunja kwake.

Offcanvas
Sinditseka mukadina kunja kwa ine.
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>

Zovala zakuda

Yowonjezedwa mu v5.2.0

Sinthani mawonekedwe a offcanvases ndi zida zothandizira kuti zigwirizane bwino ndi zochitika zosiyanasiyana monga ma navbar akuda. Apa tikuwonjezera .text-bg-darkndi kukongoletsa koyenera .offcanvasndi chinsalu chakuda. Ngati muli ndi zotsitsa mkati, ganiziraninso kuwonjezera ku ..btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Offcanvas

Ikani zinthu za offcanvas apa.

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>

Womvera

Yowonjezedwa mu v5.2.0

Makalasi omvera a offcanvas amabisa zomwe zili kunja kwa malo owonera kuchokera pagawo lokhazikika komanso pansi. Pamwamba pa chosweka chimenecho, zomwe zili mkatimo zidzakhala monga mwanthawi zonse. Mwachitsanzo, .offcanvas-lgimabisa zomwe zili mu kansalu kakang'ono pansi pa malo ophwanyika lg, koma zimasonyeza zomwe zili pamwamba pa malo lgophwanyidwa.

Sinthani kukula kwa msakatuli wanu kuti muwonetse mawonekedwe osinthika a offcanvas.
Kumvera offcanvas

Izi ndi zomwe zili mkati mwa .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>

Makalasi omvera a offcanvas amapezeka paliponse pagawo lililonse.

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

Kuyika

Palibe kuyika kwachisawawa 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
...
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>
Offcanvas kumanja
...
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>
Offcanvas pansi
...
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>

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.

CSS

Zosintha

Yowonjezedwa mu v5.2.0

Monga gawo la njira yosinthira ya CSS ya Bootstrap, offcanvas tsopano imagwiritsa ntchito zosintha za CSS zakomweko .offcanvaskuti zisinthidwe munthawi yeniyeni. Makhalidwe amitundu ya CSS amayikidwa kudzera pa Sass, kotero makonda a Sass akadali othandizidwa, nawonso.

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

Zosintha za Sass

$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-topamabisa chinsalu pamwamba
  • .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 zimathandizira, dziwani kuti kutulutsa kunja kwa chinsalu sikufanana ndi ARIA Authoring Practices Guide dialog (modal) pattern . Chitani izi mwakufuna kwanu.

Kudzera pa JavaScript

Yambitsani pamanja ndi:

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

Zosankha

Monga zosankha zitha kuperekedwa kudzera pa data kapena JavaScript, mutha kuwonjezera dzina lachisankho ku data-bs-, monga data-bs-animation="{value}". Onetsetsani kuti musinthe mtundu wamtundu wa dzina lachisankho kuchokera ku " camelCase " kupita ku " kebab-case " podutsa zosankha pogwiritsa ntchito zizindikiro za data. Mwachitsanzo, gwiritsani ntchito data-bs-custom-class="beautifier"m'malo mwa data-bs-customClass="beautifier".

Kuyambira pa Bootstrap 5.2.0, zigawo zonse zimathandizira chidziwitso chosungidwa cha data data-bs-configchomwe chingathe kukhazikitsa chigawo chosavuta ngati chingwe cha JSON. Chilichonse chikakhala ndi mawonekedwe , mtengo womaliza udzakhala ndipo mawonekedwe osiyana a data adzapitilira zomwe zaperekedwa data-bs-config='{"delay":0, "title":123}'pa . Kuphatikiza apo, zomwe zilipo kale zimatha kusunga ma JSON monga .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Dzina Mtundu Zosasintha Kufotokozera
backdrop boolean kapena chingwestatic true Ikani chithunzi chakumbuyo pathupi pomwe chinsalu chili chotsegula. Kapenanso, tchulani staticzakumbuyo zomwe sizitseka chinsalucho mukadina.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Njira Kufotokozera
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 chithunzi cha offcanvas cholumikizidwa ndi chinthu cha DOM, kapena pangani china china ngati sichinayambike.
hide Imabisa chinthu cha offcanvas. Imabwereranso kwa woyimbirayo chinthu cha offcanvas chisanabisike (ie zisanachitike hidden.bs.offcanvas).
show Ikuwonetsa chinthu cha offcanvas. Imabwereranso kwa woyimbayo chinthu cha offcanvas chisanasonyezedwe (ie zisanachitike shown.bs.offcanvas).
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).

Zochitika

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

Mtundu wa chochitika Kufotokozera
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).
hidePrevented.bs.offcanvas Chochitikachi chimachotsedwa pamene chinsalu chikuwonetsedwa, kumbuyo kwake staticndikudina kunja kwa chinsalucho. Chochitikacho chimathamangitsidwanso pamene chinsinsi chothawa chikanikizidwa ndipo keyboardnjirayo imayikidwa false.
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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})