ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
in English

ຜ້າໃບ

ສ້າງແຖບດ້ານຂ້າງທີ່ເຊື່ອງໄວ້ໃນໂຄງການຂອງທ່ານສໍາລັບການນໍາທາງ, ກະຕ່າຊື້ເຄື່ອງ, ແລະອື່ນໆອີກດ້ວຍຫ້ອງຮຽນຈໍານວນຫນ້ອຍແລະ plugin JavaScript ຂອງພວກເຮົາ.

ມັນເຮັດວຽກແນວໃດ

Offcanvas ແມ່ນອົງປະກອບແຖບດ້ານຂ້າງທີ່ສາມາດສະຫຼັບຜ່ານ JavaScript ເພື່ອປາກົດຈາກຊ້າຍ, ຂວາ, ຫຼືຂອບລຸ່ມຂອງຊ່ອງເບິ່ງ. ປຸ່ມ ຫຼືສະມໍຖືກໃຊ້ເປັນຕົວກະຕຸ້ນທີ່ຕິດກັບອົງປະກອບສະເພາະທີ່ທ່ານສະຫຼັບ, ແລະ dataຄຸນລັກສະນະຕ່າງໆແມ່ນໃຊ້ເພື່ອເອີ້ນໃຊ້ JavaScript ຂອງພວກເຮົາ.

  • Offcanvas ແບ່ງປັນບາງລະຫັດ JavaScript ດຽວກັນກັບ modals. Conceptually, ພວກເຂົາເຈົ້າແມ່ນຂ້ອນຂ້າງຄ້າຍຄືກັນ, ແຕ່ພວກເຂົາເຈົ້າແມ່ນ plugins ແຍກຕ່າງຫາກ.
  • ເຊັ່ນດຽວກັນ, ບາງ ຕົວແປ Sass ສໍາລັບຮູບແບບແລະຂະຫນາດຂອງ offcanvas ແມ່ນສືບທອດມາຈາກຕົວແປຂອງ modal.
  • ເມື່ອສະແດງ, offcanvas ປະກອບມີສາກຫຼັງເລີ່ມຕົ້ນທີ່ສາມາດຄລິກເພື່ອເຊື່ອງ offcanvas.
  • ຄ້າຍຄືກັນກັບ modals, ພຽງແຕ່ຫນຶ່ງ offcanvas ສາມາດສະແດງໃຫ້ເຫັນໃນເວລານັ້ນ.

ລະວັງ! ເນື່ອງຈາກ CSS ຈັດການກັບພາບເຄື່ອນໄຫວ, ທ່ານບໍ່ສາມາດໃຊ້ marginຫຼື ອົງ translateປະ .offcanvasກອບໃດຫນຶ່ງ. ແທນທີ່ຈະ, ໃຊ້ຫ້ອງຮຽນເປັນອົງປະກອບຫໍ່ເອກະລາດ.

ຜົນກະທົບຂອງພາບເຄື່ອນໄຫວຂອງອົງປະກອບນີ້ແມ່ນຂຶ້ນກັບການ prefers-reduced-motionສອບຖາມສື່. ເບິ່ງ ພາກສ່ວນການເຄື່ອນໄຫວທີ່ຫຼຸດລົງຂອງເອກະສານການຊ່ວຍເຂົ້າເຖິງຂອງພວກເຮົາ .

ຕົວຢ່າງ

ອົງປະກອບຂອງ Offcanvas

ຂ້າງລຸ່ມນີ້ແມ່ນຕົວຢ່າງຂອງ offcanvas ທີ່ສະແດງໃຫ້ເຫັນໂດຍຄ່າເລີ່ມຕົ້ນ (ຜ່ານ .show) .offcanvas. Offcanvas ປະກອບມີການສະຫນັບສະຫນູນ header ທີ່ມີປຸ່ມປິດແລະຫ້ອງຮຽນຮ່າງກາຍທາງເລືອກສໍາລັບບາງເບື້ອງຕົ້ນ padding. ພວກເຮົາແນະນໍາໃຫ້ທ່ານລວມເອົາຫົວ offcanvas ດ້ວຍການກະທໍາການປິດທຸກຄັ້ງທີ່ເປັນໄປໄດ້, ຫຼືສະຫນອງການປະຕິບັດການປິດຢ່າງຈະແຈ້ງ.

