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