ຜ້າໃບ

ສ້າງແຖບດ້ານຂ້າງທີ່ເຊື່ອງໄວ້ໃນໂຄງການຂອງທ່ານສໍາລັບການນໍາທາງ, ກະຕ່າຊື້ເຄື່ອງ, ແລະອື່ນໆອີກດ້ວຍຫ້ອງຮຽນຈໍານວນຫນ້ອຍແລະ 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 ຫຼືອົງປະກອບທີ່ກໍາຫນົດເອງຢູ່ທີ່ນີ້.

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>

ການສາທິດສົດ

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

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

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

ເຊື່ອມຕໍ່ກັບ href

ບາງຂໍ້ຄວາມເປັນຕົວຍຶດ. ໃນຊີວິດຈິງທ່ານສາມາດມີອົງປະກອບທີ່ທ່ານເລືອກ. ມັກ, ຂໍ້ຄວາມ, ຮູບພາບ, ລາຍຊື່, ແລະອື່ນໆ.

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>

ຮ່າງກາຍເລື່ອນ

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

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

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>

ການເລື່ອນຮ່າງກາຍ ແລະສາກຫຼັງ

ນອກນັ້ນທ່ານຍັງສາມາດເປີດໃຊ້ການ <body>ເລື່ອນພາບດ້ວຍສາກຫຼັງທີ່ເບິ່ງເຫັນໄດ້.

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

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>

ສາກຫຼັງຄົງທີ່

ເມື່ອສາກຫຼັງຖືກຕັ້ງເປັນແບບຄົງທີ່, offcanvas ຈະບໍ່ປິດເມື່ອຄລິກຢູ່ນອກມັນ.

ຂ້ອຍຈະບໍ່ປິດຖ້າທ່ານກົດຢູ່ນອກຂ້ອຍ.

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 ຊ້ໍາ

ເພີ່ມໃນ v5.2.0

ປ່ຽນແປງຮູບລັກສະນະຂອງ offcanvases ກັບສິ່ງອໍານວຍຄວາມສະດວກເພື່ອໃຫ້ກົງກັບພວກມັນດີກວ່າໃນສະພາບການທີ່ແຕກຕ່າງກັນເຊັ່ນແຖບ navbars ຊ້ໍາ. ທີ່ນີ້ພວກເຮົາເພີ່ມ .text-bg-darkໃສ່ .offcanvasແລະ .btn-close-whiteສໍາ .btn-closeລັບຄໍເຕົ້າໄຂ່ທີ່ທີ່ເຫມາະສົມກັບ offcanvas ຊ້ໍາ. ຖ້າທ່ານມີ dropdowns ພາຍໃນ, ພິຈາລະນາເພີ່ມ .dropdown-menu-darkໃສ່ .dropdown-menu.

ວາງເນື້ອໃນ offcanvas ຢູ່ທີ່ນີ້.

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>

ຕອບສະໜອງ

ເພີ່ມໃນ v5.2.0

ຫ້ອງຮຽນ offcanvas ແບບຕອບສະໜອງໄດ້ເຊື່ອງເນື້ອຫາຢູ່ນອກຊ່ອງເບິ່ງຈາກຈຸດຢຸດທີ່ລະບຸ ແລະລົງ. ເໜືອຈຸດຢຸດນັ້ນ, ເນື້ອໃນພາຍໃນຈະປະຕິບັດຕົວຕາມປົກກະຕິ. ຕົວຢ່າງ, .offcanvas-lgເຊື່ອງເນື້ອຫາຢູ່ໃນ offcanvas ຂ້າງລຸ່ມນີ້ lgbreakpoint, ແຕ່ສະແດງໃຫ້ເຫັນເນື້ອໃນຂ້າງເທິງ lgbreakpoint.

ປັບຂະໜາດໂປຣແກຣມທ່ອງເວັບຂອງທ່ານເພື່ອສະແດງການຕອບສະໜອງ offcanvas ສະຫຼັບ.

ນີ້ແມ່ນເນື້ອໃນພາຍໃນ .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>

ຫ້ອງຮຽນ offcanvas ຕອບສະຫນອງແມ່ນມີຢູ່ທົ່ວສໍາລັບແຕ່ລະ breakpoint.

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

ການຈັດວາງ

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

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

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