ຜ້າໃບ
ເນື້ອຫາສໍາລັບ offcanvas ຢູ່ທີ່ນີ້. ທ່ານສາມາດວາງພຽງແຕ່ກ່ຽວກັບອົງປະກອບ Bootstrap ຫຼືອົງປະກອບທີ່ກໍາຫນົດເອງຢູ່ທີ່ນີ້.
<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>

ການສາທິດສົດ

ໃຊ້ປຸ່ມລຸ່ມນີ້ເພື່ອສະແດງ ແລະເຊື່ອງອົງປະກອບ offcanvas ຜ່ານ JavaScript ທີ່ສະຫຼັບ .showຊັ້ນຮຽນໃນອົງປະກອບທີ່ມີ .offcanvasຫ້ອງຮຽນ.

  • .offcanvasເຊື່ອງເນື້ອຫາ (ຄ່າເລີ່ມຕົ້ນ)
  • .offcanvas.showສະ​ແດງ​ໃຫ້​ເຫັນ​ເນື້ອ​ໃນ​

ທ່ານສາມາດນໍາໃຊ້ການເຊື່ອມຕໍ່ກັບ hrefຄຸນລັກສະນະ, ຫຼືປຸ່ມທີ່ມີ data-bs-targetຄຸນລັກສະນະ. ໃນທັງສອງກໍລະນີ, data-bs-toggle="offcanvas"ຕ້ອງການ.

ເຊື່ອມຕໍ່ກັບ href
ຜ້າໃບ
ບາງຂໍ້ຄວາມເປັນຕົວຍຶດ. ໃນຊີວິດຈິງທ່ານສາມາດມີອົງປະກອບທີ່ທ່ານເລືອກ. ມັກ, ຂໍ້ຄວາມ, ຮູບພາບ, ລາຍຊື່, ແລະອື່ນໆ.
<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>

ການຈັດວາງ

ບໍ່ມີການຈັດວາງໄວ້ໃນຕອນຕົ້ນສໍາລັບອົງປະກອບຂອງ offcanvas, ດັ່ງນັ້ນທ່ານຕ້ອງເພີ່ມຫນຶ່ງຂອງປະເພດ modifier ຂ້າງລຸ່ມນີ້;

  • .offcanvas-startວາງ offcanvas ຢູ່ເບື້ອງຊ້າຍຂອງ viewport (ສະແດງຂ້າງເທິງ)
  • .offcanvas-endວາງ offcanvas ທາງດ້ານຂວາຂອງ viewport ໄດ້
  • .offcanvas-topວາງ offcanvas ຢູ່ເທິງສຸດຂອງ viewport ໄດ້
  • .offcanvas-bottomວາງ offcanvas ຢູ່ລຸ່ມສຸດຂອງ viewport ໄດ້

ລອງຕົວຢ່າງທາງເທິງ, ຂວາ, ແລະລຸ່ມລຸ່ມນີ້.

Offcanvas ເທິງ
...
<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 ສິດ
...
<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 ລຸ່ມ
...
<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>

ສາກຫຼັງ

ການເລື່ອນ <body>ອົງປະກອບຖືກປິດນຳໃຊ້ເມື່ອມີຜ້າໃບ ແລະສາກຫຼັງຂອງມັນເຫັນໄດ້. ໃຊ້ data-bs-scrollຄຸນສົມບັດເພື່ອສະຫຼັບການ <body>ເລື່ອນ ແລະ data-bs-backdropເພື່ອສະຫຼັບສາກຫຼັງ.

ສີດ້ວຍການເລື່ອນ

ລອງເລື່ອນສ່ວນທີ່ເຫຼືອຂອງໜ້າເພື່ອເບິ່ງຕົວເລືອກນີ້ໃນການປະຕິບັດ.

Offcanvas ກັບສາກຫຼັງ

.....

ສາກຫຼັງດ້ວຍການເລື່ອນ

