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

នំដុត

ជំរុញ​ការ​ជូន​ដំណឹង​ទៅ​កាន់​អ្នក​ទស្សនា​របស់​អ្នក​ជា​មួយ​នឹង toast, សារ​ជូន​ដំណឹង​ទម្ងន់​ស្រាល និង​អាច​ប្ដូរ​តាម​បំណង​យ៉ាង​ងាយ​ស្រួល។

នៅលើទំព័រនេះ។

Toasts គឺជាការជូនដំណឹងទម្ងន់ស្រាលដែលត្រូវបានរចនាឡើងដើម្បីធ្វើត្រាប់តាមការជូនដំណឹងជំរុញដែលត្រូវបានពេញនិយមដោយប្រព័ន្ធប្រតិបត្តិការទូរស័ព្ទ និងកុំព្យូទ័រ។ ពួកវាត្រូវបានបង្កើតឡើងដោយប្រើ flexbox ដូច្នេះពួកវាងាយស្រួលក្នុងការតម្រឹម និងដាក់ទីតាំង។

ទិដ្ឋភាពទូទៅ

អ្វីដែលត្រូវដឹងនៅពេលប្រើកម្មវិធីជំនួយ toast៖

  • Toasts ត្រូវបានជ្រើសរើសសម្រាប់ហេតុផលដំណើរការ ដូច្នេះ អ្នកត្រូវតែចាប់ផ្តើម វា ដោយខ្លួនឯង
  • Toasts នឹងលាក់ដោយស្វ័យប្រវត្តិ ប្រសិនបើអ្នកមិនបញ្ជាក់ autohide: false។
ឥទ្ធិពលចលនានៃសមាសភាគនេះគឺអាស្រ័យលើ prefers-reduced-motionសំណួរមេឌៀ។ សូមមើល ផ្នែកចលនាដែលបានកាត់បន្ថយនៃឯកសារភាពងាយស្រួលរបស់យើង ។

ឧទាហរណ៍

មូលដ្ឋាន

ដើម្បីលើកទឹកចិត្តដល់ការដុតនំដែលអាចពង្រីកបាន និងអាចទស្សន៍ទាយបាន យើងសូមណែនាំបឋមកថា និងតួ។ បឋមកថា Toast ប្រើ display: flexអនុញ្ញាតឱ្យតម្រឹមមាតិកាងាយស្រួល ដោយសាររឹម និងឧបករណ៍ប្រើប្រាស់ flexbox របស់យើង។

នំប៉ាវគឺអាចបត់បែនបានតាមដែលអ្នកត្រូវការ និងមានកំណត់ចំណាំតិចតួចបំផុត។ យ៉ាងហោចណាស់ យើងទាមទារធាតុតែមួយដើម្បីផ្ទុកមាតិកា "ដុត" របស់អ្នក និងលើកទឹកចិត្តយ៉ាងខ្លាំងដល់ប៊ូតុងបិទ។

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>
ពីមុន ស្គ្រីបរបស់យើងបានបន្ថែម .hideថ្នាក់ថាមវន្តដើម្បីលាក់បាំងទាំងស្រុង (ជាមួយ display:none, ជាជាងគ្រាន់តែជាមួយ opacity:0)។ ឥឡូវនេះវាមិនចាំបាច់ទៀតទេ។ ទោះជាយ៉ាងណាក៏ដោយ សម្រាប់ភាពឆបគ្នាថយក្រោយ ស្គ្រីបរបស់យើងនឹងបន្តបិទបើកថ្នាក់ (ទោះបីជាមិនមានតម្រូវការជាក់ស្តែងសម្រាប់វាក៏ដោយ) រហូតដល់កំណែធំបន្ទាប់។

ឧទាហរណ៍ផ្ទាល់

ចុចប៊ូតុងខាងក្រោមដើម្បីបង្ហាញនំបុ័ងអាំង (ដាក់ជាមួយឧបករណ៍ប្រើប្រាស់របស់យើងនៅជ្រុងខាងស្តាំខាងក្រោម) ដែលត្រូវបានលាក់តាមលំនាំដើម។

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

