Esasy mazmuna geçiň Docs nawigasiýasyna geçiň
Check
in English

Offcanvas

Nawigasiýa, söwda arabalary we başgalar üçin birnäçe synp we JavaScript plaginimiz bilen gizlin gapdal panelleri guruň.

Bu sahypada

Bu nähili işleýär

“Offcanvas”, görünişiň çep, sag, ýokarky ýa-da aşaky gyrasyndan görünmek üçin JavaScript arkaly üýtgedilip bilinýän gapdal paneli. Düwmeler ýa-da labyrlar, üýtgeýän aýratyn elementlere birikdirilen triggerler hökmünde ulanylýar we dataJavaScript-i çagyrmak üçin atributlar ulanylýar.

  • Offcanvas, JavaScript kodlarynyň käbirini modal bilen paýlaşýar. Düşünjä boýunça, olar gaty meňzeýär, ýöne aýratyn pluginler.
  • Şonuň ýaly-da, offcanwanyň stilleri we ölçegleri üçin käbir çeşme Sass üýtgeýjileri modalyň üýtgeýjilerinden miras galypdyr.
  • Görkezilende, offcanwas offkanwalary gizlemek üçin basyp boljak adaty fon görnüşini öz içine alýar.
  • Modallara meňzeşlikde, bir gezekde diňe bir offcanwany görkezip bolýar.

Başlar! CSS-iň animasiýalary nähili işleýändigini göz öňünde tutup margin, translatebir .offcanvaselementi ulanyp bilmersiňiz. Munuň ýerine synpy garaşsyz örtük elementi hökmünde ulanyň.

Bu komponentiň animasiýa täsiri prefers-reduced-motionmedia talaplaryna baglydyr. Elýeterlilik resminamalarymyzyň azaldylan hereket bölümine serediň .

Mysallar

Offcanvas komponentleri

Aşakda deslapky görnüşde görkezilýär ( .showaçyk görnüşde .offcanvas). “Offcanvas” ýakyn düwme bilen sözbaşy üçin goldaw we käbir başlangyç üçin goşmaça beden synpyny öz içine alýar padding. Mümkin boldugyça işden aýyrmak hereketleri bilen offcanvas sözbaşylaryny goşmagyňyzy ýa-da aç-açan işden aýyrmagyňyzy maslahat berýäris.

Offcanvas
Offkanwalaryň mazmuny şu ýere gidýär. “Bootstrap” -yň islendik komponentini ýa-da ýörite elementlerini şu ýere ýerleşdirip bilersiňiz.
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>

Göni görkeziş

.showJavaScript-iň üsti bilen synpy bir element bilen synpy üýtgedýän offcanvas elementini görkezmek we gizlemek üçin aşakdaky düwmeleri ulanyň .offcanvas.

  • .offcanvasmazmuny gizleýär (default)
  • .offcanvas.showmazmunyny görkezýär

Sypat bilen hrefbaglanyşyk ýa-da atributly düwme ulanyp bilersiňiz data-bs-target. Iki ýagdaýda-da data-bs-toggle="offcanvas"talap edilýär.

Href bilen baglanyşyk
Offcanvas
Käbir tekst ýer eýesi hökmünde. Hakyky durmuşda saýlan elementleriňiz bolup biler. Halaýan, tekst, suratlar, sanawlar we ş.m.
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>

Beden aýlamak

<body>Offkanwas we onuň fonunda görünýän mahaly elementi aýlamak ýapylýar. data-bs-scrollAýlamagy işjeňleşdirmek üçin atributdan peýdalanyň <body>.

Bedeniň aýlanmagy bilen Offcanvas

Bu opsiýany hereketde görmek üçin sahypanyň galan bölegini aýlap görüň.

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>

Bedeniň aýlanmagy we fon

<body>Şeýle hem görünýän fon bilen aýlamagy işjeňleşdirip bilersiňiz .

Aýlamak bilen fon

Bu opsiýany hereketde görmek üçin sahypanyň galan bölegini aýlap görüň.

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>

Statik fon

Düşündiriş statiki görnüşde goýlanda, daşyna basylanda ofkanwas ýapylmaz.

Offcanvas
Daşardan bassaň ýapmaryn.
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>

Garaňky offcanvas

V5.2.0 goşuldy

Garaňky gämi duralgalary ýaly dürli şertlere has gowy gabat gelmek üçin kömekçi enjamlar bilen ofkanwazlaryň görnüşini üýtgediň. Bu ýerde , garaňky offcanwas bilen dogry bezemek üçin .text-bg-darkgoşýarys . Içiňizde kemçilikler bar bolsa, goşmagy hem göz öňünde tutuň ..offcanvas.btn-close-white.btn-close.dropdown-menu-dark.dropdown-menu

