Neidio i'r prif gynnwys Neidio i lywio dogfennau
Check
in English

Offcanvas

Adeiladwch fariau ochr cudd yn eich prosiect ar gyfer llywio, certiau siopa, a mwy gydag ychydig o ddosbarthiadau a'n ategyn JavaScript.

Ar y dudalen hon

Sut mae'n gweithio

Mae Offcanvas yn gydran bar ochr y gellir ei thoglo trwy JavaScript i ymddangos o ymyl chwith, dde, brig neu waelod y porth gwylio. Defnyddir botymau neu angorau fel sbardunau sydd ynghlwm wrth elfennau penodol y byddwch yn eu toglo, a datadefnyddir priodoleddau i ddefnyddio ein JavaScript.

  • Mae Offcanvas yn rhannu rhywfaint o'r un cod JavaScript â moddau. Yn gysyniadol, maent yn eithaf tebyg, ond maent yn ategion ar wahân.
  • Yn yr un modd, mae rhai newidynnau ffynhonnell Sass ar gyfer arddulliau a dimensiynau offcanvas yn cael eu hetifeddu o newidynnau'r moddol.
  • Pan gaiff ei ddangos, mae offcanvas yn cynnwys cefndir rhagosodedig y gellir ei glicio i guddio'r offcanvas.
  • Yn debyg i foddau, dim ond un allgynfas y gellir ei ddangos ar y tro.

Pennau i fyny! O ystyried sut mae CSS yn trin animeiddiadau, ni allwch ddefnyddio marginnac translatear .offcanvaselfen. Yn lle hynny, defnyddiwch y dosbarth fel elfen lapio annibynnol.

Mae effaith animeiddio'r gydran hon yn dibynnu ar prefers-reduced-motionymholiad y cyfryngau. Gweler adran cynnig gostyngol ein dogfennaeth hygyrchedd .

Enghreifftiau

Cydrannau oddi ar gynfas

Isod mae enghraifft offcanvas a ddangosir yn ddiofyn (trwy .showymlaen .offcanvas). Mae Offcanvas yn cynnwys cefnogaeth ar gyfer pennawd gyda botwm cau a dosbarth corff dewisol ar gyfer rhai cychwynnol padding. Rydym yn awgrymu eich bod yn cynnwys penawdau oddi ar y cynfas gyda chamau diswyddo lle bynnag y bo modd, neu ddarparu gweithred ddiswyddo benodol.

Offcanvas
Mae cynnwys yr offcanvas yn mynd yma. Gallwch chi osod bron unrhyw gydran Bootstrap neu elfennau arferiad yma.
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 byw

Defnyddiwch y botymau isod i ddangos a chuddio elfen offcanvas trwy JavaScript sy'n toglo'r .showdosbarth ar elfen gyda'r .offcanvasdosbarth.

  • .offcanvasyn cuddio cynnwys (diofyn)
  • .offcanvas.showyn dangos cynnwys

Gallwch ddefnyddio dolen gyda'r hrefpriodoledd, neu botwm gyda'r data-bs-targetpriodoledd. Yn y ddau achos, data-bs-toggle="offcanvas"mae'n ofynnol.

Cysylltiad â href
Offcanvas
Peth testun fel dalfan. Mewn bywyd go iawn gallwch chi gael yr elfennau rydych chi wedi'u dewis. Hoffi, testun, delweddau, rhestrau, ac ati.
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>

Sgrolio'r corff

Mae sgrolio'r <body>elfen wedi'i analluogi pan fydd allcanvas a'i gefndir yn weladwy. Defnyddiwch y data-bs-scrollpriodoledd i alluogi <body>sgrolio.

Oddi ar y cynfas gyda sgrolio corff

Ceisiwch sgrolio gweddill y dudalen i weld yr opsiwn hwn ar waith.

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>

Sgrolio'r corff a chefndir

Gallwch hefyd alluogi <body>sgrolio gyda chefndir gweladwy.

Cefndir gyda sgrolio

Ceisiwch sgrolio gweddill y dudalen i weld yr opsiwn hwn ar waith.

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>

Cefndir statig

Pan fydd y cefndir wedi'i osod yn sefydlog, ni fydd y cynfas yn cau wrth glicio y tu allan iddo.

Offcanvas
Ni fyddaf yn cau os cliciwch y tu allan i mi.
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 tywyll

Ychwanegwyd yn v5.2.0

Newidiwch ymddangosiad oddi ar gynfasau gyda chyfleustodau i'w paru'n well â gwahanol gyd-destunau fel barrau llywio tywyll. Yma rydym yn ychwanegu .text-bg-darkat y .offcanvasac .btn-close-whiteat .btn-closear gyfer steilio cywir gydag oddi ar gynfas tywyll. Os oes gennych gwymplenni, ystyriwch ychwanegu .dropdown-menu-darkat .dropdown-menu.