...

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>

...

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>

...

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>

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

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

CSS

ຕົວແປ

ເພີ່ມໃນ v5.2.0

ເປັນສ່ວນຫນຶ່ງຂອງວິທີການຕົວແປ CSS ທີ່ພັດທະນາຂອງ Bootstrap, offcanvas ປະຈຸບັນໃຊ້ຕົວແປ CSS ທ້ອງຖິ່ນ .offcanvasເພື່ອເພີ່ມປະສິດທິພາບການປັບແຕ່ງໃນເວລາທີ່ແທ້ຈິງ. ຄ່າສໍາລັບຕົວແປ CSS ແມ່ນຖືກກໍານົດຜ່ານ Sass, ດັ່ງນັ້ນການປັບແຕ່ງ Sass ຍັງຖືກສະຫນັບສະຫນູນ, ເຊັ່ນກັນ.

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

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

ການນໍາໃຊ້

ປັ໊ກອິນ offcanvas ໃຊ້ບາງຊັ້ນຮຽນແລະຄຸນລັກສະນະຕ່າງໆເພື່ອຈັດການກັບການຍົກຫນັກ:

.offcanvasເຊື່ອງເນື້ອຫາ
.offcanvas.showສະແດງໃຫ້ເຫັນເນື້ອໃນ
.offcanvas-startເຊື່ອງ offcanvas ຢູ່ເບື້ອງຊ້າຍ
.offcanvas-endເຊື່ອງ offcanvas ຢູ່ເບື້ອງຂວາ
.offcanvas-topເຊື່ອງ 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.

ປິດ

ການຍົກເລີກສາມາດເຮັດໄດ້ດ້ວຍ dataຄຸນລັກສະນະຂອງປຸ່ມ ພາຍໃນ offcanvas ດັ່ງທີ່ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້:

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

ຫຼືໃສ່ປຸ່ມ ນອກ offcanvas ໂດຍໃຊ້ data-bs-targetດັ່ງທີ່ສະແດງໃຫ້ເຫັນຂ້າງລຸ່ມນີ້:

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

ໃນຂະນະທີ່ທັງສອງວິທີທີ່ຈະຍົກເລີກ offcanvas ໄດ້ຮັບການສະຫນັບສະຫນູນ, ຈົ່ງຈື່ໄວ້ວ່າການໄລ່ອອກຈາກນອກ offcanvas ບໍ່ກົງກັບຮູບແບບ ARIA Authoring Practices Guide Dialog (modal) . ເຮັດນີ້ຢູ່ໃນຄວາມສ່ຽງຂອງທ່ານເອງ.

ຜ່ານ JavaScript

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

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

ທາງເລືອກ

ເນື່ອງຈາກທາງເລືອກສາມາດຖືກສົ່ງຜ່ານຄຸນລັກສະນະຂໍ້ມູນຫຼື JavaScript, ທ່ານສາມາດເພີ່ມຊື່ທາງເລືອກໃສ່ data-bs-, ດັ່ງໃນ data-bs-animation="{value}". ໃຫ້ແນ່ໃຈວ່າປ່ຽນປະເພດກໍລະນີຂອງຊື່ທາງເລືອກຈາກ " camelCase " ເປັນ " kebab-case " ເມື່ອຖ່າຍທອດທາງເລືອກຜ່ານຄຸນລັກສະນະຂໍ້ມູນ. ຕົວຢ່າງ, ໃຊ້ data-bs-custom-class="beautifier"ແທນ data-bs-customClass="beautifier".

ໃນຖານະເປັນຂອງ Bootstrap 5.2.0, ອົງປະກອບທັງຫມົດສະຫນັບສະຫນູນ ຄຸນລັກສະນະຂໍ້ມູນທີ່ສະຫງວນໄວ້ສໍາ ລັບ ການທົດລອງdata-bs-config ທີ່ສາມາດຈັດການຕັ້ງຄ່າອົງປະກອບງ່າຍດາຍເປັນ JSON string. ເມື່ອອົງປະກອບມີ data-bs-config='{"delay":0, "title":123}'ແລະ data-bs-title="456"ຄຸນລັກສະນະ, ຄ່າສຸດທ້າຍ titleຈະເປັນ 456ແລະຄຸນລັກສະນະຂອງຂໍ້ມູນແຍກຕ່າງຫາກຈະ override ຄ່າທີ່ໃຫ້ຢູ່ໃນ data-bs-config. ນອກຈາກນັ້ນ, ຄຸນລັກສະນະຂໍ້ມູນທີ່ມີຢູ່ແມ່ນສາມາດຈັດວາງຄ່າ JSON ເຊັ່ນ data-bs-delay='{"show":0,"hide":150}'.

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

