ការជូនដំណឹង

ការជូនដំណឹង ផ្ដល់នូវព័ត៌មានខ្លី និងទាន់ពេលវេលាទៅកាន់អ្នកប្រើប្រាស់។

មានជាទូទៅ

ឧទាហរណ៍

បុរេជម្រើស 

 
<div role="alert" class="cgds alert alert-primary fade d-flex align-items-center alert-dismissible-link show">
  <div>
    <i class="primary bi bi-exclamation-circle me-2"></i>នេះ​គឺ​ជា​ការ​ជូន​ដំណឹង​ចម្បង - សូម​ពិនិត្យ​មើល!
  </div>
  <button type="button" class="btn-close btn-sm" aria-label="Close alert"></button>
</div>

មានខ្លឹមសារវែង 

 
<div role="alert" class="fade d-flex align-items-center alert alert-success alert-dismissible show cgds">
  <button type="button" class="btn-close btn-sm" aria-label="Close alert"></button>
  <i class="bi bi-exclamation-circle me-4"></i>
  <div>
    <div class="alert-heading h4">សួស្តី! រីករាយណាស់ដែលបានជួបគ្នា។</div>
    <p>ជយោ! អ្នកបានអានការជូនដំណឹងដ៏សំខាន់នេះហើយ។ នេះជាឧទាហរណ៍មួយដែលមានខ្លឹមសារវែង។
      យើងបង្កើតឧទាហរណ៍នេះឡើងមកដើម្បីឱ្យអ្នកបានឃើញពីការបង្កើតគម្លាតសម្រាប់ឱ្យមាតិកាវែងៗបែបនេះ។</p>
    <hr>
    <p class="mb-0">អ្នកអាចប្រើប្រាស់ margin នៅក្នុងកូដដើម្បីរចនាវាឱ្យមើលទៅស្អាត និងមានរបៀបរៀបរយ។</p>
  </div>
</div>

ផ្ទាំងដែលអាចបិទបាន 

 
<div role="alert" class="fade d-flex align-items-center alert alert-primary alert-dismissible show cgds">
  <button type="button" class="btn-close btn-sm" aria-label="Close alert"></button>
  <i class="primary bi bi-exclamation-circle me-4"></i>
  <div>
    <div class="alert-heading h4">មានបញ្ហាមួយកើតឡើងហើយ!</div>
    <p class="mb-0">ដើម្បីដោះស្រាយបញ្ហានេះអ្នកអាច...។ Duis mollis, est non commodo luctus, nisi erat porttitor
      ligula,
      eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
  </div>
</div>

ធាតុផ្សំ

Alert Anatomy
  1. រូបសញ្ញា (ដាក់ក៏បានមិនដាក់ក៏បាន)៖ សម្រាប់ប្រាប់អ្នកប្រើប្រាស់ពីគោលបំណងនៃការជូនដំណឹង។
  2. ខ្លឹមសារ៖ សម្រាប់ប្រាប់ព័ត៌មានទៅកាន់អ្នកប្រើប្រាស់។
  3. ប៊ូតុងបិទ (ដាក់ក៏បានមិនដាក់ក៏បាន)៖ សម្រាប់បិទផ្ទាំងនៃការជូនដំណឹង។
  4. ប្រអប់ស៊ុម៖ សម្រាប់ផ្ទុកធាតុទាំងអស់របស់ការជូនដំណឹងនីមួយៗ។ ប្រវែងនិងកម្ពស់របស់វាមានទំហំខុសគ្នាដោយអាស្រ័យទៅតាមទំហំនៃមាតិកានៅក្នុងការជូនដំណឹងនីមួយៗ។

គម្លាត

Alert Spacing

នៅក្នុងផ្ទាំងការជូនដំណឹង
ត្រូវរក្សាគម្លាតយ៉ាងតិច 24px គែមសងខាងរបស់ផ្ទាំង និងយ៉ាងហោចណាស់ 16px ត្រង់គែមលើក្រោម។ ត្រូវរក្សាគម្លាតយ៉ាងតិច 16px នៅជុំវិញអក្សរ និងរូបសញ្ញា។ កម្ពស់មូលដ្ឋានរបស់ផ្ទាំងគឺ 64px។

គោលការណ៍ណែនាំនៃការប្រើប្រាស់

ការជូនដំណឹងគួរប្រើប្រាស់នៅពេល៖

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

ការជូនដំណឹងមិនគួរប្រើប្រាស់នៅពេល៖

  1. មានកំហុសក្នុងការផ្ទៀងផ្ទាត់។
  2. នៅក្នុងទំព័រមួយមិនគួរមានការជូនដំណឹងច្រើនពេកទេ ពោលគឺប្រើសម្រាប់តែដំណឹងសំខាន់ៗបានហើយ។

គោលការណ៍ណែនាំនៃការរចនា

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

ការជូនដំណឹងដែលអាចបិទបាន
ការជូនដំណឹងដែលអាចបិទបានគួរតែត្រូវបានរចនាឡើងតាមរបៀបដែលធ្វើឱ្យវាងាយស្រួលសម្រាប់អ្នកប្រើប្រាស់ក្នុងការបិទវាទៅវិញ។ សញ្ញាខ្វែង "X" សម្រាប់បិទការជូនដំណឹងគួរតែត្រូវបានរចនាយ៉ាងណាឱ្យអ្នកប្រើប្រាស់អាចមើលឃើញនឹងភ្នែក និងមិនពិបាករក។

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

ខ្នាតសម្រាប់រចនា

$alert-padding-y: $spacer !default;
$alert-padding-x: $spacer !default;
$alert-margin-bottom: 1rem !default;
$alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default;
$alert-bg-scale: -80% !default;
$alert-border-scale: -70% !default;
$alert-color-scale: 40% !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
Home
Previous version 1.0.3