Offcanvas

Rhowch gynnwys offcanvas yma.

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>

Ymatebol

Ychwanegwyd yn v5.2.0

Mae dosbarthiadau offcanvas ymatebol yn cuddio cynnwys y tu allan i'r porth gwylio o dorbwynt penodol ac i lawr. Uwchben y torbwynt hwnnw, bydd y cynnwys oddi mewn yn ymddwyn fel arfer. Er enghraifft, .offcanvas-lgyn cuddio cynnwys mewn cynfas o dan y torbwynt lg, ond yn dangos y cynnwys uwchben y lgtorbwynt.

Newid maint eich porwr i ddangos y togl allcanvas ymatebol.
Ymatebol oddi ar y cynfas

Mae hyn yn cynnwys o fewn .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>

Mae dosbarthiadau ymatebol oddi ar y cynfas ar gael ar draws pob torbwynt.

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

Lleoliad

Nid oes lleoliad rhagosodedig ar gyfer cydrannau offcanvas, felly mae'n rhaid i chi ychwanegu un o'r dosbarthiadau addasu isod.

  • .offcanvas-startyn gosod oddi ar y cynfas ar ochr chwith y porth gwylio (a ddangosir uchod)
  • .offcanvas-endyn gosod oddi ar y cynfas ar ochr dde'r olygfan
  • .offcanvas-topyn gosod oddi ar y cynfas ar ben y porth gwylio
  • .offcanvas-bottomyn gosod oddi ar y cynfas ar waelod y porth gwylio

Rhowch gynnig ar yr enghreifftiau uchaf, dde a gwaelod isod.

Top oddi ar y cynfas
...
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 dde
...
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>
gwaelod oddi ar y cynfas
...
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>

Hygyrchedd

Gan mai deialog moddol yw'r panel offcanvas yn gysyniadol, gwnewch yn siŵr eich bod yn ychwanegu aria-labelledby="..."—gan gyfeirio at deitl y cynfas—at .offcanvas. Sylwch nad oes angen i chi ychwanegu role="dialog"gan ein bod eisoes yn ei ychwanegu trwy JavaScript.

CSS

Newidynnau

Ychwanegwyd yn v5.2.0

Fel rhan o ddull newidynnau CSS esblygol Bootstrap, mae offcanvas bellach yn defnyddio newidynnau CSS lleol ymlaen ar .offcanvasgyfer addasu amser real gwell. Mae gwerthoedd ar gyfer y newidynnau CSS yn cael eu gosod trwy Sass, felly mae addasu Sass yn dal i gael ei gefnogi hefyd.

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

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

Defnydd

Mae'r ategyn offcanvas yn defnyddio ychydig o ddosbarthiadau a phriodoleddau i drin y codi trwm:

  • .offcanvasyn cuddio'r cynnwys
  • .offcanvas.showyn dangos y cynnwys
  • .offcanvas-startyn cuddio'r oddi ar y cynfas ar y chwith
  • .offcanvas-endyn cuddio'r oddi ar y cynfas ar y dde
  • .offcanvas-topyn cuddio'r offcanvas ar y brig
  • .offcanvas-bottomyn cuddio'r offcanvas ar y gwaelod

Ychwanegu botwm diswyddo gyda'r data-bs-dismiss="offcanvas"priodoledd, sy'n sbarduno ymarferoldeb JavaScript. Byddwch yn siwr i ddefnyddio'r <button>elfen ag ef ar gyfer ymddygiad priodol ar draws pob dyfais.

Trwy briodoleddau data

Toglo

Ychwanegu data-bs-toggle="offcanvas"a data-bs-targetneu hrefat yr elfen i aseinio rheolaeth o un elfen oddi ar y cynfas yn awtomatig. Mae'r data-bs-targetbriodwedd yn derbyn dewisydd CSS i gymhwyso'r offcanvas iddo. Gwnewch yn siŵr eich bod chi'n ychwanegu'r dosbarth offcanvasat yr elfen offcanvas. Os hoffech iddo agor diofyn, ychwanegwch y dosbarth ychwanegol show.

Diystyru

Gellir cyflawni diswyddiad gyda'r datapriodoledd ar fotwm o fewn y cynfas fel y dangosir isod:

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

neu ar fotwm y tu allan i'r cynfas gan ddefnyddio'r hyn a data-bs-targetddangosir isod:

<button type="button" class="btn-close" data-bs-dismiss="offcanvas" data-bs-target="#my-offcanvas" aria-label="Close"></button>
Er bod y ddwy ffordd o ddiswyddo oddi ar gynfas yn cael eu cefnogi, cofiwch nad yw diswyddo o'r tu allan i gynfas yn cyd-fynd â phatrwm deialog (modal) Canllaw Arferion Awduro ARIA . Gwnewch hyn ar eich menter eich hun.

