Offcanvas

Amboary ny sisiny miafina ao amin'ny tetikasanao ho an'ny fitetezana, sarety fiantsenana, ary maro hafa miaraka amin'ny kilasy vitsivitsy sy ny plugin JavaScript.

Amin'ity pejy ity

Ahoana ny fiasan'izany

Offcanvas dia singa sidebar izay azo avadika amin'ny alàlan'ny JavaScript mba hiseho eo amin'ny sisiny havia, havanana, ambony, na ambany amin'ny sisiny. Ny bokotra na vatofantsika dia ampiasaina ho trigger izay miraikitra amin'ny singa manokana avadikao, ary datany toetra dia ampiasaina hiantsoana ny JavaScript.

Offcanvas dia mizara ny sasany amin'ireo kaody JavaScript mitovy amin'ny modals. Raha ny hevitra dia mitovy ihany izy ireo, saingy plugins misaraka.
Torak'izany ihany koa, ny fari-piainan'ny Sass loharano sasany ho an'ny fomba sy ny refin'ny offcanvas dia nolovaina tamin'ny fari-piainan'ny modal.
Rehefa aseho, ny offcanvas dia misy laha-vitrana mahazatra azo kitihina hanafenana ny offcanvas.
Mitovy amin'ny modals, offcanvas iray ihany no azo aseho amin'ny fotoana iray.

Fampitandremana! Raha jerena ny fomba fitantanana ny sary mihetsika ny CSS dia tsy afaka mampiasa marginna translateamin'ny .offcanvassinga iray ianao. Ampiasao kosa ny kilasy ho singa famonosana mahaleo tena.

Miankina amin'ny prefers-reduced-motionfangatahan'ny haino aman-jery ny fiantraikan'ity singa ity. Jereo ny fizarana mihetsika mihena amin'ny antontan-taratasinay momba ny fahafahana miditra .

OHATRA

Offcanvas singa

Ity ambany ity ny ohatra offcanvas izay aseho amin'ny alàlan'ny default (amin'ny alàlan'ny .showon .offcanvas). Ny Offcanvas dia misy fanohanan'ny lohapejy misy bokotra akaiky sy kilasin'ny vatana tsy voatery ho an'ny padding. Manoro hevitra izahay ny hampidiranao lohapejy offcanvas miaraka amin'ny hetsika fandroahana raha azo atao, na manome hetsika fandroahana mazava.

Ny votoatin'ny offcanvas dia mandeha eto. Azonao atao ny mametraka ny singa Bootstrap na singa manokana eto.

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 mivantana

Ampiasao ireo bokotra etsy ambany mba hampisehoana sy hanafenana singa iray ivelan'ny canvas amin'ny alàlan'ny JavaScript izay manodina ny .showkilasy amin'ny singa iray miaraka amin'ny .offcanvaskilasy.

.offcanvasmanafina atiny (default)
.offcanvas.showmampiseho votoaty

Azonao atao ny mampiasa rohy misy ilay hreftoetra, na bokotra misy ilay data-bs-targettoetra. Amin'ireo tranga roa ireo, data-bs-toggle="offcanvas"dia ilaina ny.

Rohy amin'ny href

Lahatsoratra sasany toy ny toerana misy azy. Amin'ny tena fiainana dia afaka manana ireo singa nofidinao ianao. Tahaka, lahatsoratra, sary, lisitra, sns.

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>

Famakiana vatana

Tsy mandeha ny scrolling ilay <body>singa rehefa hita ny offcanvas sy ny lamosiny. Ampiasao ny data-bs-scrolltoetra mba ahafahana <body>mikoriana.

Andramo ny horonan-taratasy sisa amin'ny pejy hahitanao ity safidy ity.

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>

Famakiana vatana sy lamosina

Azonao atao ihany koa ny mamela ny <body>horonan-taratasy miaraka amin'ny lamosina hita maso.

Andramo ny horonan-taratasy sisa amin'ny pejy hahitanao ity safidy ity.

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>

Lavitra static

Rehefa apetraka amin'ny static ny backdrop dia tsy hikatona ny offcanvas rehefa manindry ivelan'ny azy.

Tsy hanakatona aho raha manindry ivelan'ny ahy ianao.

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>

Dark offcanvas

Nampiana v5.2.0

Ovay ny endrik'ireo offcanvases miaraka amin'ny fitaovana ampiasaina mba hampifanaraka azy ireo tsara kokoa amin'ny toe-javatra samihafa toy ny navbar maizina. Eto isika dia manampy .text-bg-darkny .offcanvassy .btn-close-whiteny .btn-closeho amin'ny fomba mety amin'ny offcanvas maizina. Raha manana dropdowns ao anatiny ianao dia diniho koa ny manampy .dropdown-menu-darkny .dropdown-menu.

Apetraho eto ny atiny offcanvas.

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>

manaiky

Nampiana v5.2.0