យើង​ប្រើ JavaScript ខាងក្រោម​ដើម្បី​បង្ក​ឱ្យ​មាន​ការ​បង្ហាញ​ការ​សាកល្បង​ផ្ទាល់​របស់​យើង៖

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.show()
  })
}

ថ្លា

នំបញ្ចុកមានពណ៌រលោងបន្តិចដើម្បីបញ្ចូលគ្នាជាមួយអ្វីដែលនៅខាងក្រោមពួកវា។

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ជង់

អ្នកអាចជង់នំដុតដោយរុំវានៅក្នុងធុងដុត ដែលនឹងបន្ថែមគម្លាតមួយចំនួនបញ្ឈរ។

html 
<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-muted">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

មាតិកាផ្ទាល់ខ្លួន

ប្ដូរ​ការ​ធ្វើ​នំ​របស់​អ្នក​តាម​បំណង​ដោយ​យក​ធាតុ​រង​ចេញ កែ​សម្រួល​វា​ជាមួយ ​ឧបករណ៍​ប្រើប្រាស់ ឬ​ដោយ​បន្ថែម​ការ​សម្គាល់​ផ្ទាល់​ខ្លួន​របស់​អ្នក។ នៅទីនេះយើងបានបង្កើតនំបុ័ងអាំងដ៏សាមញ្ញមួយដោយយកលំនាំដើមចេញ .toast-headerបន្ថែមរូបតំណាងលាក់ផ្ទាល់ខ្លួនពី Bootstrap Icons និងប្រើប្រាស់ ឧបករណ៍ប្រើប្រាស់ flexbox មួយចំនួន ដើម្បីកែតម្រូវប្លង់។

html 
<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

ម៉្យាងទៀត អ្នកក៏អាចបន្ថែមវត្ថុបញ្ជា និងសមាសធាតុបន្ថែមទៅលើនំដុតផងដែរ។

html 
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

គ្រោងការណ៍ពណ៌

ដោយផ្អែកលើឧទាហរណ៍ខាងលើ អ្នកអាចបង្កើតពណ៌ចម្រុះផ្សេងគ្នាជាមួយ ឧបករណ៍ប្រើប្រាស់ ពណ៌ និង ផ្ទៃខាងក្រោយ របស់យើង ។ នៅទីនេះយើងបានបន្ថែម .text-bg-primaryទៅ .toastហើយបន្ទាប់មកបន្ថែម .btn-close-whiteទៅប៊ូតុងបិទរបស់យើង។ សម្រាប់គែមស្រទន់ យើងដកស៊ុមលំនាំដើមចេញជាមួយ .border-0.

html 
<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

ការដាក់

ដាក់នំជាមួយ CSS ផ្ទាល់ខ្លួនតាមដែលអ្នកត្រូវការ។ ផ្នែកខាងលើខាងស្តាំត្រូវបានប្រើសម្រាប់ការជូនដំណឹង ដូចជាផ្នែកកណ្តាលខាងលើ។ ប្រសិនបើអ្នកគ្រាន់តែនឹងបង្ហាញនំមួយក្នុងពេលតែមួយ សូមដាក់រចនាប័ទ្មទីតាំងត្រឹមត្រូវនៅលើ .toast.

Bootstrap 11 នាទីមុន។
សួស្តី​ពិភពលោក! នេះជាសារជូនពរ។
html 
<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-dark position-relative bd-example-toasts">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

សម្រាប់ប្រព័ន្ធដែលបង្កើតការជូនដំណឹងបន្ថែម សូមពិចារណាប្រើប្រាស់ធាតុរុំ ដូច្នេះពួកគេអាចជង់បានយ៉ាងងាយស្រួល។

html 
<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