ລອງເລື່ອນສ່ວນທີ່ເຫຼືອຂອງໜ້າເພື່ອເບິ່ງຕົວເລືອກນີ້ໃນການປະຕິບັດ.

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

ການເຂົ້າເຖິງ

ເນື່ອງຈາກກະດານ offcanvas ແມ່ນແນວຄວາມຄິດຂອງກ່ອງໂຕ້ຕອບແບບໂມດູນ, ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມ aria-labelledby="..."- ການອ້າງອິງຫົວຂໍ້ offcanvas - ກັບ .offcanvas. ໃຫ້ສັງເກດວ່າທ່ານບໍ່ຈໍາເປັນຕ້ອງເພີ່ມ role="dialog"ເພາະວ່າພວກເຮົາໄດ້ເພີ່ມມັນຜ່ານ JavaScript ແລ້ວ.

ຊາສ

ຕົວແປ

$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 ໃຊ້ບາງຊັ້ນຮຽນແລະຄຸນລັກສະນະຕ່າງໆເພື່ອຈັດການກັບການຍົກຫນັກ:

  • .offcanvasເຊື່ອງເນື້ອຫາ
  • .offcanvas.showສະ​ແດງ​ໃຫ້​ເຫັນ​ເນື້ອ​ໃນ​
  • .offcanvas-startເຊື່ອງ offcanvas ຢູ່ເບື້ອງຊ້າຍ
  • .offcanvas-endເຊື່ອງ offcanvas ຢູ່ເບື້ອງຂວາ
  • .offcanvas-bottomເຊື່ອງ offcanvas ຢູ່ທາງລຸ່ມ

ເພີ່ມປຸ່ມປິດດ້ວຍ data-bs-dismiss="offcanvas"ຄຸນສົມບັດ, ເຊິ່ງກະຕຸ້ນການເຮັດວຽກຂອງ JavaScript. ໃຫ້ແນ່ໃຈວ່າໃຊ້ <button>ອົງປະກອບກັບມັນສໍາລັບພຶດຕິກໍາທີ່ເຫມາະສົມໃນທົ່ວອຸປະກອນທັງຫມົດ.

ຜ່ານຄຸນລັກສະນະຂໍ້ມູນ

ເພີ່ມ data-bs-toggle="offcanvas"ແລະ a data-bs-targetຫຼື hrefອົງປະກອບເພື່ອກໍານົດການຄວບຄຸມອັດຕະໂນມັດຂອງອົງປະກອບ offcanvas ຫນຶ່ງ. ຄຸນລັກ ສະ data-bs-targetນະຍອມຮັບຕົວເລືອກ CSS ເພື່ອໃຊ້ offcanvas ກັບ. ໃຫ້ແນ່ໃຈວ່າຈະເພີ່ມຊັ້ນ offcanvasໃນອົງປະກອບ offcanvas. ຖ້າທ່ານຕ້ອງການໃຫ້ມັນເປີດໃນຕອນຕົ້ນ, ໃຫ້ເພີ່ມຊັ້ນຮຽນເພີ່ມເຕີມ show.

ຜ່ານ JavaScript

ເປີດໃຊ້ດ້ວຍຕົນເອງດ້ວຍ:

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

ທາງເລືອກ

ທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript. ສໍາລັບຄຸນລັກສະນະຂໍ້ມູນ, ຕື່ມຊື່ທາງເລືອກໃສ່ data-bs-, ໃນ data-bs-backdrop="".

ຊື່ ປະເພດ ຄ່າເລີ່ມຕົ້ນ ລາຍລະອຽດ
backdrop ບູລີນ true ນຳໃຊ້ສາກຫຼັງໃສ່ຮ່າງກາຍໃນຂະນະທີ່ຜ້າໃບເປີດຢູ່
keyboard ບູລີນ true ປິດ offcanvas ເມື່ອກົດປຸ່ມຫນີ
scroll ບູລີນ false ອະນຸຍາດໃຫ້ເລື່ອນຮ່າງກາຍໃນຂະນະທີ່ offcanvas ເປີດ

ວິທີການ

