Mafere na isi ọdịnaya Gaa na ntugharị docs
Check
in English

Offcanvas

Jiri klaasị ole na ole na ngwa mgbakwunye Javascript wulite akụkụ zoro ezo n'ime ọrụ gị maka ịnyagharị, ụgbọ ịzụ ahịa na ihe ndị ọzọ.

Na ibe a

Ka o si arụ ọrụ

Offcanvas bụ akụkụ akụkụ nke enwere ike ịtụgharị site na Javascript ka ọ pụta n'akụkụ aka ekpe, aka nri, n'elu, ma ọ bụ ala ala nke ebe nlele. A na-eji bọtịnụ ma ọ bụ arịlịka dị ka ihe na-akpali akpali nke etinyere na ihe ụfọdụ ị na-atụgharị, yana datanjirimara a na-eji kpọkuo Javascript anyị.

  • Offcanvas na-ekerịta ụfọdụ koodu Javascript dị ka modal. N'echiche, ha yiri nnọọ, mana ha bụ plugins dị iche iche.
  • N'otu aka ahụ, a na-eketa ụfọdụ mgbanwe Sass maka ụdị na akụkụ nke offcanvas site na mgbanwe modal.
  • Mgbe egosiri, offcanvas na-agụnye ndabere ndabere nke enwere ike ịpị iji zoo enyo ahụ.
  • Yiri modal, ọ bụ naanị otu oyi akwa ka enwere ike igosi n'otu oge.

Welie isi elu! Nyere ka CSS si ejikwa animation, ị nweghị ike iji marginma ọ bụ translatena .offcanvasmmewere. Kama, jiri klaasị ahụ dị ka ihe mkpuchi nwere onwe.

Mmetụta animation nke akụrụngwa a dabere na prefers-reduced-motionajụjụ mgbasa ozi. Hụ akụkụ ngagharị ewelatala nke akwụkwọ nnweta anyị .

Ihe atụ

Ngwa ndị dịpụrụ adịpụ

N'okpuru ebe a bụ ọmụmaatụ offcanvas nke egosiri na ndabara (site .showna .offcanvas). Offcanvas gụnyere nkwado maka nkụnye eji isi mee nke nwere bọtịnụ nso yana klaasị ahụ nhọrọ maka ụfọdụ mbido padding. Anyị na-atụ aro ka ị tinye isi ihe ndị dịpụrụ adịpụ na omume ịchụpụ mgbe ọ bụla enwere ike, ma ọ bụ wepụta mmemme ịchụpụ nke ọma.

Offcanvas
Ọdịnaya maka offcanvas na-aga ebe a. Ị nwere ike idowe ihe dị ka akụrụngwa Bootstrap ọ bụla ma ọ bụ ihe omenala ebe a.
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>

Ihe ngosi dị ndụ

Jiri bọtịnụ dị n'okpuru ka igosi ma zoo ihe dịpụrụ adịpụ site na Javascript nke na-atụgharị .showklaasị na mmewere ya na .offcanvasklaasị.

  • .offcanvasna-ezobe ọdịnaya (nke ndabara)
  • .offcanvas.showna-egosi ọdịnaya

Ị nwere ike iji njikọ nwere hrefnjirimara, ma ọ bụ bọtịnụ nwere data-bs-targetàgwà ahụ. N'okwu abụọ a, data-bs-toggle="offcanvas"achọrọ ya.

Njikọ na href
Offcanvas
Ụfọdụ ederede dị ka ebe nchekwa. Na ndụ n'ezie ị nwere ike ịnwe ihe ndị ị họọrọ. Dị ka, ederede, onyonyo, ndepụta, wdg.
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>

Mpịakọta ahụ

Akwụsịghị ịpịgharị <body>ihe ahụ mgbe a na-ahụ ihe dịpụrụ adịpụ na ebe ndabere ya. Jiri data-bs-scrollnjirimara iji mee ka <body>ịpịgharịa.

Offcanvas nwere mpịakọta ahụ

Gbalịa ịpịgharịa na ibe ndị ọzọ ka ịhụ nhọrọ a na-arụ ọrụ.

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>

Mpịakọta ahụ na azụ azụ

Ị nwekwara ike mee ka <body>ịpịgharịa ya na ebe a na-ahụ anya.

Backdrop nwere mpịakọta

Gbalịa ịpịgharịa na ibe ndị ọzọ ka ịhụ nhọrọ a na-arụ ọrụ.

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>

Ebe static

Mgbe atọrọ backdrop ka ọ dị static, offcanvas agaghị emechi mgbe ịpị na mpụga ya.

Offcanvas
Agaghị m emechi ma ọ bụrụ na ị pịa n'èzí m.
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>

Akara gbara ọchịchịrị

Agbakwunyere na v5.2.0

