Ruka hadi kwa yaliyomo kuu Ruka hadi kwenye urambazaji wa hati
Check
in English

Nje ya turubai

Unda pau zilizofichwa kwenye mradi wako kwa urambazaji, mikokoteni ya ununuzi, na zaidi ukitumia madarasa machache na programu-jalizi yetu ya JavaScript.

Katika ukurasa huu

Inavyofanya kazi

Offcanvas ni sehemu ya upau wa kando ambayo inaweza kugeuzwa kupitia JavaScript ili kuonekana kutoka upande wa kushoto, kulia, juu, au ukingo wa chini wa kituo cha kutazama. Vifungo au nanga hutumika kama vichochezi ambavyo vimeambatishwa kwa vipengele maalum unavyogeuza, na datasifa hutumika kuomba JavaScript yetu.

  • Offcanvas hushiriki baadhi ya msimbo sawa wa JavaScript kama moduli. Kwa kweli, zinafanana kabisa, lakini ni programu-jalizi tofauti.
  • Vile vile, viambajengo vingine vya chanzo vya Sass vya mitindo na vipimo vya offcanvas vinarithiwa kutoka kwa vigeu vya modal.
  • Inapoonyeshwa, offcanvas inajumuisha mandhari chaguomsingi ambayo inaweza kubofya ili kuficha offcanvas.
  • Sawa na moduli, ni turubai moja pekee inayoweza kuonyeshwa kwa wakati mmoja.

Vichwa juu! Kwa kuzingatia jinsi CSS inavyoshughulikia uhuishaji, huwezi kutumia marginau translatekwenye .offcanvaskipengele. Badala yake, tumia darasa kama nyenzo huru ya kufunga.

Athari ya uhuishaji ya kipengele hiki inategemea prefers-reduced-motionhoja ya midia. Tazama sehemu ya mwendo iliyopunguzwa ya hati zetu za ufikivu .

Mifano

Vipengele vya Offcanvas

Ifuatayo ni mfano wa offcanvas ambao unaonyeshwa kwa chaguo-msingi (kupitia .showkwenye .offcanvas). Offcanvas inajumuisha matumizi ya kichwa kilicho na kitufe cha kufunga na darasa la hiari la mwili kwa baadhi ya awali padding. Tunapendekeza kwamba ujumuishe vichwa vya offcanvas na vitendo vya kuondoa kila inapowezekana, au utoe hatua ya wazi ya kukataa.

Nje ya turubai
Maudhui ya offcanvas huenda hapa. Unaweza kuweka takriban kijenzi chochote cha Bootstrap au vipengee maalum hapa.
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>

Onyesho la moja kwa moja

Tumia vitufe vilivyo hapa chini ili kuonyesha na kuficha kipengele cha offcanvas kupitia JavaScript ambacho hugeuza .showdarasa kwenye kipengele na .offcanvasdarasa.

  • .offcanvashuficha yaliyomo (chaguo-msingi)
  • .offcanvas.showinaonyesha maudhui

Unaweza kutumia kiungo hrefkilicho na sifa, au kitufe kilicho na data-bs-targetsifa. Katika visa vyote viwili, data-bs-toggle="offcanvas"inahitajika.

Unganisha na href
Nje ya turubai
Baadhi ya maandishi kama kishika nafasi. Katika maisha halisi unaweza kuwa na vipengele ambavyo umechagua. Kama, maandishi, picha, orodha, nk.
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>

Kusonga kwa mwili

Usogezaji wa <body>kipengele huzimwa wakati turubai na mandhari yake yanapoonekana. Tumia data-bs-scrollsifa kuwezesha <body>kusogeza.

Offcanvas na mwili scrolling

Jaribu kusogeza sehemu iliyobaki ya ukurasa ili kuona chaguo hili likiendelea.

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>

Kusogeza kwa mwili na mandhari

Unaweza pia kuwezesha <body>kusogeza kwa mandhari inayoonekana.

Mandhari yenye kusogeza

Jaribu kusogeza sehemu iliyobaki ya ukurasa ili kuona chaguo hili likiendelea.

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>

Mandhari tuli

Mandhari ya nyuma yanapowekwa kuwa tuli, turubai haitafungwa wakati wa kubofya nje yake.

Nje ya turubai
Sitafunga ukibofya nje yangu.
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>

Turubai nyeusi

Imeongezwa katika v5.2.0