ວິ​ທີ​ການ asynchronous ແລະ​ການ​ຫັນ​ປ່ຽນ​

ວິທີການ API ທັງໝົດແມ່ນ asynchronous ແລະເລີ່ມການ ຫັນປ່ຽນ . ພວກເຂົາກັບຄືນໄປຫາຜູ້ໂທທັນທີທີ່ການຫັນປ່ຽນເລີ່ມຕົ້ນແຕ່ ກ່ອນທີ່ມັນຈະສິ້ນສຸດລົງ . ນອກຈາກນັ້ນ, ການໂທຫາວິທີການກ່ຽວກັບ ອົງປະກອບຂອງການປ່ຽນແປງຈະຖືກລະເລີຍ .

ເບິ່ງເອກະສານ JavaScript ຂອງພວກເຮົາສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ .

ເປີດໃຊ້ເນື້ອຫາຂອງທ່ານເປັນອົງປະກອບ offcanvas. ຍອມຮັບທາງເລືອກທີ່ເປັນທາງເລືອກ object.

ທ່ານສາມາດສ້າງຕົວຢ່າງ offcanvas ກັບ constructor, ສໍາລັບການຍົກຕົວຢ່າງ:

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
ວິທີການ ລາຍລະອຽດ
toggle ສະຫຼັບອົງປະກອບ offcanvas ເພື່ອສະແດງ ຫຼືເຊື່ອງໄວ້. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ຈະອົງປະກອບ offcanvas ຕົວຈິງແລ້ວໄດ້ຖືກສະແດງໃຫ້ເຫັນຫຼືເຊື່ອງໄວ້ (ie ກ່ອນທີ່ shown.bs.offcanvasຫຼື hidden.bs.offcanvasເຫດການຈະເກີດຂຶ້ນ).
show ສະແດງອົງປະກອບ offcanvas. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ອົງປະກອບ offcanvas ໄດ້ຖືກສະແດງໃຫ້ເຫັນຕົວຈິງ (ie ກ່ອນທີ່ shown.bs.offcanvasເຫດການຈະເກີດຂື້ນ).
hide ເຊື່ອງອົງປະກອບ offcanvas. ກັບຄືນໄປຫາຜູ້ໂທກ່ອນທີ່ອົງປະກອບ offcanvas ໄດ້ຖືກເຊື່ອງໄວ້ຕົວຈິງແລ້ວ (ie ກ່ອນທີ່ hidden.bs.offcanvasເຫດການຈະເກີດຂື້ນ).
getInstance ວິທີການ ຄົງ ທີ່ທີ່ອະນຸຍາດໃຫ້ທ່ານໄດ້ຮັບຕົວຢ່າງ offcanvas ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM
getOrCreateInstance ວິທີການ ຄົງ ທີ່ທີ່ຊ່ວຍໃຫ້ທ່ານໄດ້ຮັບ instance offcanvas ທີ່ກ່ຽວຂ້ອງກັບອົງປະກອບ DOM, ຫຼືສ້າງໃຫມ່ໃນກໍລະນີທີ່ມັນບໍ່ໄດ້ຖືກເລີ່ມຕົ້ນ.

ເຫດການ

ຫ້ອງຮຽນ offcanvas ຂອງ Bootstrap ເປີດເຜີຍເຫດການບາງຢ່າງສໍາລັບການເຊື່ອມໂຍງກັບການເຮັດວຽກຂອງ offcanvas.

ປະເພດເຫດການ ລາຍລະອຽດ
show.bs.offcanvas ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ showວິທີການຕົວຢ່າງຖືກເອີ້ນ.
shown.bs.offcanvas ເຫດການນີ້ຖືກຍິງອອກເມື່ອອົງປະກອບ offcanvas ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
hide.bs.offcanvas ເຫດການນີ້ຖືກຍິງທັນທີເມື່ອ hideວິທີການໄດ້ຖືກເອີ້ນ.
hidden.bs.offcanvas ເຫດການນີ້ຖືກຍິງອອກເມື່ອອົງປະກອບ offcanvas ຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
var myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', function () {
  // do something...
})