Kowekeweke

Hangaia nga taha taha huna ki roto i to kaupapa mo te whakatere, nga kaata hokohoko, me te maha atu me etahi akomanga me to maatau taputapu JavaScript.

I tenei wharangi

Pehea te mahi

Ko Offcanvas tetahi waahanga paetaha ka taea te takahuri ma te JavaScript kia puta mai i te taha maui, matau, raro ranei o te tauranga tirohanga. Ka whakamahia nga patene, punga ranei hei keu e piri ana ki nga huānga motuhake ka takahurihia e koe, ka datawhakamahia nga huanga hei tono i a maatau JavaScript.

Ka tohatohahia e Offcanvas etahi o nga waehere JavaScript rite ki nga tikanga. Ko te tikanga, he rite tonu, engari he mono motuhake.
Waihoki, ko etahi o nga taurangi Sass puna mo nga ahua me nga inenga o offcanvas he mea tuku iho mai i nga taurangi o te aratau.
Ina whakaaturia ana, kei roto i te offcanvas he papamuri taunoa ka taea te paato ki te huna i te kanapa.
He rite ki nga tikanga, kotahi anake te waarangi ka taea te whakaatu i te wa kotahi.

Mahunga ake! Me pehea te whakahaere a CSS i nga pakiwaituhi, kaore e taea e koe te whakamahi , i runga marginranei translatei tetahi .offcanvashuānga. Engari, whakamahia te akomanga hei huānga takai motuhake.

Ko te awe hākoritanga o tēnei wāhanga e whakawhirinaki ana ki te prefers-reduced-motionuiui pāpāho. Tirohia te waahanga motini whakaheke o a maatau tuhinga whakaurunga .

Tauira

Nga waahanga o waho

Kei raro nei he tauira offcanvas e whakaatuhia ana ma te taunoa (ma .showrunga .offcanvas). Kei roto i te Offcanvas he tautoko mo te pane me te paatene kati me te karaehe tinana mo etahi waahanga tuatahi padding. Ko ta matou whakaaro me whakauru koe i nga pane o waho me nga mahi whakakore i nga wa katoa ka taea, me whakarato ranei i tetahi mahi whakakore.

Ko nga ihirangi mo te offcanvas ka haere ki konei. Ka taea e koe te whakanoho mo tetahi waahanga Bootstrap me nga huānga ritenga ranei ki konei.

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

Whakamahia nga patene i raro nei hei whakaatu me te huna i tetahi huānga offcanvas mā JavaScript e takahuri ai te .showkaraehe i runga i tetahi huānga me te .offcanvasakomanga.

.offcanvashuna ihirangi (taunoa)
.offcanvas.showwhakaatu ihirangi

Ka taea e koe te whakamahi i te hono me te hrefhuanga, te paatene ranei me te data-bs-targethuanga. I roto i nga take e rua, data-bs-toggle="offcanvas"e hiahiatia ana.

Honoa ki te href

Ko etahi kuputuhi hei kaipupuri waahi. I roto i te ora tonu ka taea e koe nga huānga kua tohua e koe. Pērā, kuputuhi, whakaahua, rārangi, aha atu.

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

Whakanoho

Karekau he whakaurunga taunoa mo nga waahanga offcanvas, no reira me taapiri tetahi o nga karaehe whakarereke i raro nei;

.offcanvas-starttuu i te kanapa ki te taha maui o te tauranga tirohanga (kua whakaatuhia ki runga ake nei)
.offcanvas-endtuu i te kanapa ki te taha matau o te tauranga tirohanga
.offcanvas-toptuu i te kanapa ki runga o te tauranga tirohanga
.offcanvas-bottomtuu i te kanapa ki raro o te tauranga tirohanga

Whakamātauria ngā tauira o runga, matau me raro kei raro.

...

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

Papamuri

Ka monoa te panuku i te <body>huānga ina kitea he kanapa me tona papamuri. Whakamahia te data-bs-scrollhuanga ki te takahuri <body>panuku me data-bs-backdropte takahuri i te papamuri.

Whakamātauria te panuku i te toenga o te wharangi kia kite i tenei waahanga e mahi ana.

.....

Whakamātauria te panuku i te toenga o te wharangi kia kite i tenei waahanga e mahi ana.

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

Te urunga

I te mea ko te paewhiri offcanvas he ariā he korero aratau, kia mohio ki aria-labelledby="..."te taapiri —e tohu ana i te taitara offcanvas—ki .offcanvas. Kia mahara kaore koe e hiahia ki te taapiri role="dialog"i te mea kua taapirihia e matou ma te JavaScript.

Sass

Taurangi

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

Whakamahinga

Ka whakamahia e te mono offcanvas etahi karaehe me nga huanga hei hapai i te hiki taumaha:

.offcanvaska huna i te ihirangi
.offcanvas.showwhakaatu te ihirangi
.offcanvas-startka huna i te kanapa kei te taha maui
.offcanvas-endka huna i te kanapa kei te taha matau
.offcanvas-bottomka huna i te kanapa ki raro

Taapirihia he paatene whakakore me te data-bs-dismiss="offcanvas"huanga, ka puta te mahi JavaScript. Me mohio ki te whakamahi i te <button>huānga me taua mea mo te whanonga tika puta noa i nga taputapu katoa.

Ma nga huanga raraunga

Tāpirihia data-bs-toggle="offcanvas"he, he data-bs-targetranei hrefki te huānga ki te tautapa aunoa i te mana o tetahi huānga offcanvas. Ka data-bs-targetwhakaaehia e te huanga he kaikowhiri CSS hei hoatu i te waarangi ki. Kia kaha ki te taapiri i te akomanga offcanvaski te huānga offcanvas. Mena kei te pirangi koe kia tuwhera taunoa, taapirihia te akomanga taapiri show.

Ma te JavaScript

Whakahohe ā-ringa ki:

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

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-bs-, penei i te data-bs-backdrop="".

Ingoa	Momo	Taunoa	Whakaahuatanga
`backdrop`	boolean	`true`	Hoatu he papamuri ki te tinana i te wa e tuwhera ana te kanapa
`keyboard`	boolean	`true`	Ka kati i te kanapa ka pehia te ki mawhiti
`scroll`	boolean	`false`	Whakaaetia te panuku tinana i te wa e tuwhera ana a offcanvas

Nga tikanga

Nga tikanga tukutahi me nga whakawhitinga

Ko nga tikanga API katoa he tukutahi ka timata te whakawhiti . Ka hoki mai ano ki te kaikaranga ina timata te whakawhiti engari i mua i te mutunga . I tua atu, ka warewarehia te karanga tikanga mo tetahi waahanga whakawhiti .

Tirohia ta maatau tuhinga JavaScript mo etahi atu korero .

Whakahohe i to ihirangi hei huānga offcanvas. Ka whakaae ki nga whiringa whiriwhiri object.

Ka taea e koe te hanga i tetahi tauira offcanvas me te kaihanga, hei tauira:

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

Tikanga	Whakaahuatanga
`toggle`	Ka takahuri i tetahi huānga kanapa ki te whakaatu, huna ranei. Ka hoki ki te kaiwaea i mua i te whakaaturanga, huna ranei o te huānga offcanvas (arā, i mua i te puta o `shown.bs.offcanvas`te `hidden.bs.offcanvas`takahanga).
`show`	Ka whakaatu i tetahi huānga o waho. Ka hoki ki te kaiwaea i mua i te whakaaturanga o te huānga offcanvas (arā i mua i te `shown.bs.offcanvas`puta o te takahanga).
`hide`	Hunaia he huānga o waho. Ka hoki ki te kaiwaea i mua i te hunanga o te huānga offcanvas (arā i mua i te `hidden.bs.offcanvas`puta o te takahanga).
`getInstance`	Tikanga pateko e taea ai e koe te tiki i te tauira offcanvas e hono ana ki tetahi huānga DOM
`getOrCreateInstance`	Tikanga pateko e taea ai e koe te tiki i te tauira offcanvas e hono ana ki tetahi huānga DOM, ki te hanga i tetahi mea hou mena kaore i arawhitia

Nga huihuinga

Ko te karaehe offcanvas a Bootstrap e whakaatu ana i etahi huihuinga mo te hono atu ki te mahi offcanvas.

Momo takahanga	Whakaahuatanga
`show.bs.offcanvas`	Ka pupuhi tenei takahanga ina ka `show`karangahia te aratuka tauira.
`shown.bs.offcanvas`	Ka puhia tenei takahanga ina kitea he huānga offcanvas ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS).
`hide.bs.offcanvas`	Ka pupuhihia tenei kaupapa i te wa `hide`i kiia ai te tikanga.
`hidden.bs.offcanvas`	Ka puhia tenei takahanga ina hunahia he huānga offcanvas mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga CSS).

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

Kowekeweke

Pehea te mahi

Tauira

Nga waahanga o waho

Kowekeweke

Demo ora

Kowekeweke

Whakanoho

Te tihi o waho

Ko waho matau

Ko waho o raro

Papamuri

Ka tae ki te panuku

He kanapa waho me te papamuri

He papamuri me te panuku

Te urunga

Sass

Taurangi

Whakamahinga

Ma nga huanga raraunga

Ma te JavaScript

Kōwhiringa

Nga tikanga

Nga tikanga tukutahi me nga whakawhitinga

Nga huihuinga