អ្នកក៏អាចទទួលបានភាពប្រណិតជាមួយនឹងឧបករណ៍ប្រើប្រាស់ flexbox ដើម្បីតម្រឹមនំបញ្ចុកផ្តេក និង/ឬបញ្ឈរ។

html 
<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

ភាពងាយស្រួល

Toasts មានបំណងដើម្បីជាការរំខានតិចតួចដល់អ្នកទស្សនា ឬអ្នកប្រើប្រាស់របស់អ្នក ដូច្នេះដើម្បីជួយអ្នកដែលមានកម្មវិធីអានអេក្រង់ និងបច្ចេកវិទ្យាជំនួយស្រដៀងគ្នា អ្នកគួរតែរុំនំបុ័ងរបស់អ្នកនៅក្នុង aria-liveតំបន់ មួយ ។ ការផ្លាស់ប្តូរទៅតំបន់បន្តផ្ទាល់ (ដូចជាការចាក់/ធ្វើបច្ចុប្បន្នភាពសមាសធាតុ toast) ត្រូវបានប្រកាសដោយស្វ័យប្រវត្តិដោយអ្នកអានអេក្រង់ ដោយមិនចាំបាច់ផ្លាស់ទីការផ្តោតអារម្មណ៍របស់អ្នកប្រើ ឬរំខានអ្នកប្រើប្រាស់។ លើសពីនេះទៀត រួមបញ្ចូល aria-atomic="true"ដើម្បីធានាថា toast ទាំងមូលតែងតែត្រូវបានប្រកាសជាឯកតា (អាតូមិក) តែមួយ ជាជាងការប្រកាសពីអ្វីដែលបានផ្លាស់ប្តូរ (ដែលអាចនាំឱ្យមានបញ្ហាប្រសិនបើអ្នកគ្រាន់តែធ្វើបច្ចុប្បន្នភាពផ្នែកនៃមាតិការបស់ toast ឬប្រសិនបើបង្ហាញមាតិកា toast ដូចគ្នា នៅពេលក្រោយ) ។ ប្រសិនបើព័ត៌មានដែលត្រូវការមានសារៈសំខាន់សម្រាប់ដំណើរការ ឧទាហរណ៍សម្រាប់បញ្ជីកំហុសក្នុងទម្រង់មួយ បន្ទាប់មកប្រើ សមាសភាគការជូនដំណឹងជំនួសឱ្យនំប៉័ង។

ចំណាំថាតំបន់បន្តផ្ទាល់ត្រូវតែមានវត្តមាននៅក្នុងការសម្គាល់ មុនពេល toast ត្រូវបានបង្កើត ឬធ្វើបច្ចុប្បន្នភាព។ ប្រសិនបើអ្នកបង្កើតថាមវន្តទាំងពីរក្នុងពេលតែមួយ ហើយបញ្ចូលពួកវាទៅក្នុងទំព័រ ជាទូទៅពួកវានឹងមិនត្រូវបានប្រកាសដោយបច្ចេកវិទ្យាជំនួយទេ។

អ្នកក៏ត្រូវសម្របសម្រួល roleនិង aria-liveកម្រិតអាស្រ័យលើខ្លឹមសារ។ ប្រសិនបើវាជាសារសំខាន់ដូចជាកំហុស សូមប្រើ role="alert" aria-live="assertive"បើមិនដូច្នេះទេ ប្រើ role="status" aria-live="polite"គុណលក្ខណៈ។

ដោយសារខ្លឹមសារដែលអ្នកកំពុងបង្ហាញការផ្លាស់ប្តូរ ត្រូវប្រាកដថាធ្វើបច្ចុប្បន្នភាពការ delayអស់ពេល ដើម្បីឲ្យអ្នកប្រើប្រាស់មានពេលគ្រប់គ្រាន់ដើម្បីអាននំបុ័ង។

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

នៅពេលប្រើ autohide: falseអ្នកត្រូវតែបន្ថែមប៊ូតុងបិទ ដើម្បីអនុញ្ញាតឱ្យអ្នកប្រើច្រានចោលការដុតនំបុ័ង។

