ផ្ទាំងក្រណាត់
បង្កើតរបារចំហៀងដែលលាក់នៅក្នុងគម្រោងរបស់អ្នកសម្រាប់ការរុករក រទេះទិញទំនិញ និងច្រើនទៀតជាមួយនឹងថ្នាក់មួយចំនួន និងកម្មវិធីជំនួយ JavaScript របស់យើង។
របៀបដែលវាដំណើរការ
Offcanvas គឺជាសមាសភាគរបារចំហៀងដែលអាចត្រូវបានបិទបើកតាមរយៈ JavaScript ដើម្បីបង្ហាញពីគែមខាងឆ្វេង ខាងស្តាំ ឬខាងក្រោមនៃច្រកមើល។ ប៊ូតុង ឬយុថ្កាត្រូវបានប្រើជាគន្លឹះដែលភ្ជាប់ទៅនឹងធាតុជាក់លាក់ដែលអ្នកបិទបើក ហើយ data
គុណលក្ខណៈត្រូវបានប្រើដើម្បីហៅ JavaScript របស់យើង។
- Offcanvas ចែករំលែកកូដ JavaScript ដូចគ្នាខ្លះជាម៉ូឌុល។ តាមគំនិត ពួកវាគឺស្រដៀងគ្នាណាស់ ប៉ុន្តែពួកវាជាកម្មវិធីជំនួយដាច់ដោយឡែក។
- ស្រដៀងគ្នានេះដែរ អថេរ Sass ប្រភព មួយចំនួន សម្រាប់រចនាប័ទ្ម និងវិមាត្ររបស់ offcanvas ត្រូវបានទទួលមរតកពីអថេររបស់ modal ។
- នៅពេលបង្ហាញ offcanvas រួមបញ្ចូលផ្ទាំងខាងក្រោយលំនាំដើមដែលអាចចុចដើម្បីលាក់ offcanvas ។
- ស្រដៀងទៅនឹងគំរូដែរ មានតែផ្ទាំងក្រណាត់មួយប៉ុណ្ណោះដែលអាចបង្ហាញក្នុងពេលតែមួយ។
ព្រឺក្បាល! ដោយគិតពីរបៀបដែល CSS គ្រប់គ្រងចលនា អ្នកមិនអាចប្រើ margin
ឬ translate
នៅលើ .offcanvas
ធាតុមួយ។ ជំនួសមកវិញ ប្រើថ្នាក់ជាធាតុរុំឯករាជ្យ។
prefers-reduced-motion
សំណួរមេឌៀ។ សូមមើល
ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្រួលរបស់យើង ។
ឧទាហរណ៍
សមាសធាតុ Offcanvas
ខាងក្រោមគឺជាឧទាហរណ៍ offcanvas ដែលត្រូវបានបង្ហាញតាមលំនាំដើម (តាមរយៈ .show
) .offcanvas
។ Offcanvas រួមបញ្ចូលការគាំទ្រសម្រាប់បឋមកថាដែលមានប៊ូតុងបិទ និងថ្នាក់រាងកាយជាជម្រើសសម្រាប់ដំបូងមួយចំនួន 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 ទេ ដូច្នេះអ្នកត្រូវតែបន្ថែមថ្នាក់កែប្រែមួយខាងក្រោម។
.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>
បាតផ្ទាំងក្រណាត់
<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">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>
ភាពងាយស្រួល
ដោយសារបន្ទះ 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-backdrop-bg: $modal-backdrop-bg;
$offcanvas-backdrop-opacity: $modal-backdrop-opacity;
ការប្រើប្រាស់
កម្មវិធីជំនួយ offcanvas ប្រើប្រាស់ថ្នាក់ និងគុណលក្ខណៈមួយចំនួន ដើម្បីដោះស្រាយការលើកធ្ងន់៖
.offcanvas
លាក់មាតិកា.offcanvas.show
បង្ហាញមាតិកា.offcanvas-start
លាក់ offcanvas នៅខាងឆ្វេង.offcanvas-end
លាក់ offcanvas នៅខាងស្តាំ.offcanvas-bottom
លាក់ offcanvas នៅខាងក្រោម
បន្ថែមប៊ូតុងបិទជាមួយនឹង data-bs-dismiss="offcanvas"
គុណលក្ខណៈ ដែលបង្កឱ្យមានមុខងារ JavaScript ។ ត្រូវប្រាកដថាប្រើ <button>
ធាតុជាមួយវាសម្រាប់ឥរិយាបថត្រឹមត្រូវនៅគ្រប់ឧបករណ៍ទាំងអស់។
តាមរយៈគុណលក្ខណៈទិន្នន័យ
បិទបើក
បន្ថែម data-bs-toggle="offcanvas"
និង មួយ 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>
តាមរយៈ 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 |
អនុវត្តផ្ទាំងខាងក្រោយនៅលើរាងកាយខណៈពេលដែល offcanvas បើក |
keyboard |
ប៊ូលីន | true |
បិទផ្ទាំងក្រណាត់នៅពេលចុចគ្រាប់ចុចគេច |
scroll |
ប៊ូលីន | false |
អនុញ្ញាតឱ្យរំកិលរាងកាយខណៈពេលដែល offcanvas បើក |
វិធីសាស្រ្ត
វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល
វិធីសាស្រ្ត API ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើសពីនេះទៀត ការហៅវិធីសាស្រ្តលើ សមាសភាគការផ្លាស់ប្តូរនឹងត្រូវបានមិនអើពើ ។
ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាធាតុ offcanvas ។ ទទួលយកជម្រើសស្រេចចិត្ត object
។
អ្នកអាចបង្កើត instance offcanvas ជាមួយ constructor ឧទាហរណ៍៖
var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
វិធីសាស្រ្ត | ការពិពណ៌នា |
---|---|
toggle |
បិទ/បើកធាតុ offcanvas ដើម្បីបង្ហាញ ឬលាក់។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលធាតុ offcanvas ត្រូវបានបង្ហាញ ឬលាក់ (ឧទាហរណ៍ មុនពេល shown.bs.offcanvas ឬ hidden.bs.offcanvas ព្រឹត្តិការណ៍កើតឡើង)។ |
show |
បង្ហាញធាតុ offcanvas ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលធាតុ offcanvas ពិតជាត្រូវបានបង្ហាញ (ឧ. មុន shown.bs.offcanvas ព្រឹត្តិការណ៍កើតឡើង)។ |
hide |
លាក់ធាតុ offcanvas ។ ត្រឡប់ទៅអ្នកហៅទូរសព្ទវិញមុនពេលធាតុ offcanvas ពិតជាត្រូវបានលាក់ (ឧ. មុន hidden.bs.offcanvas ព្រឹត្តិការណ៍កើតឡើង)។ |
getInstance |
វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានវត្ថុ offcanvas ដែលភ្ជាប់ជាមួយធាតុ DOM |
getOrCreateInstance |
វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានវត្ថុ offcanvas ដែលភ្ជាប់ជាមួយធាតុ DOM ឬបង្កើតថ្មីមួយក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម |
ព្រឹត្តិការណ៍
ថ្នាក់ offcanvas របស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារ offcanvas ។
ប្រភេទព្រឹត្តិការណ៍ | ការពិពណ៌នា |
---|---|
show.bs.offcanvas |
ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល show វិធីសាស្ត្រ instance ត្រូវបានហៅ។ |
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...
})