Offcanvas

Bi çend dersan û pêveka meya JavaScript-ê re ji bo navîgasyon, selikên kirrûbirrê, û bêtir di projeya xwe de kêlekên veşartî ava bikin.

Li ser vê rûpelê

Çawa dixebite

Offcanvas hêmanek kêlek e ku meriv dikare bi JavaScript-ê ve were guheztin da ku ji çepê, rastê, jorîn, an jî binê dîmenderê xuya bibe. Bişkok an lenger wekî tetikan têne bikar anîn ku bi hêmanên taybetî yên ku hûn diguhezînin ve têne girêdan, û datataybetmendî têne bikar anîn da ku JavaScript-a me bişopînin.

Offcanvas hin kodên JavaScript-ê wekî modal parve dike. Bi têgînî, ew pir dişibin hev, lê ew pêvekên cihê ne.
Bi heman rengî, hin guhêrbarên Sass ên çavkaniyê yên ji bo şêwaz û pîvanên offcanvas ji guhêrbarên modal têne mîras kirin.
Dema ku tê xuyang kirin, offcanvas paşnavek xwerû vedihewîne ku dikare were klîk kirin da ku offcanvas veşêre.
Mîna modalan, tenê yek offcanvas di carekê de dikare were xuyang kirin.

Serê xwe! Ji ber ku CSS çawa anîmasyonan digire, hûn nekarin hêmanek marginan jî translateli ser bikar bînin. .offcanvasDi şûna wê de, polê wekî hêmanek pêça serbixwe bikar bînin.

Bandora anîmasyonê ya vê hêmanê bi pirsa prefers-reduced-motionmedyayê ve girêdayî ye. Binêre beşa tevgera kêmkirî ya belgeya gihîştina me .

Examples

pêkhateyên Offcanvas

Li jêr mînakek offcanvas heye ku ji hêla xwerû ve tê xuyang kirin (bi riya .show) .offcanvas. Offcanvas ji bo sernavek bi bişkokek nêzîk û çînek laşê vebijarkî ji bo hin destpêkê piştgirî paddingdike. Em pêşniyar dikin ku hûn sernavên offcanvas-ê bi çalakiyên betalkirinê re gava ku gengaz be têxin nav xwe, an jî çalakiyek betalkirina eşkere peyda bikin.

Naveroka ji bo offcanvas diçe vir. Hûn dikarin hema hema her pêkhateyek Bootstrap an hêmanên xwerû li vir bi cîh bikin.

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

Bişkokên li jêr bikar bînin da ku bi JavaScript-ê hêmanek offcanvas-ê nîşan bidin û veşêrin ku .showpolê li ser hêmanek bi .offcanvaspolê re vedişêre.

.offcanvasnaverokê vedişêre (xweserî)
.offcanvas.shownaverokê nîşan dide

Hûn dikarin girêdanek bi hreftaybetmendiyê, an bişkokek bi data-bs-targettaybetmendiyê bikar bînin. Di her du rewşan de, data-bs-toggle="offcanvas"pêdivî ye.

Bi href ve girêdin

Hin nivîs wekî cîhgir. Di jiyana rast de hûn dikarin hêmanên ku we hilbijartine hebin. Wekî, nivîs, wêne, navnîş, hwd.

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>

Body scrolling

Gera <body>hêmanê neçalak e dema ku kanavayek û paşperdeya wê xuya bibin. Taybetmendiyê bikar data-bs-scrollbînin da ku gerok çalak bikin <body>.

Biceribînin ku rûpelê mayî bigerin da ku vê vebijarkê di çalakiyê de bibînin.

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>

Body scrolling and backdrop

Her weha hûn dikarin bi paşnavek <body>xuyangê gerok çalak bikin.

Biceribînin ku rûpelê mayî bigerin da ku vê vebijarkê di çalakiyê de bibînin.

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>

Backdrop statîk

Dema ku paşperdeya li ser statîk tê danîn, dema ku li derveyî wê bitikîne, offcanvas nayê girtin.

Ger hûn li derveyî min bitikînin ez ê negirim.

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

Di v5.2.0 de hate zêdekirin

Bi karûbaran re xuyangê kanavakan biguhezînin da ku wan çêtir bi çarçoveyek cihêreng ên mîna navbarên tarî re hevber bikin. Li vir em ji bo şêwazek rast bi kavilek tarî .text-bg-darkli .offcanvasû .btn-close-whiteto zêde dikin. .btn-closeHeke di hundurê we de dakêşan hene, lê zêde bikin jî .dropdown-menu-darkbifikirin .dropdown-menu.

Naveroka offcanvas li vir bi cih bikin.

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>

Pêrakirin

Di v5.2.0 de hate zêdekirin