ວິທີການ

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

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

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

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

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

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')

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

ເຫດການ

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

ປະເພດເຫດການ	ລາຍລະອຽດ
`hide.bs.offcanvas`	ເຫດການນີ້ຖືກຍິງທັນທີເມື່ອ `hide`ວິທີການໄດ້ຖືກເອີ້ນ.
`hidden.bs.offcanvas`	ເຫດການນີ້ຖືກຍິງອອກເມື່ອອົງປະກອບ offcanvas ຖືກເຊື່ອງໄວ້ຈາກຜູ້ໃຊ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).
`hidePrevented.bs.offcanvas`	ເຫດການນີ້ແມ່ນຖືກຍິງອອກເມື່ອ offcanvas ຖືກສະແດງ, ສາກຫຼັງຂອງມັນແມ່ນ `static`ແລະການຄລິກທີ່ຢູ່ນອກ offcanvas ແມ່ນປະຕິບັດ. ເຫດການດັ່ງກ່າວຍັງຖືກຍິງອອກເມື່ອກົດປຸ່ມ escape ຖືກກົດຂື້ນແລະ `keyboard`ຕົວເລືອກຖືກຕັ້ງເປັນ `false`.
`show.bs.offcanvas`	ເຫດການນີ້ໄຟໄຫມ້ທັນທີເມື່ອ `show`ວິທີການຕົວຢ່າງຖືກເອີ້ນ.
`shown.bs.offcanvas`	ເຫດການນີ້ຖືກຍິງອອກເມື່ອອົງປະກອບ offcanvas ໄດ້ຖືກເຮັດໃຫ້ຜູ້ໃຊ້ເຫັນໄດ້ (ຈະລໍຖ້າການປ່ຽນ CSS ສໍາເລັດ).

const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})

ຜ້າໃບ

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

ຕົວຢ່າງ

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

ຜ້າໃບ

ການສາທິດສົດ

ຜ້າໃບ

ຮ່າງກາຍເລື່ອນ

Offcanvas ດ້ວຍການເລື່ອນຮ່າງກາຍ

ການເລື່ອນຮ່າງກາຍ ແລະສາກຫຼັງ

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

ສາກຫຼັງຄົງທີ່

ຜ້າໃບ

offcanvas ຊ້ໍາ

ຜ້າໃບ

ຕອບສະໜອງ

ການຕອບສະ ໜອງ offcanvas

ການຈັດວາງ

Offcanvas ເທິງ

Offcanvas ສິດ

Offcanvas ລຸ່ມ

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

CSS

ຕົວແປ

ຕົວແປ Sass

ການນໍາໃຊ້

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

ສະຫຼັບ

ປິດ

ຜ່ານ JavaScript

ທາງເລືອກ

ວິທີການ

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

ເຫດການ

ຜ້າໃບ

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

ຕົວຢ່າງ

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

ຜ້າໃບ

ການສາທິດສົດ

ຜ້າໃບ

ຮ່າງກາຍເລື່ອນ

Offcanvas ດ້ວຍການເລື່ອນຮ່າງກາຍ

ການເລື່ອນຮ່າງກາຍ ແລະສາກຫຼັງ

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

ສາກຫຼັງຄົງທີ່

ຜ້າໃບ

offcanvas ຊ້ໍາ

ຜ້າໃບ

ຕອບສະໜອງ

ການຕອບສະ ໜອງ offcanvas

ການຈັດວາງ

Offcanvas ເທິງ

Offcanvas ສິດ

Offcanvas ລຸ່ມ

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

CSS

ຕົວແປ

ຕົວແປ Sass

ການ​ນໍາ​ໃຊ້

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

ສະຫຼັບ

ປິດ

ຜ່ານ JavaScript

ທາງເລືອກ

ວິທີການ

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

ເຫດການ

ການນໍາໃຊ້

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