U gudub nuxurka muhiimka ah U gudub dukumentiyada navigation
Check
in English

Offcanvas

Ku dhis baararka qarsoon mashruucaaga hagidda, gawaarida wax iibsiga, iyo wax ka badan oo leh dhawr fasal iyo plugin JavaScript.

Boggan

Sida ay u shaqeyso

Offcanvas waa qayb dhinac ah oo lagu rogi karo JavaScript si ay uga soo muuqato bidix, midig, sare, ama cidhifka daawashada. Badhamada ama barroosinnada waxaa loo isticmaalaa kiciyeyaasha ku dheggan walxo gaar ah oo aad beddesho, sifadana datawaxa loo isticmaalaa in lagu yeedho JavaScript-kayaga.

  • Offcanvas waxa ay la wadaagtaa qaar ka mid ah koodka JavaScript ee moodalka. Fikrad ahaan, aad bay isugu dhow yihiin, laakiin waa plugins gaar ah.
  • Sidoo kale, qaar ka mid ah ilaha Sass doorsoomayaasha qaababka offcanvas iyo cabbirada ayaa laga dhaxlay doorsoomayaasha modal.
  • Marka la tuso, offcanvas waxaa ku jira meel aan toos ahayn oo la riixi karo si loo qariyo dusha ka baxsan.
  • Si la mid ah moodooyinka, hal mar oo kaliya ayaa la tusi karaa shisheeyaha.

Madaxa kor u qaad! Marka la eego sida ay CSS u maamusho animations, ma isticmaali kartid marginama ma isticmaali translatekartid shay .offcanvas. Taa beddelkeeda, u isticmaal fasalka sidii curiye duubid oo madaxbannaan.

Saamaynta animation ee qaybtani waxay ku xidhan tahay prefers-reduced-motionwaydiinta warbaahinta. Eeg qaybta dhaqdhaqaaqa la dhimay ee dukumeenti gelitaankeena .

Tusaalooyinka

Qaybaha Offcanvas

Hoos waxaa ku yaal tusaale ka baxsan kanvas oo lagu muujiyey si toos ah (oo loo sii marayo .show) .offcanvas. Offcanvas waxaa ka mid ah taageerada madaxa oo leh badhanka u dhow iyo fasalka jidhka ikhtiyaariga ah ee bilowga ah padding. Waxaan kuu soo jeedineynaa inaad ku darto madax-madax ka baxsan oo leh ficillada la eryo mar kasta oo ay suurtagal tahay, ama bixi tallaabo cayr ah oo cad.

Offcanvas
Waxyaalaha ku saabsan dusha canvas-ka ayaa tagta halkan. Waxaad meel dhigi kartaa wax kasta oo ka kooban Bootstrap ama canaasiirta gaarka ah halkan.
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>

Muujinta tooska ah

Isticmaal badhannada hoose si aad u muujiso oo aad u qariso curiyaha bannaanka ah adigoo isticmaalaya JavaScript kaas oo u rogaya .showfasalka curiyaha .offcanvasfasalka.

  • .offcanvaswaxa uu qarinayaa (default)
  • .offcanvas.showwaxay muujinaysaa nuxurka

Waxaad isticmaali kartaa xiriiriye leh hrefsifada, ama badhan sifada leh data-bs-target. Labada xaaladoodba, data-bs-toggle="offcanvas"waa loo baahan yahay.

Ku xidh href
Offcanvas
Qoraal qaar ka mid ah sida meeleeyaha. Nolosha dhabta ah waxaad yeelan kartaa walxaha aad dooratay. Sida, qoraalka, sawirada, liisaska, iwm.
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>

Duubista jirka

Duubista <body>cunsurka waa naafo marka dusha sare iyo gadaashiisa la arko. Isticmaal data-bs-scrollsifada si aad awood ugu <body>yeelatid duubista.

Offcanvas oo leh jir-rogid

Isku day inaad rogto bogga intiisa kale si aad u aragto doorashadan ficil ahaan.

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>

Dul-duubka jirka iyo dib-u-dhaca

Waxa kale oo aad awood u yeelan kartaa <body>rogrogid leh muuqaal muuqda.

Dul-dhac leh rogid

Isku day inaad rogto bogga intiisa kale si aad u aragto doorashadan ficil ahaan.

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>

Dhabar taagan

Marka gadaasha loo dejiyo inay taagan tahay, canvas-ka-baxa ma xidhmi doono marka bannaankiisa la gujinayo.

Offcanvas
Ma xidhi doono haddii aad dibaddayda gujiso.
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>

Bannaanka madow

Lagu daray v5.2.0

U beddelo muuqaalka bannaanka bannaanka oo leh yutiilitida si aad si fiican ugu dhigtid xaalado kala duwan sida navbars mugdi ah. Halkan waxaan ku .text-bg-darkdarsaneynaa qaabka saxda ah ee canvas mugdiga ah . Haddii aad leedahay hoos-u-dhacyo gudaha ah, tixgeli inaad sidoo kale ku darto ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Offcanvas