Dersên offcanvas-a bersivdar naverok li derveyî dîmenderê ji xalek veqetandî û jêrîn vedişêrin. Li jor wê xala veqetînê, naverokên hundur dê wekî berê tevbigerin. Mînakî, .offcanvas-lgnaverokê di naverdekê de li binê xala veqetînê vedişêre lg, lê naverokê li jor xala veqetînê nîşan dide lg.

Mezinahiya geroka xwe biguhezînin da ku guheztina offcanvas-a bersivdar nîşan bide.

Ev naverok di hundurê de ye .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>

Ji bo her xala veqetandinê dersên offcanvas-a bersivdar hene.

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

Cihkirin

Ji bo pêkhateyên offcanvas cîhek xwerû tune, ji ber vê yekê divê hûn yek ji çînên guhêrbar li jêr zêde bikin.

.offcanvas-startkanavayê li milê çepê yê dîmenderê bi cih dike (li jor tê nîşandan)
.offcanvas-endoffcanvas li rastê dîmenderê cîh dike
.offcanvas-topoffcanvas-ê li jora dîmenderê bi cih dike
.offcanvas-bottomoffcanvas li binê dîmenderê cîh dike

Mînakên jorîn, rast û jêrîn li jêr biceribînin.

...

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>

Gihîştina

Ji ber ku panela offcanvas ji hêla têgihîştî ve diyalogek modal e, bê guman aria-labelledby="..."-sernavê offcanvas-ê referansê- li .offcanvas. Bala xwe bidinê ku hûn ne hewce ne ku lê zêde bikin role="dialog"ji ber ku em berê wê bi JavaScriptê lê zêde dikin.

CSS

Variables

Di v5.2.0 de hate zêdekirin

Wekî beşek ji nêzikbûna guhêrbarên CSS-ê yên pêşveçûyî yên Bootstrap, offcanvas naha guhêrbarên CSS-ê yên herêmî li ser .offcanvasji bo xwerûkirina rast-dema pêşkeftî bikar tîne. Nirxên ji bo guhêrbarên CSS bi Sass ve têne danîn, ji ber vê yekê xwerûkirina Sass hîn jî piştgirî ye.

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

Guherbarên 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;

Bikaranîna

Pêveka offcanvas çend çîn û taybetmendiyan bikar tîne da ku hilgirtina giran bigire:

.offcanvasnaverokê vedişêre
.offcanvas.shownaverokê nîşan dide
.offcanvas-startkanava li milê çepê vedişêre
.offcanvas-endli aliyê rastê kanavayê vedişêre
.offcanvas-topli ser jorê kanavayê vedişêre
.offcanvas-bottomkanava li jêr vedişêre

Bi data-bs-dismiss="offcanvas"taybetmendiyê bişkojek betalkirinê zêde bikin, ku fonksiyona JavaScript-ê vedike. Pê bawer bin ku hûn <button>hêmanê bi wê re bikar bînin ji bo tevgera rast li hemî cîhazan.

Bi taybetmendiyên daneyê

Toggle

Hêmanek data-bs-toggle="offcanvas"û data-bs-targetan jî lê zêde hrefbikin da ku bixweber kontrola yek hêmanek offcanvas veqetînin. Taybetmendî data-bs-targethilbijêrek CSS-ê qebûl dike ku li ser offcanvas-ê bicîh bike. Bawer bikin ku polê offcanvasli hêmana offcanvas zêde bikin. Heke hûn dixwazin ku ew bi xweber vebe, çîna pêvek zêde bikin show.

Berdan

Veqetandin dikare bi datataybetmendiya li ser bişkokek di nav offcanvas de wekî ku li jêr hatî destnîşan kirin were bidestxistin:

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

an li ser bişkokek li derveyî offcanvas -ê data-bs-targetwekî ku li jêr hatî destnîşan kirin bikar bînin:

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

Dema ku her du awayên rakirina kanavayek bêkêmasî têne piştgirî kirin, ji bîr mekin ku derxistina ji derveyî kanavayek bi şêwaza diyalogê (modal) ya Rêbernameya Pratîkên Nivîskariyê ya ARIA re li hev nake . Vê yekê bi rîska xwe bikin.

Bi JavaScript

Bi destan çalak bike bi:

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

Vebijêrk

Ji ber ku vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin, hûn dikarin navek vebijarkê lê zêde bikin data-bs-, wekî di data-bs-animation="{value}". Dema ku vebijarkan bi taybetmendiyên daneyê re derbas bikin, pê ewle bin ku hûn celebê doza navê vebijarkê ji " camelCase " veguherînin " kebab-case ". Mînakî, data-bs-custom-class="beautifier"li şûna bikar bînin data-bs-customClass="beautifier".

