Tīpoka ki te ihirangi matua Tīpoka ki te whakaterenga tuhinga
Check
in English

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, runga, 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.

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

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

Panuku tinana

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

Offcanvas me te panuku tinana

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

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>

Te panuku tinana me te papamuri

Ka taea hoki e koe te <body>panuku me te papamuri kitea.

Papamuri me te panuku

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

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>

Papamuri pateko

Ina tautuhia te papamuri ki te pateko, e kore e kati te papamuri ina pao ana ki waho.

Kowekeweke
E kore ahau e kati ki te pao koe ki waho i ahau.
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>

Te kanapa pouri

Kua taapirihia ki te v5.2.0

Hurihia te ahua o nga kanapa me nga taputapu kia pai ake ai ki nga horopaki rereke penei i nga pae whakatere pouri. I konei ka taapirihia e matou .text-bg-darkki te .offcanvasme .btn-close-whitete .btn-closemo te hanga tika me te kanapa pouri. Mena kei a koe nga takahanga kei roto, whakaarohia te taapiri atu .dropdown-menu-darkki .dropdown-menu.

Kowekeweke

Whakatakotoria he ihirangi ki konei.

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>

Whakautu

Kua taapirihia ki te v5.2.0

Ka huna e nga karaehe offcanvas urupare nga ihirangi kei waho o te tauranga tirohanga mai i te waahi pakaru kua tohua me te heke iho. I runga ake i tera waahi pakaru, ka rite te ahua o nga mea o roto. Hei tauira, ka .offcanvas-lghuna i nga ihirangi i roto i te kanapa i raro i te lgwaahi pakaru, engari ka whakaatu i nga ihirangi kei runga ake i te lgwaahi wehenga.

Whakarahihia to kaitirotiro hei whakaatu i te takahuri offcanvas urupare.
Urupare ki waho canvas

He ihirangi tenei i roto i te .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>

E waatea ana nga karaehe offcanvas urupare puta noa mo ia waahi wehenga.

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

Whakanoho

Karekau he whakaurunga taunoa mo nga waahanga offcanvas, no reira me taapiri koe i 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.

Te tihi o waho
...
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>
Ko waho matau
...
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>
Ko waho o raro
...
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>

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.

CSS

Taurangi

Kua taapirihia ki te v5.2.0

Hei waahanga o te huarahi rerekee CSS a Bootstrap, kei te whakamahi a offcanvas i nga taurangi CSS a-rohe .offcanvasmo te whakapai ake i te waa-tuuturu. Ko nga uara mo nga taurangi CSS ka whakatauhia ma te Sass, no reira kei te tautoko tonu te whakaritenga Sass.

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

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

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-topka huna i te kanapa ki runga
  • .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

Takahuri

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.

Whakakore

Ka taea te whakakore me te datahuanga i runga i te paatene i roto i te kanapa waho e whakaatu ana i raro nei:

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

i runga ranei i tetahi patene kei waho o te kanapa ma te whakamahi i nga data-bs-targetmea e whakaatuhia ana i raro nei:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Ahakoa e tautokohia ana nga huarahi e rua ki te whakakore i te kanapa o waho, kia maumahara ko te whakakore i waho o te kanapa karekau e taurite ki te tauira korero (tauira) Aratohu Arahi Kaituhi ARIA . Mahia tenei i runga i to tupono.

Ma te JavaScript

Whakahohe ā-ringa ki:

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

Kōwhiringa

I te mea ka tukuna nga whiringa ma nga huanga raraunga, JavaScript ranei, ka taea e koe te taapiri i tetahi ingoa whiringa ki data-bs-, penei i te data-bs-animation="{value}". Kia mohio koe ki te whakarereke i te momo keehi o te ingoa whiringa mai i te " CamelCase " ki te " kebab-case " ka tukuna nga whiringa ma nga huanga raraunga. Hei tauira, whakamahia data-bs-custom-class="beautifier"hei utu mo data-bs-customClass="beautifier".

Mai i te Bootstrap 5.2.0, ka tautoko nga waahanga katoa i tetahi huanga raraunga kua rahuitia hei whakamatautaudata-bs-config ka taea te whakanoho i te whirihoranga waahanga ngawari hei aho JSON. Ina he huānga data-bs-config='{"delay":0, "title":123}'me data-bs-title="456"nga huanga, ko te titleuara whakamutunga 456ko nga huanga raraunga motuhake ka takahia nga uara kua hoatu ki runga data-bs-config. I tua atu, ka taea e nga huanga raraunga o mua te whakanoho i nga uara JSON penei i te data-bs-delay='{"show":0,"hide":150}'.

Ingoa Momo Taunoa Whakaahuatanga
backdrop boolean te aho raneistatic true Hoatu he papamuri ki te tinana i te wa e tuwhera ana te kanapa. Arā , staticwhakawhāitihia he papamuri e kore e kati i te kanapa waho ina pawhiria.
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:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Tikanga Whakaahuatanga
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.
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.offcanvasputa o te 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.offcanvasputa o te takahanga).
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.offcanvaste hidden.bs.offcanvastakahanga).

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
hide.bs.offcanvas Ka pupuhihia tenei kaupapa i te wa hidei 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).
hidePrevented.bs.offcanvas Ka pupuhihia tenei takahanga i te wa e whakaatuhia ana staticte papamuri, ka mahia he paato i waho o te kanapa. Ka puhia ano te takahanga ina pehia te ki mawhiti ka whakatauhia te keyboardwhiringa ki false.
show.bs.offcanvas Ka pupuhi tenei takahanga ina ka showkarangahia 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). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})