Trwy JavaScript

Galluogi â llaw gyda:

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

Opsiynau

Gan y gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript, gallwch atodi enw opsiwn i data-bs-, fel yn data-bs-animation="{value}". Gwnewch yn siŵr eich bod yn newid math achos yr enw opsiwn o “ camelCase ” i “ kebab-case ” wrth basio'r opsiynau trwy briodoleddau data. Er enghraifft, defnyddiwch data-bs-custom-class="beautifier"yn lle data-bs-customClass="beautifier".

O Bootstrap 5.2.0, mae'r holl gydrannau'n cefnogi priodoledd data neilltuedig arbrofoldata-bs-config a all gynnwys cyfluniad cydran syml fel llinyn JSON. Pan fydd gan elfen data-bs-config='{"delay":0, "title":123}'a data-bs-title="456"phriodoleddau, y gwerth terfynol titlefydd 456a bydd y priodoleddau data ar wahân yn diystyru'r gwerthoedd a roddir ar data-bs-config. Yn ogystal, mae priodoleddau data presennol yn gallu cynnwys gwerthoedd JSON fel data-bs-delay='{"show":0,"hide":150}'.

Enw Math Diofyn Disgrifiad
backdrop boolean neu'r llinynstatic true Rhowch gefndir ar y corff tra bod oddi ar y cynfas ar agor. Fel arall, nodwch staticar gyfer cefndir nad yw'n cau'r oddi ar y cynfas pan gaiff ei glicio.
keyboard boolaidd true Yn cau'r allcanvas pan fydd allwedd dianc yn cael ei wasgu.
scroll boolaidd false Caniatáu i'r corff sgrolio tra bod y cynfas ar agor.

Dulliau

Dulliau a thrawsnewidiadau anghydamserol

Mae pob dull API yn asyncronaidd ac yn dechrau cyfnod pontio . Maen nhw'n dychwelyd at y galwr cyn gynted ag y bydd y cyfnod pontio wedi dechrau ond cyn iddo ddod i ben . Yn ogystal, bydd galwad dull ar gydran trawsnewid yn cael ei anwybyddu .

Gweler ein dogfennaeth JavaScript am ragor o wybodaeth .

Yn actifadu'ch cynnwys fel elfen offcanvas. Yn derbyn opsiwn dewisol object.

Gallwch greu enghraifft oddi ar gynfas gyda'r lluniwr, er enghraifft:

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
Dull Disgrifiad
getInstance Dull statig sy'n eich galluogi i gael yr enghraifft oddi ar y cynfas yn gysylltiedig ag elfen DOM.
getOrCreateInstance Dull statig sy'n eich galluogi i gael yr enghraifft offcanvas yn gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn.
hide Yn cuddio elfen allcanvas. Yn dychwelyd i'r galwr cyn i'r elfen offcanvas gael ei chuddio mewn gwirionedd (hy cyn i'r hidden.bs.offcanvasdigwyddiad ddigwydd).
show Yn dangos elfen oddi ar y cynfas. Yn dychwelyd i'r galwr cyn i'r elfen offcanvas gael ei dangos mewn gwirionedd (hy cyn i'r shown.bs.offcanvasdigwyddiad ddigwydd).
toggle Toglo elfen oddi ar gynfas i'w dangos neu ei chuddio. Yn dychwelyd i'r galwr cyn i'r elfen offcanvas gael ei dangos neu ei chuddio (hy cyn i'r digwyddiad shown.bs.offcanvasneu'r hidden.bs.offcanvasdigwyddiad ddigwydd).

Digwyddiadau

Mae dosbarth allcanvas Bootstrap yn datgelu rhai digwyddiadau i'w cysylltu ag ymarferoldeb allcanvas.

Math o ddigwyddiad Disgrifiad
hide.bs.offcanvas Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y hidedull wedi'i alw.
hidden.bs.offcanvas Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen offcanvas wedi'i chuddio rhag y defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau).
hidePrevented.bs.offcanvas Mae'r digwyddiad hwn yn cael ei danio pan fydd y cynfas yn cael ei ddangos, ei gefndir yw statica bydd clic y tu allan i'r cynfas yn cael ei berfformio. Mae'r digwyddiad hefyd yn cael ei danio pan fydd yr allwedd dianc yn cael ei wasgu a'r keyboardopsiwn wedi'i osod i false.
show.bs.offcanvas Mae'r digwyddiad hwn yn tanio ar unwaith pan showelwir y dull enghraifft.
shown.bs.offcanvas Mae'r digwyddiad hwn yn cael ei danio pan fydd elfen allcanvas wedi'i gwneud yn weladwy i'r defnyddiwr (bydd yn aros i'r trawsnewidiadau CSS gael eu cwblhau). 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})