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 dikare bi JavaScript-ê ve were guheztin da ku ji çepê, rastê, an li kêleka binê dîmenê 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.

<div class="offcanvas offcanvas-start" 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 text-reset" 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.

<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 text-reset" 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" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <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>

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 lê 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.

...

<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 id="offcanvasTopLabel">Offcanvas top</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<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 id="offcanvasRightLabel">Offcanvas right</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    ...
  </div>
</div>

...

<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 text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body small">
    ...
  </div>
</div>

Backdrop

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

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

.....

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

<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable body scrolling</button>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable backdrop (default)</button>
<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" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Colored with scrolling</h5>
    <button type="button" class="btn-close text-reset" 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>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>.....</p>
  </div>
</div>
<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">Backdroped with scrolling</h5>
    <button type="button" class="btn-close text-reset" 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>

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.

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;

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-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ê

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.

Bi JavaScript

Bi destan çalak bike bi:

var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'))
var offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
  return new bootstrap.Offcanvas(offcanvasEl)
})

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-bs-, wekî di data-bs-backdrop="".

Nav	Awa	Destçûnî	Terîf
`backdrop`	boolean	`true`	Dema ku offcanvas vekirî ye paşnavek li ser laş bicîh bikin
`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î:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)

Awa	Terîf
`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ê.
`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.
`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ê.
`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î ya 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 .

Events

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

Cureyê bûyerê	Terîf
`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).
`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.

var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})

Offcanvas

Çawa dixebite

Examples

pêkhateyên Offcanvas

Offcanvas

Demo zindî

Offcanvas

Cihkirin

Offcanvas top

Offcanvas rast

Offcanvas bottom

Backdrop

Bi gerokê rengîn kirin

Offcanvas bi paşnavê

Piştgiriya bi gerokê

Gihîştina

Sass

Variables

Bikaranîna

Bi taybetmendiyên daneyê

Bi JavaScript

Vebijêrk

Methods

Rêbaz û veguherînên Asynchronous

Events