Ny kilasin'ny offcanvas mamaly dia manafina votoaty ivelan'ny seranan-tsambo avy amin'ny toerana tapaka voatondro ary midina. Eo ambonin'io teboka tapaka io, ny atiny ao anatiny dia hihetsika toy ny mahazatra. Ohatra, .offcanvas-lgmanafina votoaty amin'ny offcanvas eo ambanin'ny teboka tapaka lg, fa mampiseho ny atiny eo ambonin'ny teboka tapaka lg.

Hanova ny haben'ny mpitety tranonkalanao mba hampisehoana ny toggle offcanvas mamaly.

Ity dia votoaty ao anatin'ny .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>

Misy kilasy offcanvas mamaly ho an'ny teboka tsirairay.

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

fametrahana

Tsy misy fametrahana default ho an'ny singa offcanvas, ka tsy maintsy ampidirinao ny iray amin'ireo kilasy fanovana etsy ambany.

.offcanvas-startmametraka offcanvas eo ankavian'ny seranan-tsambo (aseho etsy ambony)
.offcanvas-endapetraka eo amin'ny sisiny ankavanan'ny seranan-tsambo
.offcanvas-topapetraka eo amin'ny tampon'ny seranan-tsambo
.offcanvas-bottomapetraho amin'ny lakandrano eo amin'ny faran'ny seranan-tsambo

Andramo ny ohatra ambony sy havanana ary ambany eto ambany.

...

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>

...

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>

...

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>

Accessibility

Koa satria ny tontolon'ny offcanvas dia fifanakalozan-kevitra amin'ny fomba fijery, aza hadino ny manampy aria-labelledby="..."— manondro ny lohatenin'ny offcanvas — amin'ny .offcanvas. Mariho fa tsy mila manampy ianao role="dialog"satria efa nampianay tamin'ny JavaScript.

CSS

hiovaova

Nampiana v5.2.0

Ao anatin'ny fomba fiovaovan'ny CSS mivoatra an'i Bootstrap, offcanvas izao dia mampiasa ny fari-piadidiana CSS eo an .offcanvas-toerana ho amin'ny fanatsarana amin'ny fotoana tena izy. Ny soatoavina ho an'ny fari-piainan'ny CSS dia apetraka amin'ny alàlan'ny Sass, noho izany dia mbola tohanana ihany koa ny fanamboarana 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};

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;

Fampiasana

Ny plugin offcanvas dia mampiasa kilasy sy toetra vitsivitsy hiatrehana ny fampiakarana mavesatra:

.offcanvasmanafina ny votoatiny
.offcanvas.showmampiseho ny votoatiny
.offcanvas-startmanafina ny offcanvas eo ankavia
.offcanvas-endmanafina ny offcanvas eo ankavanana
.offcanvas-topmanafina ny offcanvas eo ambony
.offcanvas-bottommanafina ny offcanvas eo ambany

Manampia bokotra fandroahana miaraka amin'ny data-bs-dismiss="offcanvas"toetra, izay miteraka ny fampiasa JavaScript. Ataovy azo antoka ny fampiasana ilay <button>singa miaraka aminy mba hahazoana fitondran-tena mety amin'ny fitaovana rehetra.

Amin'ny alàlan'ny data attributes

Toggle

Ampio data-bs-toggle="offcanvas"sy a data-bs-targetna hrefamin'ny singa mba hanendry ho azy ny fanaraha-maso ny singa offcanvas iray. Ny data-bs-targettoetra dia manaiky mpifidy CSS hampiharana ny offcanvas. Ataovy azo antoka ny manampy ny kilasy offcanvasamin'ny singa offcanvas. Raha tianao ny hisokatra ho default dia ampio ny kilasy fanampiny show.

handroaka

Ny fandroahana dia azo atao amin'ny alalan'ny datatoetra amin'ny bokotra iray ao amin'ny offcanvas araka ny aseho eto ambany:

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

na amin'ny bokotra ivelan'ny oncanvas amin'ny fampiasana ny data-bs-targetaseho eto ambany:

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

Na dia samy tohanana aza ny fomba fandroahana offcanvas iray, dia tadidio fa ny fandroahana avy any ivelan'ny offcanvas dia tsy mifanaraka amin'ny lamin'ny fifanakalozan-dresaka (modal) ARIA Authoring Practices Guide . Ataovy amin'ny tenanao manokana izany.

Amin'ny JavaScript

Alefa tanana amin'ny:

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

FANDIKANA

Satria azo ampitaina amin'ny alàlan'ny toetran'ny data na JavaScript ny safidy, azonao atao ny manisy anarana safidy amin'ny data-bs-, toy ny ao amin'ny data-bs-animation="{value}". Ataovy azo antoka fa hanova ny karazana tranga amin'ny anarana safidy avy amin'ny " CamelCase " ho " kebab-case " rehefa mandalo ny safidy amin'ny alàlan'ny toetran'ny data. Ohatra, ampiasao data-bs-custom-class="beautifier"fa tsy data-bs-customClass="beautifier".

