Offcanvas

Ibni sidebars moħbija fil-proġett tiegħek għan-navigazzjoni, shopping carts, u aktar bi ftit klassijiet u l-plugin JavaScript tagħna.

Fuq din il-paġna

Kif taħdem

Offcanvas huwa komponent tal-istrixxa tal-ġenb li jista' jinbidel permezz ta' JavaScript biex jidher mit-tarf tax-xellug, tal-lemin, ta' fuq jew ta' isfel tal-viewport. Buttuni jew ankri jintużaw bħala triggers li huma mehmuża ma 'elementi speċifiċi li taqleb, u dataattributi jintużaw biex jinvokaw JavaScript tagħna.

Offcanvas jaqsam xi wħud mill-istess kodiċi JavaScript bħall-modali. Kunċettwalment, huma pjuttost simili, iżda huma plugins separati.
Bl-istess mod, xi sors Sass għall-istili u d-dimensjonijiet ta 'offcanvas jintirtu mill-varjabbli tal-modal.
Meta jintwera, offcanvas jinkludi sfond default li jista' jiġi kklikkjat biex jaħbi l-offcanvas.
Simili għall-modali, offcanvas wieħed biss jista' jintwera kull darba.

Irjus up! Minħabba kif is-CSS jimmaniġġja l-animazzjonijiet, ma tistax tuża marginjew translatefuq .offcanvaselement. Minflok, uża l-klassi bħala element indipendenti tat-tgeżwir.

L-effett ta 'animazzjoni ta' dan il-komponent jiddependi fuq il prefers-reduced-motion-mistoqsija tal-midja. Ara t- taqsima tal-mozzjoni mnaqqsa tad-dokumentazzjoni tagħna dwar l-aċċessibbiltà .

Eżempji

Komponenti offcanvas