html 
<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ខណៈពេលដែលតាមលក្ខណៈបច្ចេកទេស វាអាចបន្ថែមការគ្រប់គ្រងដែលអាចផ្តោតបាន ឬអាចធ្វើសកម្មភាពបាន (ដូចជាប៊ូតុង ឬតំណភ្ជាប់បន្ថែម) នៅក្នុងនំបុ័ងអាំងរបស់អ្នក អ្នកគួរតែជៀសវាងការធ្វើបែបនេះសម្រាប់ការលាក់ការដុតដោយស្វ័យប្រវត្តិ។ ទោះបីជាអ្នកផ្តល់ពេលឱ្យនំប៉័ង delayអស់ រយៈពេលយូរ ក៏ដោយ អ្នកប្រើប្រាស់ក្តារចុច និងបច្ចេកវិទ្យាជំនួយអាចពិបាកក្នុងការឈានដល់ការដុតនំប៉័ងទាន់ពេលដើម្បីធ្វើសកម្មភាព (ចាប់តាំងពីនំបុ័ងអាំងមិនទទួលបានការផ្តោតអារម្មណ៍នៅពេលវាត្រូវបានបង្ហាញ)។ ប្រសិនបើអ្នកពិតជាត្រូវតែមានការគ្រប់គ្រងបន្ថែមទៀត យើងសូមណែនាំឱ្យប្រើ toast ជាមួយ autohide: false.

CSS

អថេរ

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

ជាផ្នែកមួយនៃវិធីសាស្រ្តអថេរ CSS ដែលកំពុងវិវឌ្ឍន៍របស់ Bootstrap ឥឡូវនេះ toasts ប្រើអថេរ CSS មូលដ្ឋាន .toastសម្រាប់ការកែលម្អតាមពេលវេលាជាក់ស្តែង។ តម្លៃសម្រាប់អថេរ CSS ត្រូវបានកំណត់តាមរយៈ Sass ដូច្នេះការប្ដូរតាមបំណង Sass នៅតែត្រូវបានគាំទ្រផងដែរ។

  --#{$prefix}toast-zindex: #{$zindex-toast};
  --#{$prefix}toast-padding-x: #{$toast-padding-x};
  --#{$prefix}toast-padding-y: #{$toast-padding-y};
  --#{$prefix}toast-spacing: #{$toast-spacing};
  --#{$prefix}toast-max-width: #{$toast-max-width};
  @include rfs($toast-font-size, --#{$prefix}toast-font-size);
  --#{$prefix}toast-color: #{$toast-color};
  --#{$prefix}toast-bg: #{$toast-background-color};
  --#{$prefix}toast-border-width: #{$toast-border-width};
  --#{$prefix}toast-border-color: #{$toast-border-color};
  --#{$prefix}toast-border-radius: #{$toast-border-radius};
  --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
  --#{$prefix}toast-header-color: #{$toast-header-color};
  --#{$prefix}toast-header-bg: #{$toast-header-background-color};
  --#{$prefix}toast-header-border-color: #{$toast-header-border-color};

អថេរ Sass

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba($white, .85);
$toast-border-width:                $border-width;
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               $border-radius;
$toast-box-shadow:                  $box-shadow;
$toast-spacing:                     $container-padding-x;

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

ការប្រើប្រាស់

ចាប់ផ្តើមនំបុ័ងអាំងតាមរយៈ JavaScript៖

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

កេះ

ការច្រានចោលអាចសម្រេចបានជាមួយនឹង dataគុណលក្ខណៈនៅលើប៊ូតុងមួយ នៅក្នុង toast ដូចដែលបានបង្ហាញខាងក្រោម៖

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

ឬនៅលើប៊ូតុង នៅខាងក្រៅ toast ដោយប្រើ data-bs-targetដូចដែលបានបង្ហាញខាងក្រោម៖

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

ជម្រើស

ដោយសារជម្រើសអាចត្រូវបានឆ្លងកាត់តាមគុណលក្ខណៈទិន្នន័យ ឬ 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}'.