Gbanwee ọdịdị nke offcanvases na akụrụngwa iji dabaa nke ọma na ọnọdụ dị iche iche dị ka ụgbọ mmiri gbara ọchịchịrị. N'ebe a, anyị na-agbakwunye .text-bg-darkna .offcanvasna .btn-close-whitemaka .btn-closenhazi nke ọma na akwa mkpuchi gbara ọchịchịrị. Ọ bụrụ na ị nwere ọdịda n'ime, tụlee ịgbakwunye .dropdown-menu-darkna .dropdown-menu.

Offcanvas

Debe ọdịnaya na-apụ apụ ebe a.

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>

Na-anabata

Agbakwunyere na v5.2.0

Klas ndị na-anabata nke ọma na-ezobe ọdịnaya n'èzí ihe nlele site na nkwụsịtụ na ala akọwapụtara. N'elu ebe nkwụsịtụ ahụ, ihe dị n'ime ya ga-eme ka ọ dị na mbụ. Dịka ọmụmaatụ, .offcanvas-lgna-ezobe ọdịnaya n'ime oghere dị n'okpuru ebe lgnkwụsịtụ, mana na-egosi ọdịnaya dị n'elu ebe lgnkwụsịtụ.

Hagharịa nha ihe nchọgharị gị iji gosi ntụgharị ihu kanvas na-anabata.
Offcanvas na-anabata

Nke a bụ ọdịnaya n'ime .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>

Klas ndị na-anabata enyo dị n'ofe ebe nkwụsịtụ ọ bụla.

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

Ndokwa

Enweghị ebe ndabere maka ihe ndị na-apụ apụ, yabụ ị ga-agbakwunye otu n'ime klaasị mgbanwe n'okpuru.

  • .offcanvas-startdowe anya n'aka ekpe nke ebe nlele (egosiri n'elu)
  • .offcanvas-enddowe anyawa n'aka nri nke ebe nlele
  • .offcanvas-topna-etinye offcanvas n'elu ebe nlele
  • .offcanvas-bottomna-etinye offcanvas na ala nke ebe nlele

Nwalee atụ elu, aka nri na ala dị n'okpuru.

N'elu kanvas
...
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>
Apụpụ n'aka nri
...
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>
Offcanvas ala
...
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>

Nnweta

Ebe ọ bụ na panetị offcanvas bụ n'ezie mkparịta ụka modal, jide n'aka na ịtinye aria-labelledby="..."- na-ezo aka aha offcanvas - na .offcanvas. Mara na ịchọghị ịgbakwunye role="dialog"ebe ọ bụ na anyị tinyegoro ya site na Javascript.

CSS

Mgbanwe

Agbakwunyere na v5.2.0

Dịka akụkụ nke ụzọ mgbanwe mgbanwe CSS nke Bootstrap, offcanvas na-eji mgbanwe CSS mpaghara .offcanvasemeziwanye maka nhazi oge. A na-edozi ụkpụrụ maka mgbanwe CSS site na Sass, yabụ ka na-akwado nhazi Sass, kwa.

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

Sass variables

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

Ojiji

Ihe mgbakwunye Offcanvas na-eji klaasị na njirimara ole na ole iji jikwaa ibuli elu:

  • .offcanvasna-ezochi ọdịnaya
  • .offcanvas.showna-egosi ọdịnaya
  • .offcanvas-startna-ezobe ihe mgbochi dị n'aka ekpe
  • .offcanvas-endna-ezobe ihe dịpụrụ adịpụ n'aka nri
  • .offcanvas-topna-ezobe ihe ndị dịpụrụ adịpụ n'elu
  • .offcanvas-bottomna-ezobe ihe mgbochi dị n'okpuru

Tinye bọtịnụ mkpochapụ nwere data-bs-dismiss="offcanvas"njirimara, nke na-ebute ọrụ Javascript. Jide n'aka na ị ga-eji <button>mmewere ya na omume kwesịrị ekwesị n'ofe ngwaọrụ niile.

Site na njirimara data

Tụgharịa

Tinye data-bs-toggle="offcanvas"na a data-bs-targetma ọ bụ hrefna mmewere iji kenye njikwa nke otu ihe na-apụ apụ na-akpaghị aka. Àgwà ahụ data-bs-targetna-anabata onye nhọpụta CSS iji tinye ihe na-apụ apụ na ya. Jide n'aka na ịtinye klaasị offcanvasna mmewere offcanvas. Ọ bụrụ na ị ga-achọ ka ọ meghee, tinye klaasị agbakwunyere show.

Wepụ

Enwere ike nweta nchụpụ site na datanjirimara dị na bọtịnụ dị n'ime oghere dị ka egosiri n'okpuru:

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

ma ọ bụ na bọtịnụ na- abụghị kanvas na-eji ihe a data-bs-targetgosipụtara n'okpuru:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Ọ bụ ezie na a na-akwado ụzọ abụọ a ga-esi chụpụ ihe dịpụrụ adịpụ, buru n'uche na ịchụpụ site na mpụga ihe mkpuchi adịghị adaba na ARIA Authoring Practices Guide dialog (modal) . Mee nke a n'ihe egwu nke gị.