Badilisha mwonekano wa turubai zilizo na huduma ili zilingane vyema na miktadha tofauti kama vile pau za giza. Hapa tunaongeza .text-bg-darkkwa .offcanvasna .btn-close-whitekwa .btn-closestyling sahihi na offcanvas giza. Ikiwa una menyu kunjuzi ndani, zingatia pia kuongeza .dropdown-menu-darkkwa .dropdown-menu.

Nje ya turubai

Weka maudhui ya nje ya turubai hapa.

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>

Msikivu

Imeongezwa katika v5.2.0

Madarasa ya kujibu ya offcanvas huficha maudhui nje ya kituo cha kutazama kutoka kwa sehemu maalum ya kugawanyika na chini. Juu ya sehemu hiyo ya kuvunja, yaliyomo ndani yatatenda kama kawaida. Kwa mfano, .offcanvas-lghuficha maudhui kwenye turubai chini ya sehemu ya lgkukatiza, lakini huonyesha maudhui yaliyo juu ya lgkipenyo.

Badilisha ukubwa wa kivinjari chako ili kuonyesha kigeuza jibu cha offcanvas.
Msikivu offcanvas

Haya ni yaliyomo ndani ya .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>

Madarasa ya kuitikia ya offcanvas yanapatikana kote kwa kila sehemu ya kukagua.

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

Uwekaji

Hakuna uwekaji chaguomsingi wa vijenzi vya offcanvas, kwa hivyo ni lazima uongeze mojawapo ya madarasa ya kurekebisha hapa chini.

  • .offcanvas-starthuweka turubai upande wa kushoto wa kituo cha kutazama (kilichoonyeshwa hapo juu)
  • .offcanvas-endinaweka nje ya turubai upande wa kulia wa kituo cha kutazama
  • .offcanvas-tophuweka nje ya turubai juu ya kituo cha kutazama
  • .offcanvas-bottomhuweka turubai chini ya kituo cha kutazama

Jaribu mifano ya juu, kulia na ya chini hapa chini.

Juu ya turubai
...
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 kulia
...
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>
Chini ya turubai
...
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>

Ufikivu

Kwa kuwa kidirisha cha offcanvas kimawazo ni kidadisi cha mtindo, hakikisha kuwa aria-labelledby="..."umeongeza - ukirejelea kichwa cha offcanvas - kwa .offcanvas. Kumbuka kuwa huhitaji kuongeza role="dialog"kwa kuwa tayari tunaiongeza kupitia JavaScript.

CSS

Vigezo

Imeongezwa katika v5.2.0

Kama sehemu ya mkabala wa mabadiliko ya vigeu vya CSS ya Bootstrap, offcanvas sasa inatumia viwezo vya ndani vya CSS .offcanvasili kuboresha ubinafsishaji wa wakati halisi. Thamani za anuwai za CSS zimewekwa kupitia Sass, kwa hivyo ubinafsishaji wa Sass bado unatumika, pia.

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

Vigezo vya 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;

Matumizi

Programu-jalizi ya offcanvas hutumia madarasa na sifa chache kushughulikia unyanyuaji mzito:

  • .offcanvashuficha yaliyomo
  • .offcanvas.showinaonyesha yaliyomo
  • .offcanvas-starthuficha turubai upande wa kushoto
  • .offcanvas-endhuficha turubai upande wa kulia
  • .offcanvas-tophuficha turubai juu
  • .offcanvas-bottomhuficha turubai chini

Ongeza kitufe cha kuondoa chenye data-bs-dismiss="offcanvas"sifa, ambayo huanzisha utendaji wa JavaScript. Hakikisha umetumia <button>kipengele nacho kwa tabia ifaayo kwenye vifaa vyote.

Kupitia sifa za data

Geuza

Ongeza data-bs-toggle="offcanvas"na data-bs-targetau hrefkwa kipengele ili kukabidhi kiotomatiki udhibiti wa kipengele kimoja cha nje ya turubai. Sifa data-bs-targetinakubali kiteuzi cha CSS cha kutumia turubai. Hakikisha umeongeza darasa offcanvaskwenye kipengele cha offcanvas. Ikiwa ungependa ifungue chaguomsingi, ongeza darasa la ziada show.

Ondoa

Kuachishwa kazi kunaweza kupatikana kwa datasifa iliyo kwenye kitufe ndani ya turubai kama inavyoonyeshwa hapa chini:

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