ឈ្មោះ ប្រភេទ លំនាំដើម ការពិពណ៌នា
animation ប៊ូលីន true អនុវត្តការផ្លាស់ប្តូរបន្ថយ CSS ទៅ toast ។
autohide ប៊ូលីន true លាក់នំបុ័ងអាំងដោយស្វ័យប្រវត្តិបន្ទាប់ពីការពន្យារពេល។
delay ចំនួន 5000 ពន្យារពេលគិតជាមិល្លីវិនាទី មុនពេលលាក់នំដុត។

វិធីសាស្រ្ត

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

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

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

វិធីសាស្រ្ត ការពិពណ៌នា
dispose លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ នំបុ័ងអាំងរបស់អ្នកនឹងនៅតែមាននៅលើ DOM ប៉ុន្តែនឹងមិនបង្ហាញទៀតទេ។
getInstance វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានឧទាហរណ៍ toast ដែលភ្ជាប់ជាមួយធាតុ DOM ។
ឧទាហរណ៍៖ const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)ត្រឡប់​ឧទាហរណ៍ Bootstrap toast ។
getOrCreateInstance វិធីសាស្ត្រ ឋិតិវន្ត ដែលអនុញ្ញាតឱ្យអ្នកទទួលបានឧទាហរណ៍ toast ដែលភ្ជាប់ជាមួយធាតុ DOM ឬបង្កើតថ្មីមួយ ក្នុងករណីដែលវាមិនត្រូវបានចាប់ផ្តើម។
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)ត្រឡប់​ឧទាហរណ៍ Bootstrap toast ។
hide លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ​មុន​ពេល​ការ​ដុត​ត្រូវ​បាន​លាក់ (ឧ. មុន hidden.bs.toast​ព្រឹត្តិការណ៍​កើត​ឡើង)។ អ្នក​ត្រូវ​ហៅ​វិធី​នេះ​ដោយ​ដៃ​ប្រសិន​បើ​អ្នក​បាន​បង្កើត autohide​ទៅ false.
isShown ត្រឡប់​ប៊ូលីន​ដោយ​យោង​តាម​ស្ថានភាព​មើល​ឃើញ​របស់ toast។
show បង្ហាញ​ការ​ដុត​របស់​ធាតុ។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ​មុន​ពេល​ដែល​នំ​បញ្ចុក​ត្រូវ​បាន​បង្ហាញ​យ៉ាង​ពិត​ប្រាកដ (ឧ. មុន shown.bs.toast​ព្រឹត្តិការណ៍​កើតឡើង)។ អ្នកត្រូវហៅវិធីសាស្ត្រនេះដោយដៃ ជំនួសវិញ toast របស់អ្នកនឹងមិនបង្ហាញទេ។

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

ព្រឹត្តិការណ៍ ការពិពណ៌នា
hide.bs.toast ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​ភ្លាមៗ​នៅ​ពេល​ដែល hide​វិធីសាស្ត្រ​វត្ថុ​ត្រូវ​បាន​ហៅ។
hidden.bs.toast ព្រឹត្តិការណ៍នេះត្រូវបានបញ្ឈប់នៅពេលដែល toast បានបញ្ចប់ត្រូវបានលាក់ពីអ្នកប្រើប្រាស់។
show.bs.toast ព្រឹត្តិការណ៍នេះឆេះភ្លាមៗ នៅពេលដែល showវិធីសាស្ត្រ instance ត្រូវបានហៅ។
shown.bs.toast ព្រឹត្តិការណ៍​នេះ​ត្រូវ​បាន​បញ្ឈប់​នៅ​ពេល​ដែល​ការ​ដុត​ត្រូវ​បាន​ធ្វើ​ឱ្យ​អ្នក​ប្រើ​មើល​ឃើញ។ 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})