Dhig waxyaabaha ka baxsan canvas halkan.

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>

Ka jawaaba

Lagu daray v5.2.0

Fasallada shisheeyaha ka jawaaba waxay qariyaan macluumaadka ka baxsan aragtida laga soo bilaabo meel go'an iyo hoos. Halka ka saraysa barta jabinta, waxa ku jira waxa ay u dhaqmi doonaan sidii caadiga ahayd. Tusaale ahaan, .offcanvas-lgwaxa ay ku qarisaa meel bannaan oo ka hoosaysa barta jabinta lg, laakiin waxa ay muujisaa waxa ka sarreeya barta lgjabinta.

Wax ka beddel barowsarkaaga si aad u muujiso leexashada canvas-ka ee ka jawaabaya.
Ka jawaab celinta dusha sare

Tani waxay ka kooban tahay .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>

Fasalo ka jawaabaya canvas-ka ayaa laga heli karaa meel kasta oo nasashada ah.

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

Meelaynta

Ma jirto meelayn gaar ah oo loogu talagalay qaybaha canvas-ka-baxsan, markaa waa inaad ku dartaa mid ka mid ah fasallada wax ka beddelka ee hoose.

  • .offcanvas-startmeel kabaxsan dhanka bidix ee daawashada (kor lagu muujiyay)
  • .offcanvas-enddhigaya offcanvas dhanka midig ee daawashada
  • .offcanvas-topmeela offcanvas dusha sare ee daawashada
  • .offcanvas-bottomdhigaya offcanvas xagga hoose ee daawashada

Isku day tusaalooyinka sare, midig, iyo hoose ee hoose.

dusha ka baxsan
...
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 midig
...
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 hoose
...
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>

Helitaanka

Maadaama guddiga offcanvas uu fikrad ahaan yahay wada hadal modal, hubi inaad ku darto aria-labelledby="..."- tixraacaya cinwaanka offcanvas-to .offcanvas. Ogsoonow inaadan u baahnayn inaad ku darto role="dialog"maadaama aan mar hore ku darnay JavaScript.

CSS

Kala duwanaansho

Lagu daray v5.2.0

Iyada oo qayb ka ah habka isbeddelaya ee Bootstrap ee CSS, offcanvas hadda waxay isticmaashaa doorsoomayaasha CSS-ta maxalliga ah .offcanvassi loo horumariyo habaynta waqtiga-dhabta ah. Qiimaha doorsoomayaasha CSS waxa lagu dejiyay Sass, sidaa darteed habaynta Sass wali waa la taageerayaa, sidoo kale.

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

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

Isticmaalka

Furaha offcanvas wuxuu isticmaalaa dhowr fasalo iyo sifooyin si loo xakameeyo qaadista culus:

  • .offcanvasqariya waxa ku jira
  • .offcanvas.showwaxay muujinaysaa nuxurka
  • .offcanvas-startwuxuu qariyaa dusha sare ee bidixda
  • .offcanvas-endwuxuu qariyaa dusha sare ee midig
  • .offcanvas-topwuxuu qariyaa dusha sare ee canvas-ka
  • .offcanvas-bottomwuxuu qariyaa dusha sare ee canvas-ka

Ku dar badhanka cayrinta oo leh data-bs-dismiss="offcanvas"sifada, taas oo kicinaysa shaqaynta JavaScript. U hubso inaad u isticmaasho <button>curiyaha leh hab-dhaqan habboon dhammaan qalabka.

Iyada oo loo marayo sifooyinka xogta

Bedeli

Ku dar data-bs-toggle="offcanvas"iyo a data-bs-targetama hrefcuriyaha si si toos ah loogu meeleeyo kantaroolka hal canvas ka baxsan. Sifadu data-bs-targetwaxay aqbashaa xulashada CSS si loogu dabaqo dusha sare. Hubi inaad fasalka offcanvasku darto walxaha shisheeyaha ah. Haddii aad rabto in uu furmo, ku dar fasalka dheeraadka ah show.

Eryi

Cayrinta waxaa lagu gaari karaa sifada ku taal databadhan ku dhex jira canvas sida hoos lagu muujiyey:

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

ama ku dheji badhan ka baxsan canvas iyadoo la isticmaalayo data-bs-targetsida hoos ku cad:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
In kasta oo labada dariiqo ee lagu eryo canvas-ka-baxa la taageero, maskaxda ku hay in ka saarista bannaanka bannaanka aanay ku habboonayn qaabka ARIA Hababka Hab-dhaqanka Qorista ee wada-hadalka (qaabka) . Taas ku samee khatartaada.

Iyadoo loo marayo JavaScript

Ku oggolow gacanta:

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

Ikhtiyaarada

