Offcanvas ye

Kɛrɛfɛlan dogolenw jɔ i ka porozɛ kɔnɔ walasa ka taama, sannikɛ wotoro ani fɛn wɛrɛw ni kalan damadɔw ye ani an ka JavaScript plugin.

Nin ɲɛ in kan

A bɛ baara kɛ cogo min na

Offcanvas ye kɛrɛfɛyɔrɔ dɔ ye min bɛ se ka wuli ka bɔ JavaScript fɛ walasa ka bɔ filɛlikɛlan kinin fɛ, kinin fɛ walima duguma da la. Butɔnw walima ankɔriw bɛ Kɛ i n’a fɔ fɛn minnu bɛ nɔrɔ fɛn kɛrɛnkɛrɛnnenw na i bɛ minnu Toggle, ani dataattributes bɛ Kɛ ka an ka JavaScript Weele.

Offcanvas bɛ JavaScript code kelen dɔw Jɛ ni modals ye. Hakilila ta fan fɛ, u bɛ ɲɔgɔn Bɔ kosɛbɛ, nka u ye 'plugin (dakun) danfaralenw ye.
O cogo kelen na, source Sass variables dɔw offcanvas ka cogoyaw ni dimensions bɛ ciyɛn sɔrɔ modal ka variables fɛ.
Ni a jirala, offcanvas kɔnɔ, kɔkannafɛn dɔ bɛ yen min bɛ se ka digi walasa ka offcanvas dogo.
I n’a fɔ modɛliw, offcanvas kelen dɔrɔn de bɛ se ka jira waati kelen na.

Kungolow bɛ wuli! Ni an y’a jateminɛ ko CSS bɛ animationw ɲɛnabɔ cogo min na, i tɛ se ka baara kɛ ni element dɔ ye marginwalima a kan. O nɔ na, baara kɛ ni kalasi ye i n’a fɔ fɛn min bɛ kɛ ka fɛnw siri ɲɔgɔn na.translate.offcanvas

Nin yɔrɔ in ka animation nɔ bɛ bɔ prefers-reduced-motionmedia ɲininkali de la. aw ye an ka sɔrɔli sɛbɛnw yɔrɔ lajɛ min bɛ lamaga dɔgɔyalen na .

Misaliw

Offcanvas yɔrɔw

Misali dɔ bɛ duguma min bɛ bɔ kanpaɲi na min bɛ jira ka kɛɲɛ ni a daminɛ ye (via .showon .offcanvas). Offcanvas kɔnɔ , dɛmɛ bɛ sɔrɔ kuncɛlan dɔ la ni butɔni dadon ye ani farikolo kalasi sugandilen dɔ daminɛ dɔw kama padding. An b’a ɲini aw fɛ aw ka offcanvas kuncɛlanw don ni bɔli walew ye ni a bɛ se ka kɛ tuma o tuma, walima ka bɔli wale jɛlen dɔ di.

Kɔnɔkow ka ɲɛsin offcanvas ma, o bɛ taa yan. Aw bɛ se ka Bootstrap yɔrɔ walima ladamu fɛn o fɛn bila yan.

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

Demo en direct

Baara kɛ ni butɔni minnu bɛ duguma walasa ka fɛn dɔ jira ani k’a dogo JavaScript fɛ min bɛ .showkalasi wuli fɛn dɔ kan ni .offcanvaskalasi ye.

.offcanvaskɔnɔkow dogo (default) .
.offcanvas.showbɛ kɔnɔkow jira

Aw bɛ se ka baara kɛ ni jɛgɛnsira ye ni o fɛn hrefye, walima ni butɔni ye min bɛ ni o fɛn data-bs-targetye. O ko fila bɛɛ la, a data-bs-toggle="offcanvas"wajibiyalen don.

Link ni href ye

Sɛbɛn dɔw bɛ Kɛ yɔrɔ-yɔrɔ-ko ye. Ɲɛnamaya lakika kɔnɔ, i ye fɛn minnu sugandi, i bɛ se ka olu sɔrɔ. I n’a fɔ, sɛbɛnni, ja, lisi, a ɲɔgɔnnaw.

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

