in English

Nje ya turubai

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

Katika ukurasa huu

Inavyofanya kazi

Offcanvas ni sehemu ya utepe inayoweza kugeuzwa kupitia JavaScript ili kuonekana kutoka upande wa kushoto, kulia, 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 modi, ni turubai moja tu ya nje inaweza 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.

Maudhui ya offcanvas huenda hapa. Unaweza kuweka takriban kijenzi chochote cha Bootstrap au vipengee maalum hapa.

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

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

Baadhi ya maandishi kama kishika nafasi. Katika maisha halisi unaweza kuwa na vipengele ambavyo umechagua. Kama, maandishi, picha, orodha, nk.

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

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.

...

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

...

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

...

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

Mandhari

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

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

.....

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

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

Ufikivu

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

Sass

Vigezo

$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-bottomhuficha turubai chini

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

Kupitia sifa za data

Geuza

Ongeza data-bs-toggle="offcanvas"na a 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 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 muundo wa kidadisi cha WAI-ARIA . Fanya hivi kwa hatari yako mwenyewe.

Kupitia JavaScript

Washa wewe mwenyewe na:

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

Chaguo

Chaguzi zinaweza kupitishwa kupitia sifa za data au JavaScript. Kwa sifa za data, ongeza jina la chaguo kwa data-bs-, kama katika data-bs-backdrop="".

Jina	Aina	Chaguomsingi	Maelezo
`backdrop`	boolean	`true`	Tumia mandhari kwenye mwili wakati offcanvas imefunguliwa
`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:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Njia	Maelezo
`toggle`	Hugeuza kipengele cha offcanvas kuonyeshwa au kufichwa. Hurejesha kwa anayepiga kabla kipengele cha offcanvas hakijaonyeshwa au kufichwa (yaani kabla ya tukio `shown.bs.offcanvas`au `hidden.bs.offcanvas`tukio).
`show`	Inaonyesha kipengele cha offcanvas. Hurejesha kwa anayepiga kabla kipengele cha offcanvas hakijaonyeshwa (yaani kabla ya `shown.bs.offcanvas`tukio kutokea).
`hide`	Huficha kipengele cha offcanvas. Hurejesha kwa anayepiga kabla kipengele cha offcanvas hakijafichwa (yaani kabla ya `hidden.bs.offcanvas`tukio kutokea).
`getInstance`	Njia tuli ambayo hukuruhusu kupata mfano wa offcanvas unaohusishwa na kipengee cha DOM
`getOrCreateInstance`	Njia tuli ambayo hukuruhusu kupata mfano wa offcanvas unaohusishwa na kipengee cha DOM, au kuunda mpya ikiwa haikuanzishwa.

Matukio

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

Aina ya tukio	Maelezo
`show.bs.offcanvas`	Tukio hili huwaka mara moja wakati `show`njia ya mfano inaitwa.
`shown.bs.offcanvas`	Tukio hili huondolewa wakati kipengele cha offcanvas kimefanywa kuonekana kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).
`hide.bs.offcanvas`	Tukio hili linafukuzwa mara moja wakati `hide`njia imeitwa.
`hidden.bs.offcanvas`	Tukio hili hutupwa wakati kipengele cha offcanvas kimefichwa kutoka kwa mtumiaji (itasubiri mabadiliko ya CSS kukamilika).

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Nje ya turubai

Inavyofanya kazi

Mifano

Vipengele vya Offcanvas

Nje ya turubai

Onyesho la moja kwa moja

Nje ya turubai

Uwekaji

Juu ya turubai

Offcanvas kulia

Chini ya turubai

Mandhari

Imepakwa rangi na kusongesha

Offcanvas na mandhari

Mandhari yenye kusogeza

Ufikivu

Sass

Vigezo

Matumizi

Kupitia sifa za data

Geuza

Ondoa

Kupitia JavaScript

Chaguo

Mbinu

Njia za Asynchronous na mabadiliko

Matukio