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

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

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

ផ្ទាំងក្រណាត់
មាតិកាសម្រាប់ 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>ការរមូរ។

Offcanvas ជាមួយនឹងការរមូររាងកាយ

សាកល្បងរំកិលទំព័រដែលនៅសល់ដើម្បីមើលជម្រើសនេះនៅក្នុងសកម្មភាព។

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>

ផ្ទៃខាងក្រោយឋិតិវន្ត

នៅពេលដែលផ្ទាំងខាងក្រោយត្រូវបានកំណត់ទៅជាឋិតិវន្ត ផ្ទាំងក្រណាត់នឹងមិនបិទនៅពេលចុចនៅខាងក្រៅវា។

ផ្ទាំងក្រណាត់
ខ្ញុំនឹងមិនបិទទេប្រសិនបើអ្នកចុចនៅខាងក្រៅខ្ញុំ។
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>

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

បានបន្ថែមនៅក្នុង v5.2.0

ផ្លាស់ប្តូររូបរាងរបស់ offcanvases ជាមួយនឹងឧបករណ៍ប្រើប្រាស់ ដើម្បីផ្គូផ្គងពួកវាឱ្យកាន់តែប្រសើរទៅនឹងបរិបទផ្សេងៗ ដូចជារបាររុករកងងឹត។ នៅទីនេះយើងបន្ថែម .text-bg-darkទៅ .offcanvasនិង .btn-close-whiteសម្រាប់ .btn-closeរចនាប័ទ្មត្រឹមត្រូវជាមួយ offcanvas ងងឹត។ ប្រសិនបើអ្នកមានទម្លាក់ចុះនៅក្នុងនោះ សូមពិចារណាបន្ថែម .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លាក់មាតិកានៅក្នុងផ្ទាំងក្រណាត់ខាងក្រោម lgចំណុចឈប់ ប៉ុន្តែបង្ហាញខ្លឹមសារខាងលើ lgចំណុចឈប់។

ប្ដូរទំហំកម្មវិធីរុករកតាមអ៊ីនធឺណិតរបស់អ្នក ដើម្បីបង្ហាញបិទបើកបិទបើកដែលឆ្លើយតប។
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 ឆ្លើយតបមាននៅទូទាំងសម្រាប់ចំណុចឈប់នីមួយៗ។

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

សាកល្បងឧទាហរណ៍ខាងលើ ខាងស្ដាំ និងខាងក្រោមខាងក្រោម។

កំពូល Offcanvas
...
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>
Offcanvas ត្រឹមត្រូវ។
...
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-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>
ខណៈពេលដែលវិធីទាំងពីរដើម្បីច្រានចោល 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 ។ នៅពេលដែលធាតុមាន data-bs-config='{"delay":0, "title":123}'និង data-bs-title="456"គុណលក្ខណៈ តម្លៃចុងក្រោយ titleនឹងជា 456ហើយគុណលក្ខណៈទិន្នន័យដាច់ដោយឡែកនឹងបដិសេធតម្លៃដែលបានផ្តល់ឱ្យនៅលើ data-bs-config. លើសពីនេះ គុណលក្ខណៈទិន្នន័យដែលមានស្រាប់អាចដាក់តម្លៃ JSON ដូចជា data-bs-delay='{"show":0,"hide":150}'.

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
backdrop ប៊ូលីនឬខ្សែអក្សរstatic true អនុវត្តផ្ទាំងខាងក្រោយនៅលើរាងកាយខណៈពេលដែល offcanvas បើក។ ជាជម្រើស បញ្ជាក់ staticសម្រាប់ផ្ទាំងខាងក្រោយដែលមិនបិទផ្ទាំងក្រណាត់នៅពេលចុច។
keyboard ប៊ូលីន true បិទផ្ទាំងក្រណាត់នៅពេលចុចគ្រាប់ចុចគេច។
scroll ប៊ូលីន false អនុញ្ញាតឱ្យរំកិលរាងកាយខណៈពេលដែល offcanvas បើក។

វិធីសាស្រ្ត

វិធីសាស្រ្ត និងការផ្លាស់ប្តូរអសមកាល

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

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

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

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

const bsOffcanvas = new bootstrap.Offcanvas('#myOffcanvas')
វិធីសាស្រ្ត ការពិពណ៌នា
getInstance វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានវត្ថុ offcanvas ដែលភ្ជាប់ជាមួយធាតុ DOM ។
getOrCreateInstance វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានវត្ថុ offcanvas ដែលភ្ជាប់ជាមួយធាតុ DOM ឬបង្កើតថ្មីមួយក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម។
hide លាក់ធាតុ offcanvas ។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ​មុន​ពេល​ធាតុ offcanvas ពិត​ជា​ត្រូវ​បាន​លាក់ (ឧ. មុន hidden.bs.offcanvas​ព្រឹត្តិការណ៍​កើត​ឡើង)។
show បង្ហាញធាតុ offcanvas ។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ​មុន​ពេល​ធាតុ offcanvas ពិត​ជា​ត្រូវ​បាន​បង្ហាញ (ឧ. មុន shown.bs.offcanvas​ព្រឹត្តិការណ៍​កើត​ឡើង)។
toggle បិទ/បើកធាតុ offcanvas ដើម្បីបង្ហាញ ឬលាក់។ ត្រឡប់ទៅកាន់អ្នកហៅទូរសព្ទវិញ មុនពេលធាតុ offcanvas ត្រូវបានបង្ហាញ ឬលាក់ (ឧទាហរណ៍ មុនពេល shown.bs.offcanvasឬ hidden.bs.offcanvasព្រឹត្តិការណ៍កើតឡើង)។

ព្រឹត្តិការណ៍

ថ្នាក់ offcanvas របស់ Bootstrap បង្ហាញព្រឹត្តិការណ៍មួយចំនួនសម្រាប់ការភ្ជាប់មុខងារ offcanvas ។

ប្រភេទព្រឹត្តិការណ៍ ការពិពណ៌នា
hide.bs.offcanvas ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញភ្លាមៗនៅពេលដែល hideវិធីសាស្ត្រត្រូវបានហៅ។
hidden.bs.offcanvas ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញនៅពេលដែលធាតុ offcanvas ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់ (នឹងរង់ចាំការផ្លាស់ប្តូរ CSS ដើម្បីបញ្ចប់)។
hidePrevented.bs.offcanvas ព្រឹត្តិការណ៍នេះត្រូវបានបណ្តេញចេញនៅពេលដែល offcanvas ត្រូវបានបង្ហាញ ផ្ទាំងខាងក្រោយរបស់វាគឺ staticហើយការចុចនៅខាងក្រៅ offcanvas ត្រូវបានអនុវត្ត។ ព្រឹត្តិការណ៍ក៏ត្រូវបានបណ្តេញចេញផងដែរ នៅពេលដែលចុចគ្រាប់ចុចរត់គេច ហើយ keyboardជម្រើសត្រូវបានកំណត់ទៅ false.
show.bs.offcanvas ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល showវិធីសាស្ត្រ instance ត្រូវបានហៅ។
shown.bs.offcanvas ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ដែល​ធាតុ offcanvas ត្រូវ​បាន​ធ្វើ​ឱ្យ​មើល​ឃើញ​ដោយ​អ្នក​ប្រើ (នឹង​រង់ចាំ​ការ​ផ្លាស់​ប្តូរ CSS ដើម្បី​បញ្ចប់)។ 
const myOffcanvas = document.getElementById('myOffcanvas')
myOffcanvas.addEventListener('hidden.bs.offcanvas', event => {
  // do something...
})