Yɔrɔ bilali

Default placement tɛ offcanvas components la, o la i ka kan ka modifier classes dɔ fara a kan min bɛ duguma;

.offcanvas-startbɛ offcanvas bila viewport kinin fɛ (a jiralen bɛ sanfɛ) .
.offcanvas-endbɛ offcanvas bila viewport kinin fɛ
.offcanvas-topbɛ offcanvas bila viewport sanfɛ
.offcanvas-bottombɛ offcanvas bila viewport jukɔrɔ

Aw bɛ sanfɛla, kininbolo ani duguma misaliw lajɛ minnu bɛ duguma.

...

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

Backdrop (Baarakɛcogo).

Eleman in sɛgɛsɛgɛli <body>bɛ bali ni offcanvas n’a kɔkanna bɛ ye. Baara kɛ ni o fɛn data-bs-scrollye walasa ka <body>sɛgɛsɛgɛli kɛ ani data-bs-backdropka kɔkanna fɛnw wuli.

A ɲini ka ɲɛ tɔ lajɛ walasa k’a ye ko nin sugandi in bɛ baara la.

.....

A ɲini ka ɲɛ tɔ lajɛ walasa k’a ye ko nin sugandi in bɛ baara la.

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

Seko ni dɔnko

Ikomi panneau offcanvas ye hakilinata ye modal dialogue ye, aw ye aw jija ka fara aria-labelledby="..."—ka ɲɛsin offcanvas tɔgɔ ma—ka kan .offcanvas. A kɔlɔsi ko i mago t’a la ka dɔ fara a kan role="dialog"bawo an b’a fara a kan kaban JavaScript fɛ.

Sass ye

Yɛlɛma-yɛlɛmaw

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

Baarakɛcogo

Offcanvas plugin bɛ baara Kɛ ni kalasi damadɔ ni fɛn dɔw ye walasa ka girinmanw kɔrɔtacogo ɲɛnabɔ:

.offcanvasbɛ kɔnɔkow dogo
.offcanvas.showbɛ kɔnɔkow jira
.offcanvas-startbɛ offcanvas dogo kinin fɛ
.offcanvas-endbɛ offcanvas dogo kinin fɛ
.offcanvas-bottombɛ offcanvas dogo duguma

Butɔn dɔ fara a kan ka bɔ baara la ni o data-bs-dismiss="offcanvas"fɛnsɛbɛn ye, o min bɛ JavaScript baarakɛcogo daminɛ. Aw ye aw jija ka baara kɛ ni <button>element ye n’a ye walasa ka taamacogo ɲuman sɔrɔ minɛnw bɛɛ kɔnɔ.

Donanw ka fɛnɲɛnɛmaw fɛ

Fàra data-bs-toggle="offcanvas"ni a data-bs-targetwalima hrefka Kɛ element (fɛn) ye walasa ka a yɛrɛma ka control (yɔrɔ) Di fɛn kelen offcanvas (fɛn) ma. Attribut data-bs-targetbɛ sɔn CSS sugandili ma walasa ka offcanvas kɛ a kan. Aw ye aw jija ka kalasi fara offcanvasoffcanvas element kan. N'i b'a fɛ a ka da wuli, i ka kalansen wɛrɛ fara a kan show.

JavaScript fɛ

A bɛ se ka baara kɛ ni bolo ye ni:

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

Sugandili minnu bɛ kɛ

Sugandili bɛ se ka tɛmɛ data attributes walima JavaScript fɛ. Donanw cogoyaw kama, aw bɛ sugandi tɔgɔ fara data-bs-, i n’a fɔ a bɛ cogo min na data-bs-backdrop="".

Tɔ̀gɔ	Ka sɛbɛen masin na	Fɔlɔ	Cogojirali
`backdrop`	boolean ye	`true`	Aw bɛ kɔkanna dɔ kɛ farikolo kan ka a sɔrɔ offcanvas da wulilen don
`keyboard`	boolean ye	`true`	A bɛ offcanvas datugu ni escape key digilen don
`scroll`	boolean ye	`false`	Aw bɛ a to farikolo ka wuli ka a sɔrɔ offcanvas da wulilen don

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

