នំដុត

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

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

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

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

• ប្រសិនបើអ្នកកំពុងបង្កើត JavaScript របស់យើងពីប្រភព វា ទាមទារutil.js .
• Toasts ត្រូវបានជ្រើសរើសសម្រាប់ហេតុផលដំណើរការ ដូច្នេះ អ្នកត្រូវតែចាប់ផ្តើម វា ដោយខ្លួនឯង
• Toasts នឹងលាក់ដោយស្វ័យប្រវត្តិ ប្រសិនបើអ្នកមិនបញ្ជាក់ autohide: false។

ឧទាហរណ៍

មូលដ្ឋាន

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

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ថ្លា

នំប៉ាវមានពណ៌រលោងបន្តិចផងដែរ ដូច្នេះពួកវាលាយឡំលើអ្វីៗដែលពួកគេអាចលេចចេញមក។ សម្រាប់កម្មវិធីរុករកតាមអ៊ីនធឺណិតដែលគាំទ្រ backdrop-filterលក្ខណសម្បត្តិ CSS យើងក៏នឹងព្យាយាមធ្វើឱ្យធាតុទាំងនោះមិនច្បាស់ផងដែរ។

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ជង់

នៅពេលដែលអ្នកមាននំបុ័ងអាំងច្រើន នោះយើងកំណត់លំនាំដើមដើម្បីដាក់ជង់វាបញ្ឈរក្នុងលក្ខណៈដែលអាចអានបាន។

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

ការដាក់

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

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

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

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

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

ឥរិយាបថ JavaScript

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

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

$('.toast').toast(option)

ជម្រើស

ជម្រើសអាចត្រូវបានឆ្លងកាត់តាមរយៈគុណលក្ខណៈទិន្នន័យ ឬ JavaScript ។ សម្រាប់គុណលក្ខណៈទិន្នន័យ សូមបន្ថែមឈ្មោះជម្រើសទៅ data-ដូចក្នុង data-animation="".

វិធីសាស្រ្ត

$().toast(options)

ភ្ជាប់ឧបករណ៍ដោះស្រាយនំប៉័ងទៅនឹងបណ្តុំធាតុ។

.toast('show')

បង្ហាញ​ការ​ដុត​របស់​ធាតុ។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ​មុន​ពេល​ដែល​នំ​បញ្ចុក​ត្រូវ​បាន​បង្ហាញ​យ៉ាង​ពិត​ប្រាកដ (ឧ. មុន shown.bs.toast​ព្រឹត្តិការណ៍​កើតឡើង)។ អ្នកត្រូវហៅវិធីសាស្ត្រនេះដោយដៃ ជំនួសវិញ toast របស់អ្នកនឹងមិនបង្ហាញទេ។

$('#element').toast('show')

.toast('hide')

លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ ត្រឡប់​ទៅ​អ្នក​ហៅ​ទូរសព្ទ​វិញ​មុន​ពេល​ការ​ដុត​ត្រូវ​បាន​លាក់ (ឧ. មុន​ពេល hidden.bs.toast​ព្រឹត្តិការណ៍​កើត​ឡើង)។ អ្នក​ត្រូវ​ហៅ​វិធី​នេះ​ដោយ​ដៃ​ប្រសិន​បើ​អ្នក​បាន​បង្កើត autohide​ទៅ false.

$('#element').toast('hide')

.toast('dispose')

លាក់នំបុ័ងអាំងរបស់ធាតុមួយ។ នំបុ័ងអាំងរបស់អ្នកនឹងនៅតែមាននៅលើ DOM ប៉ុន្តែនឹងមិនបង្ហាញទៀតទេ។

$('#element').toast('dispose')

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

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})