Sida xulashooyinka loogu gudbi karo sifooyinka xogta ama JavaScript, waxaad ku dari kartaa magaca ikhtiyaarka ah data-bs-, sida ku jira data-bs-animation="{value}". Hubi inaad ka beddesho nooca kiis ee magaca ikhtiyaarka " camelCase " una beddelo " kebab-case " markaad ikhtiyaarka ku gudbinayso sifooyinka xogta. Tusaale ahaan, isticmaal data-bs-custom-class="beautifier"bedelkii data-bs-customClass="beautifier".

Marka la eego Bootstrap 5.2.0, dhammaan qaybaha waxay taageeraan sifada xogta kaydsan ee tijaabadadata-bs-config ah taas oo u dejin karta qaabaynta qaybaha fudud sida xadhig JSON ah. Marka curiye leeyahay data-bs-config='{"delay":0, "title":123}'iyo data-bs-title="456"sifooyin, titleqiimaha kama dambaysta ahi waxa uu ahaan doonaa 456sifada xogta goonida ahina waxa ay meesha ka saari doontaa qiyamka lagu bixiyo data-bs-config. Intaa waxaa dheer, sifada xogta hadda jirta waxay awood u leedahay inay ku noolaato qiyamka JSON sida data-bs-delay='{"show":0,"hide":150}'.

Magaca Nooca Asal ahaan Sharaxaada
backdrop boolean ama xadhigstatic true Codso duleelka dambe ee jirka inta canvas furan yahay. Beddelkeeda, sheeg staticmeel-dambe oo aan xidhinayn dusha sare marka la gujiyo.
keyboard booliyan true Waxay xirtaa galalka bannaanka marka furaha baxsadka la riixo.
scroll booliyan false Oggolow in jidhka la rogo inta canvas furan yahay.

Hababka

Hababka iyo kala-guurka aan isku midka ahayn

Dhammaan hababka API waa isku mid waxayna bilaabaan kala-guurka . Waxay ku soo noqdaan qofka soo wacaya isla markii uu bilaabmo kala-guurka laakiin ka hor inta uusan dhammaan . Intaa waxaa dheer, hab ku baaqaya in qayb ka beddelka waa la iska indhatiray .

Ka eeg dukumeentiyada JavaScript wixii macluumaad dheeraad ah .

Waxay u hawlgelisaa macluumaadkaaga sidii cunsur-ka-baxsan. Aqbala ikhtiyaarka ikhtiyaariga ah object.

Waxaad ku samayn kartaa tusaale ka baxsan kan wax dhisaha, tusaale ahaan:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Habka Sharaxaada
getInstance Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaale ka baxsan canvas oo la xidhiidha curiyaha DOM.
getOrCreateInstance Habka taagan kaas oo kuu ogolaanaya inaad hesho tusaale ka baxsan canvas oo la xidhiidha curiyaha DOM, ama abuurto mid cusub haddii aan la bilaabin.
hide Waxay qarisaa walxaha canvas ka baxsan. Ku soo noqda qofka soo wacaya ka hor inta aan la qarinin qaybta canvas-ka ah (tusaale ka hor intaanay hidden.bs.offcanvasdhacdada dhicin).
show Waxay muujisaa cunsur ka baxsan canvas Ku soo noqda qofka soo wacaya ka hor inta aan dhab ahaantii la tusin cunsurka bannaanka (tusaale ka hor intaanay shown.bs.offcanvasdhacdada dhicin).
toggle U beddelaa walxaha canvas ka baxsan si loo muujiyo ama loo qariyo. Ku soo noqda qofka soo wacaya ka hor inta aan xubinta canvas-ka ah run ahaantii la muujin ama la qarin (tusaale ka hor inta aanay dhacdada shown.bs.offcanvasama hidden.bs.offcanvasdhacdada dhicin).

Dhacdooyinka

Bootstrap's offcanvas fasalka wuxuu daaha ka qaadaa dhowr dhacdo oo loogu talagalay ku xidhidhiyaha shaqada offcanvas.

Nooca dhacdada Sharaxaada
hide.bs.offcanvas Dhacdadan ayaa isla markiiba la eryaa marka hidehabka loo waco.
hidden.bs.offcanvas Dhacdadan waxa la eryaa marka cunsur-ka-baxsan laga qariyay isticmaalaha (waxay sugi doontaa inta CSS kala guurka la dhamaystirayo).
hidePrevented.bs.offcanvas Dhacdadan waxa la eryaa marka dusha sare la tuso, gadaalkeeduna yahay staticoo gujin ka baxsan canvas-ka ayaa la sameeyaa. Dhacdada ayaa sidoo kale la eryaa marka furaha baxsadka la riixo oo keyboardikhtiyaarka loo dejiyo false.
show.bs.offcanvas Dhacdadani waxay isla markaaba gubataa marka showhabka tusaalaha la yiraahdo.
shown.bs.offcanvas Dhacdadan waxa la eryaa marka cunsur-ka-baxsan la tusay isticmaaluhu (waxay sugi doontaa inta CSS ka wareejinta la dhammaystirayo). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})