រំលងទៅមាតិកាសំខាន់ រំលងទៅការរុករកឯកសារ
in English

ផ្ទាំងក្រណាត់

បង្កើតរបារចំហៀងដែលលាក់នៅក្នុងគម្រោងរបស់អ្នកសម្រាប់ការរុករក រទេះទិញទំនិញ និងច្រើនទៀតជាមួយនឹងថ្នាក់មួយចំនួន និងកម្មវិធីជំនួយ JavaScript របស់យើង។

របៀបដែលវាដំណើរការ

Offcanvas គឺជាសមាសភាគរបារចំហៀងដែលអាចត្រូវបានបិទបើកតាមរយៈ JavaScript ដើម្បីបង្ហាញពីគែមខាងឆ្វេង ខាងស្តាំ ឬខាងក្រោមនៃច្រកមើល។ ប៊ូតុង ឬយុថ្កាត្រូវបានប្រើជាគន្លឹះដែលភ្ជាប់ទៅនឹងធាតុជាក់លាក់ដែលអ្នកបិទបើក ហើយ dataគុណលក្ខណៈត្រូវបានប្រើដើម្បីហៅ JavaScript របស់យើង។

  • Offcanvas ចែករំលែកកូដ JavaScript ដូចគ្នាខ្លះជាម៉ូឌុល។ តាមគំនិត ពួកវាគឺស្រដៀងគ្នាណាស់ ប៉ុន្តែពួកវាជាកម្មវិធីជំនួយដាច់ដោយឡែក។
  • ស្រដៀងគ្នានេះដែរ អថេរ Sass ប្រភព មួយចំនួន សម្រាប់រចនាប័ទ្ម និងវិមាត្ររបស់ offcanvas ត្រូវបានទទួលមរតកពីអថេររបស់ modal ។
  • នៅពេលបង្ហាញ offcanvas រួមបញ្ចូលផ្ទាំងខាងក្រោយលំនាំដើមដែលអាចចុចដើម្បីលាក់ offcanvas ។
  • ស្រដៀងទៅនឹងគំរូដែរ មានតែផ្ទាំងក្រណាត់មួយប៉ុណ្ណោះដែលអាចបង្ហាញក្នុងពេលតែមួយ។

ព្រឺក្បាល! ដោយគិតពីរបៀបដែល CSS គ្រប់គ្រងចលនា អ្នកមិនអាចប្រើ margintranslateនៅលើ .offcanvasធាតុមួយ។ ជំនួសមកវិញ ប្រើថ្នាក់ជាធាតុរុំឯករាជ្យ។

ឥទ្ធិពលចលនានៃសមាសភាគនេះគឺអាស្រ័យលើ prefers-reduced-motionសំណួរមេឌៀ។ សូមមើល ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្រួលរបស់យើង

ឧទាហរណ៍

សមាសធាតុ Offcanvas

ខាងក្រោមគឺជាឧទាហរណ៍ offcanvas ដែលត្រូវបានបង្ហាញតាមលំនាំដើម (តាមរយៈ .show) .offcanvas។ Offcanvas រួមបញ្ចូលការគាំទ្រសម្រាប់បឋមកថាដែលមានប៊ូតុងបិទ និងថ្នាក់រាងកាយជាជម្រើសសម្រាប់ដំបូងមួយចំនួន 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 ទេ ដូច្នេះអ្នកត្រូវតែបន្ថែមថ្នាក់កែប្រែមួយខាងក្រោម។

  • .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-targethrefទៅ ធាតុ ដើម្បី ចាត់ចែង ការគ្រប់គ្រង ដោយស្វ័យប្រវត្តិ នៃ ធាតុ 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 មិនត្រូវគ្នា នឹងគំរូរចនាប្រអប់ម៉ូឌុល WAI-ARIA ទេ។ ធ្វើវាដោយហានិភ័យផ្ទាល់ខ្លួនរបស់អ្នក។

តាមរយៈ 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 ទាំងអស់គឺ អសមកាល ហើយចាប់ផ្តើមការ ផ្លាស់ប្តូរ ។ ពួកគេត្រឡប់ទៅអ្នកហៅចូលវិញភ្លាមៗ នៅពេលដែលការផ្លាស់ប្តូរត្រូវបានចាប់ផ្តើម ប៉ុន្តែ មុនពេលវាបញ្ចប់ ។ លើស​ពី​នេះ​ទៀត ការ​ហៅ​វិធី​សា​ស្រ្ត​លើ ​សមាសភាគ​ការ​ផ្លាស់​ប្តូរ​នឹង​ត្រូវ​បាន​មិន​អើពើ

សូមមើលឯកសារ JavaScript របស់យើងសម្រាប់ព័ត៌មានបន្ថែម

ធ្វើឱ្យមាតិការបស់អ្នកសកម្មជាធាតុ offcanvas ។ ទទួលយកជម្រើសស្រេចចិត្ត object

អ្នកអាចបង្កើត instance offcanvas ជាមួយ constructor ឧទាហរណ៍៖

var myOffcanvas = document.getElementById('myOffcanvas')
var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas)
វិធីសាស្រ្ត ការពិពណ៌នា
toggle បិទ/បើកធាតុ offcanvas ដើម្បីបង្ហាញ ឬលាក់។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលធាតុ offcanvas ត្រូវបានបង្ហាញ ឬលាក់ (ឧទាហរណ៍ មុនពេល shown.bs.offcanvashidden.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...
})