Site JavaScript

Jiri aka jiri:

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

Nhọrọ

Dịka enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript, ị nwere ike itinye aha nhọrọ na data-bs-, dịka na data-bs-animation="{value}". Gbaa mbọ hụ na ị gbanwee ụdị ikpe nke aha nhọrọ site na " camelCase " gaa na " kebab-case " mgbe ị na-agafe nhọrọ site na njirimara data. Dịka ọmụmaatụ, jiri data-bs-custom-class="beautifier"kama data-bs-customClass="beautifier".

Dịka nke Bootstrap 5.2.0, akụrụngwa niile na-akwado njirimara data echekwara nnwaledata-bs-config nke nwere ike idobe nhazi akụrụngwa dị mfe dị ka eriri JSON. Mgbe mmewere nwere data-bs-config='{"delay":0, "title":123}'na data-bs-title="456"njiri mara, uru ikpeazụ titlega-abụ 456na njirimara data dị iche ga-ewepụ ụkpụrụ enyere na data-bs-config. Na mgbakwunye, njirimara data dị adị nwere ike idobe ụkpụrụ JSON dịka data-bs-delay='{"show":0,"hide":150}'.

Aha Ụdị Ọdabara Nkọwa
backdrop boolean ma ọ bụ eriristatic true Tinye ihe ndabere na ahụ mgbe a na-apụ apụ na-emeghe. N'aka nke ọzọ, ezipụta staticmaka backdrop nke na-adịghị emechi oghere anya mgbe ịpịrị ya.
keyboard boolean true Na-emechi oghere anya mgbe ịpịrị igodo mgbapụ.
scroll boolean false Kwe ka ọ pịgharịa ahụ mgbe a na-apụ apụ na-emeghe.

Ụzọ

Ụzọ asynchronous na ntụgharị

Ụzọ API niile enweghị atụ wee malite mgbanwe . Ha na-alaghachikwuru onye na-akpọ oku ozugbo mgbanwe ahụ malitere mana tupu ya akwụsị . Na mgbakwunye, a ga-eleghara oku usoro na mpaghara mgbanwe anya .

Hụ akwụkwọ Javascript anyị maka ozi ndị ọzọ .

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka ihe na-apụ apụ. Nabata nhọrọ nhọrọ object.

Ị nwere ike iji onye na-ewu ihe mepụta ihe atụ na-apụ apụ, dịka ọmụmaatụ:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Usoro Nkọwa
getInstance Usoro kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ anya nke jikọtara ya na mmewere DOM.
getOrCreateInstance Usoro kwụ ọtọ nke na-enye gị ohere ịnweta ihe atụ anya nke DOM, ma ọ bụ mepụta nke ọhụrụ ma ọ bụrụ na ebidoghị ya.
hide Na-ezobe mmewere apụọ. Na-alaghachikwute onye na-akpọ oku tupu ezobe ihe n'èzí (ya bụ, tupu hidden.bs.offcanvasmmemme emee).
show Na-egosi ihe dịpụrụ adịpụ. Na-alaghachikwute onye na-akpọ oku tupu egosipụta ihe ndị dịpụrụ adịpụ (ya bụ tupu shown.bs.offcanvasmmemme emee).
toggle Na-atụgharị ihe dịpụrụ adịpụ na-egosi ma ọ bụ zoo. Na-alaghachikwute onye na-akpọ oku tupu egosiri ma ọ bụ ezobe ihe ndị na-apụ apụ (ya bụ, tupu ihe shown.bs.offcanvasomume hidden.bs.offcanvasahụ emee).

Ihe omume

Klas Offcanvas Bootstrap na-ekpughere ihe omume ole na ole maka itinye aka n'ime ọrụ oyi.

Ụdị mmemme Nkọwa
hide.bs.offcanvas A na-agbapụ ihe omume a ozugbo mgbe hidea na-akpọ usoro ahụ.
hidden.bs.offcanvas A na-agbapụ mmemme a mgbe ezoro ezoro onye ọrụ ihe na-apụ apụ (ga-echere mgbanwe CSS ka agwụchaa).
hidePrevented.bs.offcanvas A na-agbapụ ihe omume a mgbe egosiri offcanvas, ndabere ya bụ staticma pịa n'èzí offcanvas. A na-agbapụkwa mmemme ahụ mgbe ịpịrị igodo ụzọ mgbapụ ma keyboardtọọ nhọrọ ka false.
show.bs.offcanvas Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
shown.bs.offcanvas A na-agbapụ mmemme a mgbe onye ọrụ mere ka ihe na-apụ apụ anya (ga-echere ntụgharị CSS ka agwụchaa). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})