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 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 gynfas gyda chamau diswyddo lle bynnag y bo modd, neu'n darparu gweithred ddiswyddo benodol.

Mae cynnwys yr offcanvas yn mynd yma. Gallwch chi osod bron unrhyw gydran Bootstrap neu elfennau arferiad yma.

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

Peth testun fel dalfan. Mewn bywyd go iawn gallwch chi gael yr elfennau rydych chi wedi'u dewis. Hoffi, testun, delweddau, rhestrau, ac ati.

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

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.

...

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

Cefndir

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

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

.....

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

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

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.

Sass

Newidynnau

$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-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 dylunio deialog moddol WAI-ARIA . Gwnewch hyn ar eich menter eich hun.

Trwy JavaScript

Galluogi â llaw gyda:

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

Opsiynau

Gellir trosglwyddo opsiynau trwy briodoleddau data neu JavaScript. Ar gyfer priodoleddau data, atodwch enw'r opsiwn i data-bs-, fel yn data-bs-backdrop="".

Enw	Math	Diofyn	Disgrifiad
`backdrop`	boolaidd	`true`	Rhowch gefndir ar y corff tra bod oddi ar y cynfas ar agor
`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:

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

Dull	Disgrifiad
`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.offcanvas`neu'r `hidden.bs.offcanvas`digwyddiad 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.offcanvas`digwyddiad ddigwydd).
`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.offcanvas`digwyddiad ddigwydd).
`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 oddi ar y cynfas yn gysylltiedig ag elfen DOM, neu greu un newydd rhag ofn na chafodd ei gychwyn

Digwyddiadau

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

Math o ddigwyddiad	Disgrifiad
`show.bs.offcanvas`	Mae'r digwyddiad hwn yn tanio ar unwaith pan `show`elwir 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).
`hide.bs.offcanvas`	Mae'r digwyddiad hwn yn cael ei danio ar unwaith pan fydd y `hide`dull 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).

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

Offcanvas

Sut mae'n gweithio

Enghreifftiau

Cydrannau oddi ar gynfas

Offcanvas

Demo byw

Offcanvas

Lleoliad

Top oddi ar y cynfas

Offcanvas dde

gwaelod oddi ar y cynfas

Cefndir

Wedi'i liwio â sgrolio

Offcanvas gyda chefndir

Cefndir gyda sgrolio

Hygyrchedd

Sass

Newidynnau

Defnydd

Trwy briodoleddau data

Toglo

Diystyru

Trwy JavaScript

Opsiynau

Dulliau

Dulliau a thrawsnewidiadau anghydamserol

Digwyddiadau