Offcanvas

Offcanvas mazmunyny şu ýere ýerleşdiriň.

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>

Jogapkärçilikli

V5.2.0 goşuldy

Jogapkärçilikli offcanwas synplary mazmuny belli bir nokatdan we aşakdan gizleýär. Şol nokadyň üstünde, içindäki zatlar hemişeki ýaly hereket eder. Mysal üçin, .offcanvas-lgmazmuny kesiş nokadynyň aşagyndaky offkanwada gizleýär lg, ýöne mazmuny bölek nokadynyň üstünde görkezýär lg.

Duýgur offkanwalary üýtgetmek üçin brauzeriňiziň ölçegini üýtgediň.
Jogapkärli offkanwas

Bu mazmunyň içinde .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>

Her nokat üçin jogap berýän offcanvas sapaklary bar.

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

Acementerleşiş

Offcanvas komponentleri üçin deslapky ýerleşdirme ýok, şonuň üçin aşakda üýtgediji synplardan birini goşmaly.

  • .offcanvas-startgörüniş nokadynyň çep tarapynda offkanwalary ýerleşdirýär (ýokarda görkezilýär)
  • .offcanvas-endgörünişiň sag tarapynda offkanwalary ýerleşdirýär
  • .offcanvas-topoffkanwany görnüşiň üstünde goýýar
  • .offcanvas-bottomoffkanwalary görnüşiň aşagyna ýerleşdirýär

Aşakdaky ýokarky, sag we aşaky mysallary synap görüň.

Offcanvas ýokarsy
...
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>
Offcanvas dogry
...
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>
Offcanvas aşagy
...
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>

Elýeterlilik

“Offcanvas” paneli konseptual taýdan modal gepleşik bolany üçin, aria-labelledby="..."“offcanvas” adyna salgylanyp , goşuň .offcanvas. Goşmaly däldigiňize üns beriň, role="dialog"sebäbi eýýäm JavaScript arkaly goşýarys.

CSS

Üýtgeýjiler

V5.2.0 goşuldy

“Bootstrap” -yň ösýän CSS üýtgeýjileriniň çemeleşmesiniň bir bölegi hökmünde, offcanvas häzirki wagtda .offcanvasgüýçlendirilen hakyky özleşdirmek üçin ýerli CSS üýtgeýjilerini ulanýar. CSS üýtgeýjileriniň bahalary Sass arkaly kesgitlenýär, şonuň üçin Sass sazlamasy henizem goldanýar.

  --#{$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 üýtgeýjileri

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

Ulanylyşy

“Offcanvas” plugin agyr götermek üçin birnäçe synplary we häsiýetleri ulanýar:

  • .offcanvasmazmuny gizleýär
  • .offcanvas.showmazmunyny görkezýär
  • .offcanvas-startoffkanlary çepde gizleýär
  • .offcanvas-endoffkanlary sagda gizleýär
  • .offcanvas-topoffkanlary ýokarsynda gizleýär
  • .offcanvas-bottomaşagyndaky offkanlary gizleýär

data-bs-dismiss="offcanvas"JavaScript-iň işlemegine itergi berýän atribut bilen işden çykarmak düwmesini goşuň . <button>Elementi ähli enjamlarda dogry alyp barmak üçin ulanmagy unutmaň .

Maglumat atributlary arkaly

Toggle

data-bs-toggle="offcanvas"Bir data-bs-targetoffcanvas hrefelementine awtomatiki gözegçilik etmek üçin elementi goşuň . Sypat data-bs-target, offcanwalary ulanmak üçin CSS saýlaýjysyny kabul edýär. Synpy offcanvasoffcanvas elementine goşuň. Adaty açylmagyny isleseňiz, goşmaça synp goşuň show.

Işden aýyrmak

Işden aýrylmak , aşakda görkezilişi ýaly , offkanwanyň içindäki düwmedäkidata atribut bilen gazanylyp bilner:

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

ýa-da aşakda görkezilişi ýaly offkanwanyň daşyndaky düwmede :data-bs-target

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Offkanwany işden aýyrmagyň iki usuly hem goldanýan bolsa-da, ofkanwanyň daşyndan işden çykarmagyň ARIA Awtorlaşdyryş amaly gollanmasy gepleşik penjiresiniň (modal) görnüşine laýyk gelmeýändigini ýadyňyzdan çykarmaň . Muny öz töwekgelçiligiňiz bilen ediň.