Hawn taħt hemm eżempju offcanvas li jidher awtomatikament (permezz ta' .showfuq .offcanvas). Offcanvas jinkludi appoġġ għal header b'buttuna mill-qrib u klassi tal-ġisem fakultattiva għal xi inizjali padding. Nissuġġerixxu li tinkludi headers offcanvas b'azzjonijiet ta' ċaħda kull meta jkun possibbli, jew tipprovdi azzjoni ta' ċaħda espliċita.

Il-kontenut għall-offcanvas imur hawn. Tista 'tpoġġi kważi kull komponent Bootstrap jew elementi tad-dwana hawn.

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 live

Uża l-buttuni hawn taħt biex turi u taħbi element offcanvas permezz ta' JavaScript li jbiddel il- .showklassi fuq element mal- .offcanvasklassi.

.offcanvasjaħbi l-kontenut (default)
.offcanvas.showjuri kontenut

Tista' tuża link bl- hrefattribut, jew buttuna bl- data-bs-targetattribut. Fiż-żewġ każijiet, data-bs-toggle="offcanvas"huwa meħtieġ.

Rabta ma href

Xi test bħala placeholder. Fil-ħajja reali jista' jkollok l-elementi li għażilt. Bħal, test, stampi, listi, eċċ.

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>

Scrolling tal-ġisem

L-iskrolljar tal- <body>element huwa diżattivat meta offcanvas u l-isfond tiegħu jkunu viżibbli. Uża l- data-bs-scrollattribut biex tippermetti <body>scrolling.

Ipprova skrollja l-bqija tal-paġna biex tara din l-għażla fl-azzjoni.

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>

Scrolling tal-ġisem u sfond

Tista 'wkoll tippermetti <body>scrolling bi sfond viżibbli.

Ipprova skrollja l-bqija tal-paġna biex tara din l-għażla fl-azzjoni.

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>

Sfond statiku

Meta l-isfond ikun issettjat għal statiku, l-offcanvas ma jagħlaqx meta tikklikkja barra minnu.

Mhux se nagħlaq jekk tikklikkja barra minni.

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>

Offcanvas skur

Miżjud fi v5.2.0

Ibdel id-dehra ta 'offcanvases b'utilitajiet biex tqabbelhom aħjar ma' kuntesti differenti bħal navbars skuri. Hawnhekk inżidu .text-bg-darkma 'l- .offcanvasu .btn-close-whitegħall .btn-close-grafika xierqa b'offcanvas skur. Jekk għandek dropdowns fi ħdan, ikkunsidra li żżid ukoll .dropdown-menu-darkma' .dropdown-menu.

Poġġi kontenut offcanvas hawn.

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>

Jirrispondi

Miżjud fi v5.2.0

Klassijiet offcanvas li jirreaġixxu jaħbu l-kontenut barra l-viewport minn breakpoint speċifikat u 'l isfel. Fuq dak il-punt ta' waqfien, il-kontenut ġewwa se jġib ruħu bħas-soltu. Pereżempju, .offcanvas-lgjaħbi l-kontenut f'kanvas offcanvas taħt il- punt ta' lgwaqfien, iżda juri l-kontenut 'il fuq mill- punt ta' lgwaqfien.

Id-daqs tal-browser tiegħek biex turi l-toggle offcanvas li jirrispondu.

Dan huwa kontenut fi ħdan .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>

Klassijiet offcanvas li jirrispondu huma disponibbli madwar għal kull breakpoint.

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

Pjazzament

M'hemm l-ebda tqegħid default għall-komponenti offcanvas, għalhekk trid iżżid waħda mill-klassijiet modifikaturi hawn taħt.

.offcanvas-startipoġġi barra l-kanvas fuq ix-xellug tal-faċċata (muri hawn fuq)
.offcanvas-endipoġġi offcanvas fuq il-lemin tal-viewport
.offcanvas-topipoġġi offcanvas fuq il-quċċata tal-viewport
.offcanvas-bottomipoġġi offcanvas fil-qiegħ tal-viewport

Ipprova l-eżempji ta 'fuq, tal-lemin u ta' isfel hawn taħt.

...

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>

Aċċessibilità

Peress li l-panel offcanvas huwa kunċettwalment dialog modali, kun żgur li żżid aria-labelledby="..."—b'referenza għat-titlu offcanvas—ma' .offcanvas. Innota li m'għandekx bżonn iżżidrole="dialog" peress li aħna diġà nżiduha permezz ta' JavaScript.

CSS

Varjabbli

Miżjud fi v5.2.0

Bħala parti mill-approċċ tal-varjabbli tas-CSS li qed jevolvu ta' Bootstrap, offcanvas issa juża varjabbli tas-CSS lokali fuq .offcanvasgħal customization imtejjeb f'ħin reali. Il-valuri għall-varjabbli CSS huma stabbiliti permezz ta 'Sass, għalhekk il-personalizzazzjoni ta' Sass għadha appoġġjata wkoll.

  --#{$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 varjabbli

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

Użu

Il-plugin offcanvas juża ftit klassijiet u attributi biex jimmaniġġja l-irfigħ tqil:

.offcanvasjaħbi l-kontenut
.offcanvas.showjuri l-kontenut
.offcanvas-startjaħbi l-offcanvas fuq ix-xellug
.offcanvas-endjaħbi l-offcanvas fuq il-lemin
.offcanvas-topjaħbi l-offcanvas fuq nett
.offcanvas-bottomjaħbi l-offcanvas fil-qiegħ

Żid buttuna tkeċċi bl- data-bs-dismiss="offcanvas"attribut, li tixpruna l-funzjonalità JavaScript. Kun żgur li tuża l- <button>element miegħu għal imġieba xierqa fl-apparati kollha.

Via attributi tad-data

Toggle

Żid data-bs-toggle="offcanvas"u a data-bs-targetjew hrefmal-element biex awtomatikament tassenja l-kontroll ta 'element offcanvas wieħed. L- data-bs-targetattribut jaċċetta selettur CSS biex japplika l-offcanvas għalih. Kun żgur li żżid il-klassi offcanvasmal-element offcanvas. Jekk tixtieq li tiftaħ awtomatikament, żid il-klassi addizzjonalishow .

Tkeċċi

It-tkeċċija tista' tinkiseb bl- dataattribut fuq buttuna fi ħdan l-offcanvas kif muri hawn taħt:

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

jew fuq buttuna barra l-offcanvas billi tuża data-bs-targetkif muri hawn taħt:

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

Filwaqt li ż-żewġ modi biex titneħħa offcanvas huma appoġġjati, żomm f'moħħok li t-tkeċċija minn barra offcanvas ma taqbilx mal- mudell tad-djalogu (modali) tal-Gwida tal-Prattiċi tal-Awtur ARIA . Agħmel dan bir-riskju tiegħek.

Via JavaScript

Ippermetti manwalment ma':

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

Għażliet

Peress li l-għażliet jistgħu jiġu mgħoddija permezz ta' attributi tad-dejta jew JavaScript, tista' tehmeż isem ta' għażla ma' data-bs-, bħal f' data-bs-animation="{value}". Kun żgur li tbiddel it-tip tal-każ tal-isem tal-għażla minn " camelCase " għal " kebab-case " meta tgħaddi l-għażliet permezz tal-attributi tad-dejta. Per eżempju, uża data-bs-custom-class="beautifier"minflok data-bs-customClass="beautifier".

Minn Bootstrap 5.2.0, il-komponenti kollha jappoġġaw attribut ta' data riżervat sperimentalidata-bs-config li jista' jospita konfigurazzjoni ta' komponent sempliċi bħala string JSON. Meta element ikollu data-bs-config='{"delay":0, "title":123}'u data-bs-title="456"attributi, il- titlevalur finali se jkun 456u l-attributi tad-dejta separati jegħlbu l-valuri mogħtija fuq data-bs-config. Barra minn hekk, l-attributi tad-dejta eżistenti jistgħu jospitaw valuri JSON bħal data-bs-delay='{"show":0,"hide":150}'.

Isem	Tip	Default	Deskrizzjoni
`backdrop`	boolean jew is-sekwenza`static`	`true`	Applika sfond fuq il-ġisem waqt li l-offcanvas ikun miftuħ. Inkella, speċifika `static`għal sfond li ma jagħlaqx l-offcanvas meta tagħfas.
`keyboard`	boolean	`true`	Jagħlaq il-offcanvas meta tagħfas iċ-ċavetta tal-ħarba.
`scroll`	boolean	`false`	Ħalli l-iskrolljar tal-ġisem waqt li l-offcanvas ikun miftuħ.

Metodi

Metodi asinkroniċi u tranżizzjonijiet

Il-metodi kollha tal-API huma asinkroniċi u jibdew transizzjoni . Jirritornaw għand min iċempel hekk kif tinbeda t-tranżizzjoni iżda qabel ma tispiċċa . Barra minn hekk, sejħa ta' metodu fuq komponent ta' tranżizzjoni se tiġi injorata .

Ara d-dokumentazzjoni JavaScript tagħna għal aktar informazzjoni .

Jattiva l-kontenut tiegħek bħala element offcanvas. Jaċċetta għażliet fakultattivi object.

Tista' toħloq istanza offcanvas mal-kostruttur, pereżempju:

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

Metodu	Deskrizzjoni
`getInstance`	Metodu statiku li jippermettilek tikseb l-istanza offcanvas assoċjata ma 'element DOM.
`getOrCreateInstance`	Metodu statiku li jippermettilek li tikseb l-istanza offcanvas assoċjata ma 'element DOM, jew toħloq waħda ġdida f'każ li ma kienx inizjalizzat.
`hide`	Jaħbi element offcanvas. Jirritorna lil min iċempel qabel ma l-element offcanvas fil-fatt ġie moħbi (jiġifieri qabel ma `hidden.bs.offcanvas`jseħħ l-avveniment).
`show`	Juri element offcanvas. Jirritorna lil min iċempel qabel ma l-element offcanvas fil-fatt intwera (jiġifieri qabel ma `shown.bs.offcanvas`jseħħ l-avveniment).
`toggle`	Jiddawwar element barra mill-kanvas biex jintwera jew moħbi. Jirritorna lil min iċempel qabel ma l-element offcanvas fil-fatt ġie muri jew moħbi (jiġifieri qabel ma jseħħ l-avveniment `shown.bs.offcanvas`jew ).`hidden.bs.offcanvas`

Avvenimenti

Il-klassi offcanvas ta 'Bootstrap tesponi ftit avvenimenti biex tgħaqqad il-funzjonalità offcanvas.

Tip ta' avveniment	Deskrizzjoni
`hide.bs.offcanvas`	Dan l-avveniment jiġi sparat immedjatament meta l- `hide`metodu jkun ġie msejjaħ.
`hidden.bs.offcanvas`	Dan l-avveniment jiġi sparat meta element offcanvas ikun ġie moħbi mill-utent (se jistenna li jitlestew it-tranżizzjonijiet CSS).
`hidePrevented.bs.offcanvas`	Dan l-avveniment jiġi sparat meta jintwera l-offcanvas, l-isfond tiegħu jkun `static`u ssir ikklikkja barra mill-offcanvas. L-avveniment jiġi sparat ukoll meta ċ-ċavetta tal-ħarba tiġi ppressata u l- `keyboard`għażla tkun issettjata għal `false`.
`show.bs.offcanvas`	Dan l-avveniment jispara immedjatament meta `show`jissejjaħ il-metodu tal-istanza.
`shown.bs.offcanvas`	Dan l-avveniment jiġi sparat meta element offcanvas ikun sar viżibbli għall-utent (se jistenna li t-tranżizzjonijiet CSS jitlestew).

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

Offcanvas

Kif taħdem

Eżempji

Komponenti offcanvas

Offcanvas

Demo live

Offcanvas

Scrolling tal-ġisem

Offcanvas bi scrolling tal-ġisem

Scrolling tal-ġisem u sfond

Sfond bi scrolling

Sfond statiku

Offcanvas

Offcanvas skur

Offcanvas

Jirrispondi

Offcanvas li jirrispondu

Pjazzament

Fuq offcanvas

Offcanvas dritt

Offcanvas qiegħ

Aċċessibilità

CSS

Varjabbli

Sass varjabbli

Użu

Via attributi tad-data

Toggle

Tkeċċi

Via JavaScript

Għażliet

Metodi

Metodi asinkroniċi u tranżizzjonijiet

Avvenimenti