Ji Bootstrap 5.2.0-ê, hemî pêkhate taybetmendiyek daneya veqetandî ya ceribandinêdata-bs-config piştgirî dikin ku dikare veavakirina hêmanek hêsan wekî rêzek JSON bihewîne. Dema ku hêmanek hebe data-bs-config='{"delay":0, "title":123}'û data-bs-title="456"taybetmendî hebe, nirxa paşîn titledê bibe 456û taybetmendiyên daneya veqetandî dê nirxên ku li ser hatine dayîn derbas bikin data-bs-config. Digel vê yekê, taybetmendiyên daneya heyî dikarin nirxên JSON ên mîna data-bs-delay='{"show":0,"hide":150}'.

Nav	Awa	Destçûnî	Terîf
`backdrop`	boolean an string`static`	`true`	Dema ku offcanvas vekirî ye paşnavek li ser laş bicîh bikin. Alternatîf, `static`ji bo paşperdeya ku dema ku tê tikandin kanavayê negire diyar bike.
`keyboard`	boolean	`true`	Dema ku bişkojka revînê tê pêlkirin offcanvasê digire.
`scroll`	boolean	`false`	Destûrê bide gerandina laş dema ku offcanvas vekirî ye.

Methods

Rêbaz û veguherînên Asynchronous

Hemî rêbazên API-ê asynkron in û veguherînek dest pê dikin . Gava ku veguhêz dest pê kir lê berî ku biqede ew vedigerin bangkerê . Wekî din, bangek rêbazek li ser pêkhateyek veguhêz dê were paşguh kirin.

Ji bo bêtir agahdarî li belgeya meya JavaScriptê binêre .

Naveroka we wekî hêmanek offcanvas çalak dike. Vebijarkek vebijarkî qebûl objectdike.

Hûn dikarin bi çêker re mînakek offcanvas biafirînin, mînakî:

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

Awa	Terîf
`getInstance`	Rêbaza statîk ku dihêle hûn mînaka offcanvas-ê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin .
`getOrCreateInstance`	Rêbaza statîk a ku dihêle hûn mînaka offcanvas-ê ya ku bi hêmanek DOM-ê ve girêdayî ye bistînin, an heke ew nehatibe destpêkirin yek nû biafirînin .
`hide`	Hêmanek offcanvas vedişêre. Berî ku hêmana offcanvas bi rastî were veşartin (ango berî ku `hidden.bs.offcanvas`bûyer çêbibe) vedigere bangkerê.
`show`	Hêmanek offcanvas nîşan dide. Berî ku hêmana offcanvas bi rastî were xuyang kirin (ango berî ku `shown.bs.offcanvas`bûyer çêbibe) vedigere bangdêr.
`toggle`	Hêmanek offcanvas-ê ji bo xuyang kirin an veşartî vedigire. Berî ku hêmana offcanvas bi rastî were xuyang kirin an veşartin (ango berî ku bûyer `shown.bs.offcanvas`an `hidden.bs.offcanvas`bûyer çêbibe) vedigere bangkerê.

Events

Dersa offcanvas ya Bootstrap çend bûyeran ji bo girêdana fonksiyonên offcanvas eşkere dike.

Cureyê bûyerê	Terîf
`hide.bs.offcanvas`	`hide`Dema ku rêbaz hate gazî kirin ev bûyer yekser tê şewitandin .
`hidden.bs.offcanvas`	Ev bûyer dema ku hêmanek offcanvas ji bikarhêner veşartiye (dê li benda bidawîbûna veguheztina CSS-ê bimîne) tê şewitandin.
`hidePrevented.bs.offcanvas`	Dema ku offcanvas tê xuyang kirin, paşnava wê ye `static`û klîkek li derveyî offcanvas tê kirin ev bûyer tê şewitandin. Dema ku bişkojka revê tê pêlkirin û `keyboard`vebijark li ser were danîn jî bûyer tê şewitandin `false`.
`show.bs.offcanvas`	`show`Dema ku rêbaza nimûneyê tê gazî kirin ev bûyer tavilê dişewite.
`shown.bs.offcanvas`	Dema ku hêmanek offcanvas ji bikarhênerê re xuya bibe ev bûyer tê şewitandin (dê li benda bidawîbûna veguheztina CSS-ê bimîne).

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

Offcanvas

Çawa dixebite

Examples

pêkhateyên Offcanvas

Offcanvas

Demo zindî

Offcanvas

Body scrolling

Offcanvas bi geroka laş

Body scrolling and backdrop

Backdrop bi gerok

Backdrop statîk

Offcanvas

Dark offcanvas

Offcanvas

Pêrakirin

Offcanvas Bersiv

Cihkirin

Offcanvas top

Offcanvas rast

Offcanvas bottom

Gihîştina

CSS

Variables

Guherbarên Sass

Bikaranîna

Bi taybetmendiyên daneyê

Toggle

Berdan

Bi JavaScript

Vebijêrk

Methods

Rêbaz û veguherînên Asynchronous

Events