API fɛɛrɛw bɛɛ ye asynchrone ye ani ka tɛmɛsira dɔ daminɛ . u bɛ segin welebaga ma ni wuli daminɛna dɔrɔn nka sanni a ka ban . Ka fara o kan, fɛɛrɛ weleli min bɛ kɛ tɛmɛsira yɔrɔ dɔ kan, o bɛna jate .

aw ye an ka JavaScript sɛbɛnw lajɛ walasa ka kunnafoni wɛrɛw sɔrɔ .

A bɛ i ka kɔnɔkow baara i n’a fɔ offcanvas element. A bɛ sɔn sugandiliw ma minnu bɛ se ka kɛ object.

Aw bɛ se ka instance offcanvas dɔ da ni constructeur ye, misali la:

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

Kɛcogo	Cogojirali
`toggle`	A bɛ fɛn dɔ wuli ka bɔ kanpaɲi na ka taa jira walima ka dogo. A bɛ segin welebaga ma sanni offcanvas element ka jira tiɲɛ na walima ka dogo (o kɔrɔ ye ko sanni `shown.bs.offcanvas`walima `hidden.bs.offcanvas`ko kɛlen ka kɛ).
`show`	A bɛ fɛn dɔ jira min tɛ kanpaɲi ye. A bɛ segin welebaga ma sanni offcanvas element ka jira tiɲɛ na (o kɔrɔ ye ko sanni ko `shown.bs.offcanvas`kɛlen ka kɛ).
`hide`	A bɛ fɛn dɔ dogo min tɛ kanpaɲi ye. A bɛ Segin welebaga ma sani offcanvas element ka dogo tiɲɛ na (o kɔrɔ ye ko sanni ko `hidden.bs.offcanvas`in ka Kɛ).
`getInstance`	Static method min b’a to i bɛ se ka offcanvas instance sɔrɔ min bɛ tali kɛ DOM element dɔ la
`getOrCreateInstance`	Static method min b’a To i bɛ se ka offcanvas instance sɔrɔ min bɛ tali Kɛ DOM element dɔ la, walima ka kura Dabɔ n’a sɔrɔla a ma daminɛ

Ko minnu kɛra

Bootstrap ka offcanvas kalan bɛ ko damadɔw jira kɛnɛ kan walasa ka hooking kɛ offcanvas baarakɛcogo la.

Ko kɛlen suguya	Cogojirali
`show.bs.offcanvas`	O ko in bɛ tasuma Bɔ o yɔrɔnin bɛɛ ni `show`misali fɛɛrɛ Weelera.
`shown.bs.offcanvas`	O ko in bɛ Fɔ ni 'fɛn dɔ Kɛra 'fɛn ye min tɛ 'fɛn ye min bɛ Se ka Ye baarakɛla fɛ (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).
`hide.bs.offcanvas`	O ko in bɛ Fɔ o yɔrɔnin bɛɛ ni `hide`fɛɛrɛ in Weelela.
`hidden.bs.offcanvas`	O ko in bɛ Fɔ ni 'fɛn dɔ dogolen dòn baarakɛla la (a bɛna CSS 'tɛmɛsiraw makɔnɔ u ka ban).

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

Offcanvas ye

A bɛ baara kɛ cogo min na

Misaliw

Offcanvas yɔrɔw

Offcanvas ye

Demo en direct

Offcanvas ye

Yɔrɔ bilali

Offcanvas sanfɛ

Offcanvas kinin fɛ

Offcanvas duguma

Backdrop (Baarakɛcogo).

Kulɛri bɛ kɛ ni sɛbɛnfura ye

Offcanvas ni kɔkanna

Backdroped ni sɛbɛnfura ye

Seko ni dɔnko

Sass ye

Yɛlɛma-yɛlɛmaw

Baarakɛcogo

Donanw ka fɛnɲɛnɛmaw fɛ

JavaScript fɛ

Sugandili minnu bɛ kɛ

Fɛɛrɛw

Fɛɛrɛ minnu tɛ kelen ye ani fɛn caman tigɛli

Ko minnu kɛra