JavaScript arkaly

El bilen işlediň:

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

Görnüş

Opsiýalary maglumat atributlary ýa-da JavaScript arkaly geçirip bolýandygy sebäpli, opsiýa adyny data-bs-bolşy ýaly goşup bilersiňiz data-bs-animation="{value}". Opsiýalary maglumat atributlary arkaly geçireniňizde , opsiýanyň adynyň görnüşini “ camelCase ” -den “ kebab-case ” diýip üýtgediň. Mysal üçin, data-bs-custom-class="beautifier"ýerine ulanyň data-bs-customClass="beautifier".

“Bootstrap 5.2.0” -e görä, ähli komponentler JSON setiri hökmünde ýönekeý komponent konfigurasiýasyny saklap bilýän tejribe ätiýaçlandyrylan maglumat atributyny goldaýar. data-bs-configHaçan-da bir element data-bs-config='{"delay":0, "title":123}'we data-bs-title="456"häsiýetler bar bolsa, iň soňky titlebaha bolar 456we aýratyn maglumatlar atributlary berlen bahalary ýok eder data-bs-config. Mundan başga-da, bar bolan maglumatlar atributlary ýaly JSON bahalaryny ýerleşdirmäge ukyply data-bs-delay='{"show":0,"hide":150}'.

Ady Görnüşi Bellenen Düşündiriş
backdrop bulean ýa-da setirstatic true Offkanwas açyk wagty bedeniňize fon çalyň. staticAtivea-da bolmasa, basylanda offkanalary ýapmaýan fon üçin kesgitläň .
keyboard boolean true Gaçmak düwmesi basylanda offkanlary ýapýar.
scroll boolean false Offcanwas açyk wagty bedeniň aýlanmagyna rugsat beriň.

Usullar

Asynkron usullar we geçişler

APIhli API usullary asynkron bolup, geçişe başlaýar . Geçiş başlan badyna, ýöne gutarmanka jaň edijä gaýdyp gelýärler . Mundan başga-da, geçiş komponentine çagyryş usuly hasaba alynmaz .

Has giňişleýin maglumat üçin JavaScript resminamalarymyza serediň .

Mazmunyňyzy offcanvas elementi hökmünde işjeňleşdirýär. Goşmaça wariantlary kabul edýär object.

Konstruktor bilen offcanvas mysalyny döredip bilersiňiz, mysal üçin:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Usul Düşündiriş
getInstance DOM elementi bilen baglanyşykly offcanvas mysalyny almaga mümkinçilik berýän statiki usul.
getOrCreateInstance DOM elementi bilen baglanyşykly offcanvas mysalyny almaga ýa-da başlamadyk ýagdaýynda täzesini döretmäge mümkinçilik berýän statiki usul.
hide Offcanvas elementini gizleýär. Offcanvas elementi aslynda gizlenmänkä (ýagny hidden.bs.offcanvaswaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.
show Offcanvas elementini görkezýär. Offcanvas elementi görkezilmänkä (ýagny shown.bs.offcanvaswaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.
toggle Görkezilen ýa-da gizlenýän offcanvas elementini açýar. Offcanvas elementi hakykatdanam görkezilmän ýa-da gizlenmänkä (ýagny waka shown.bs.offcanvasýa-da hidden.bs.offcanvaswaka ýüze çykmazdan ozal) jaň edýän adama gaýdyp gelýär.

Wakalar

“Bootstrap” -yň “offcanvas” synpy, “offcanvas” -yň işlemegi üçin birnäçe wakany paş edýär.

Çäräniň görnüşi Düşündiriş
hide.bs.offcanvas hideBu waka usul çagyrylanda derrew atylýar .
hidden.bs.offcanvas Bu waka, offcanvas elementi ulanyjydan gizlenende (CSS geçişleriniň tamamlanmagyna garaşýar) atylýar.
hidePrevented.bs.offcanvas Bu waka, offkanwalar görkezilende, onuň fonunda staticwe offkanwanyň daşynda bir gezek basylanda ýerine ýetirilýär. keyboardGaçmak düwmesi basylanda we opsiýa düzülende waka hem atylýar false.
show.bs.offcanvas showBu waka mysal usuly çagyrylanda derrew ýanýar .
shown.bs.offcanvas Bu waka, “offcanvas” elementi ulanyja görünen mahaly atylýar (CSS geçişleriniň tamamlanmagyna garaşýar). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})