au kwenye kitufe nje ya turubai kwa kutumia data-bs-targetkama inavyoonyeshwa hapa chini:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Ingawa njia zote mbili za kuondoa turubai zinatumika, kumbuka kuwa kuondoa kutoka nje ya turubai hakulingani na mchoro wa Mwongozo wa Mazoezi ya Uandishi wa ARIA (modali) . Fanya hivi kwa hatari yako mwenyewe.

Kupitia JavaScript

Washa wewe mwenyewe na:

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

Chaguo

Kwa vile chaguo zinaweza kupitishwa kupitia sifa za data au JavaScript, unaweza kuongeza jina la chaguo kwa data-bs-, kama katika data-bs-animation="{value}". Hakikisha umebadilisha aina ya kipochi cha jina la chaguo kutoka " camelCase " hadi " kebab-case " wakati wa kupitisha chaguo kupitia sifa za data. Kwa mfano, tumia data-bs-custom-class="beautifier"badala ya data-bs-customClass="beautifier".

Kufikia Bootstrap 5.2.0, vipengee vyote vinaauni sifa ya data iliyohifadhiwa ya majaribiodata-bs-config ambayo inaweza kuweka usanidi wa sehemu rahisi kama mfuatano wa JSON. Wakati kipengele kina data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"sifa, titlethamani ya mwisho itakuwa 456na sifa tofauti za data zitabatilisha thamani zilizotolewa kwenye data-bs-config. Kwa kuongezea, sifa zilizopo za data zinaweza kuweka maadili ya JSON kama data-bs-delay='{"show":0,"hide":150}'.

Jina Aina Chaguomsingi Maelezo
backdrop boolean au kambastatic true Tumia mandhari kwenye mwili wakati offcanvas imefunguliwa. Vinginevyo, bainisha statickwa mandhari ambayo haifungi turubai inapobofya.
keyboard boolean true Hufunga turubai wakati kitufe cha Escape kinapobozwa.
scroll boolean false Ruhusu usogezaji wa mwili wakati offcanvas imefunguliwa.

Mbinu

Njia za Asynchronous na mabadiliko

Njia zote za API ni za asynchronous na zinaanzisha mpito . Wanarudi kwa mpigaji mara tu mpito unapoanza lakini kabla haujaisha . Kwa kuongeza, simu ya mbinu kwenye sehemu ya mpito itapuuzwa .

Tazama hati zetu za JavaScript kwa maelezo zaidi .

Huwasha maudhui yako kama kipengele cha nje ya turubai. Inakubali chaguo za hiari object.

Unaweza kuunda mfano wa offcanvas na mjenzi, kwa mfano:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Njia Maelezo
getInstance Njia tuli ambayo hukuruhusu kupata mfano wa offcanvas unaohusishwa na kipengee cha DOM.
getOrCreateInstance Mbinu tuli inayokuruhusu kupata mfano wa offcanvas unaohusishwa na kipengee cha DOM, au uunde kipya endapo hakijaanzishwa.
hide Huficha kipengele cha offcanvas. Hurejesha kwa anayepiga kabla kipengele cha offcanvas hakijafichwa (yaani kabla ya hidden.bs.offcanvastukio kutokea).
show Inaonyesha kipengele cha offcanvas. Hurejesha kwa anayepiga kabla kipengele cha offcanvas hakijaonyeshwa (yaani kabla ya shown.bs.offcanvastukio kutokea).
toggle Hugeuza kipengele cha offcanvas kuonyeshwa au kufichwa. Hurejesha kwa anayepiga kabla kipengele cha offcanvas hakijaonyeshwa au kufichwa (yaani kabla ya tukio shown.bs.offcanvasau hidden.bs.offcanvastukio).

Matukio

Darasa la offcanvas la Bootstrap linafichua matukio machache ya kuunganisha kwenye utendaji wa offcanvas.

Aina ya tukio Maelezo
hide.bs.offcanvas Tukio hili linafukuzwa mara moja wakati hidenjia imeitwa.
hidden.bs.offcanvas Tukio hili linafutwa wakati kipengele cha offcanvas kimefichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).
hidePrevented.bs.offcanvas Tukio hili hutupwa wakati turubai inaonyeshwa, mandhari yake ni staticna kubofya nje ya turubai kutekelezwa. Tukio pia huwashwa wakati kitufe cha kutoroka kinapobonyezwa na keyboardchaguo limewekwa kuwa false.
show.bs.offcanvas Tukio hili huwaka mara moja wakati shownjia ya mfano inaitwa.
shown.bs.offcanvas Tukio hili linafutwa wakati kipengele cha offcanvas kimefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})