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.
Ç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, û data
taybetmendî 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 margin
an jî translate
li ser bikar bînin. .offcanvas
Di şûna wê de, polê wekî hêmanek pêça serbixwe bikar bînin.
prefers-reduced-motion
medyayê 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î padding
dike. 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.
Offcanvas
<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 .show
polê li ser hêmanek bi .offcanvas
polê re vedişêre.
.offcanvas
naverokê vedişêre (xweserî).offcanvas.show
naverokê nîşan dide
Hûn dikarin girêdanek bi href
taybetmendiyê, an bişkokek bi data-bs-target
taybetmendiyê bikar bînin. Di her du rewşan de, data-bs-toggle="offcanvas"
pêdivî ye.
Offcanvas
<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-start
kanavayê li milê çepê yê dîmenderê bi cih dike (li jor tê nîşandan).offcanvas-end
offcanvas li rastê dîmenderê cîh dike.offcanvas-top
offcanvas-ê li jora dîmenderê bi cih dike.offcanvas-bottom
offcanvas li binê dîmenderê cîh dike
Mînakên jorîn, rast û jêrîn li jêr biceribînin.
Offcanvas top
<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>
Offcanvas rast
<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>
Offcanvas bottom
<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-scroll
ku gerokê <body>
biguhezînin û data-bs-backdrop
paşguh bikin.
Bi gerokê rengîn kirin
Biceribînin ku rûpelê mayî bigerin da ku vê vebijarkê di çalakiyê de bibînin.
Offcanvas bi paşnavê
.....
Backdrop bi gerok
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">Backdrop 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;
$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:
.offcanvas
naverokê vedişêre.offcanvas.show
naverokê nîşan dide.offcanvas-start
kanava li milê çepê vedişêre.offcanvas-end
li aliyê rastê kanavayê vedişêre.offcanvas-bottom
kanava 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-target
an jî lê zêde href
bikin da ku bixweber kontrola yek hêmanek offcanvas veqetînin. Taybetmendî data-bs-target
hilbijêrek CSS-ê qebûl dike ku li ser offcanvas-ê bicîh bike. Bawer bikin ku polê offcanvas
li 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 data
taybetmendiya 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-target
wekî 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>
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.
Naveroka we wekî hêmanek offcanvas çalak dike. Vebijarkek vebijarkî qebûl object
dike.
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...
})