Amin'ny Bootstrap 5.2.0, ny singa rehetra dia manohana toetra angon-drakitra natokana ho an'ny fanandramanadata-bs-config izay afaka mametraka ny fandrindrana singa tsotra ho tady JSON. Rehefa manana data-bs-config='{"delay":0, "title":123}'sy data-bs-title="456"toetra ny singa iray, dia ny titlesanda farany 456ary ny toetran'ny angon-drakitra misaraka dia hanongotra ny sanda omena amin'ny data-bs-config. Ankoatr'izay, ny toetran'ny data efa misy dia afaka mametraka ny sanda JSON toy ny data-bs-delay='{"show":0,"hide":150}'.

Anarana	Type	toerana misy anao	Description
`backdrop`	boolean na ny tady`static`	`true`	Asio lafika eo amin'ny vatana raha mbola misokatra ny offcanvas. Raha tsy izany, `static`dia manendry sary iray izay tsy manidy ny offcanvas rehefa kitihina.
`keyboard`	boolean	`true`	Akatona ny offcanvas rehefa tsindriana ny fanalahidin'ny escape.
`scroll`	boolean	`false`	Avelao ny body scrolling raha mbola misokatra ny offcanvas.

fomba

Fomba sy fifindrana asynchronous

Ny fomba API rehetra dia asynchronous ary manomboka tetezamita . Miverina any amin'ny mpiantso izy ireo raha vao manomboka ny tetezamita fa alohan'ny hifarana . Ho fanampin'izany, tsy hojerena ny fiantsoana fomba iray amin'ny singa tetezamita .

Jereo ny antontan-taratasintsika JavaScript raha mila fanazavana fanampiny .

Mampihetsika ny atiny ho singa offcanvas. Manaiky safidy azo atao object.

Azonao atao ny mamorona ohatra offcanvas miaraka amin'ny mpanamboatra, ohatra:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

FOMBA	Description
`getInstance`	Fomba static izay ahafahanao mahazo ny ohatra offcanvas mifandray amin'ny singa DOM.
`getOrCreateInstance`	Fomba static izay ahafahanao mahazo ny ohatra offcanvas mifandray amin'ny singa DOM, na mamorona vaovao raha toa ka tsy natomboka izany.
`hide`	Manafina singa offcanvas. Miverina any amin'ny mpiantso alohan'ny nanafenana ny singa offcanvas (izany hoe talohan'ny `hidden.bs.offcanvas`nitrangan'ny hetsika).
`show`	Mampiseho singa ivelan'ny canvas. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa offcanvas (izany hoe alohan'ny `shown.bs.offcanvas`nitrangan'ny hetsika).
`toggle`	Manova singa offcanvas ho aseho na afenina. Miverina any amin'ny mpiantso alohan'ny hisehoan'ny singa offcanvas na nafenina (izany hoe talohan'ny nitrangan'ny `shown.bs.offcanvas`na `hidden.bs.offcanvas`hetsika).

zava-mitranga

Ny kilasin'ny offcanvas an'ny Bootstrap dia mampiseho hetsika vitsivitsy ho an'ny fampifandraisana amin'ny fiasa offcanvas.

Karazana hetsika	Description
`hide.bs.offcanvas`	Ity hetsika ity dia alefa avy hatrany rehefa `hide`nantsoina ny fomba.
`hidden.bs.offcanvas`	Voaroaka ity hetsika ity rehefa nafenina tamin'ny mpampiasa ny singa offcanvas (hiandry ny fahavitan'ny fifindrana CSS).
`hidePrevented.bs.offcanvas`	Ity hetsika ity dia alefa rehefa aseho ny offcanvas, ny lamosiny `static`ary ny tsindry ivelan'ny offcanvas dia atao. Tafavoaka ihany koa ny hetsika rehefa voatsindry ny fanalahidin'ny fandosirana ary `keyboard`apetraka amin'ny `false`.
`show.bs.offcanvas`	Mirehitra avy hatrany ity hetsika ity rehefa `show`antsoina ny fomba fiasa.
`shown.bs.offcanvas`	Ity hetsika ity dia alefa rehefa misy singa offcanvas naseho ho hitan'ny mpampiasa (hiandry ny fahavitan'ny fifindrana CSS).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

Offcanvas

Ahoana ny fiasan'izany

OHATRA

Offcanvas singa

Offcanvas

Demo mivantana

Offcanvas

Famakiana vatana

Offcanvas misy horonana vatana

Famakiana vatana sy lamosina

Backdrop misy horonana

Lavitra static

Offcanvas

Dark offcanvas

Offcanvas

manaiky

Offcanvas mamaly

fametrahana

Offcanvas ambony

Offcanvas havanana

Offcanvas ambany

Accessibility

CSS

hiovaova

Sass variables

Fampiasana

Amin'ny alàlan'ny data attributes

Toggle

handroaka

Amin'ny JavaScript

FANDIKANA

fomba

Fomba sy fifindrana asynchronous

zava-mitranga