សារជូនដំណឹងក្នុងបន្ទាត់

សម្រាប់សារខ្លីដែលត្រូវនៅជាប់ ក្បែរវត្ថុដែលវានិយាយអំពី។

មើលជាមុនផ្ទាល់

ប្រភព

HTML CSS

<div class="dc-ia dc-ia--info" role="status">
  <span class="dc-ia__badge">안내</span>
  <p class="dc-ia__msg">신분증 사진이 흐리면 승인이 하루 더 걸릴 수 있어요.</p>
</div>

.dc-ia {
  display: flex; align-items: flex-start; gap: var(--dc-3);
  margin: var(--dc-4);
  padding: var(--dc-3) var(--dc-4);
  border-radius: var(--dc-r-md);
  border-left: 3px solid var(--dc-line-bold);
  font-family: var(--dc-font);
}
.dc-ia__badge {
  flex: 0 0 auto;
  padding: 3px var(--dc-2);
  border-radius: var(--dc-r-full);
  font-size: 11px; font-weight: 700; line-height: 1.5;
  white-space: nowrap;
}
.dc-ia__msg {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; line-height: 1.6;
  color: var(--dc-text);
}
.dc-ia__strong { font-weight: 700; }
.dc-ia__head { display: flex; align-items: flex-start; gap: var(--dc-3); }
.dc-ia__act {
  align-self: flex-start;
  min-width: 44px; min-height: 44px; padding: 0 var(--dc-4);
  border: 1px solid var(--dc-line-field);
  border-radius: var(--dc-r-sm);
  background: var(--dc-surface); color: var(--dc-text);
  font-family: inherit; font-size: 14px; font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-ia__act:active { background: var(--dc-sunken); }
.dc-ia--stack { flex-direction: column; align-items: stretch; gap: var(--dc-2); }
.dc-ia--info { background: var(--dc-info-soft); border-left-color: var(--dc-info); }
.dc-ia--info .dc-ia__badge { background: var(--dc-info); color: var(--dc-text-on); }
.dc-ia--warn { background: var(--dc-warn-soft); border-left-color: var(--dc-warn); }
.dc-ia--warn .dc-ia__badge { background: var(--dc-warn); color: var(--dc-text-on); }
.dc-ia--danger { background: var(--dc-danger-soft); border-left-color: var(--dc-danger); }
.dc-ia--danger .dc-ia__badge { background: var(--dc-danger); color: var(--dc-text-on); }
.dc-ia--ok { background: var(--dc-ok-soft); border-left-color: var(--dc-ok); }
.dc-ia--ok .dc-ia__badge { background: var(--dc-ok); color: var(--dc-text-on); }

របៀបប្រើ

ដាក់ក្បែរ ឬខាងក្រោមធាតុដែលពាក់ព័ន្ធ បើយកទៅលើអេក្រង់ នឹងបាត់ប្រធានបទ
ស្លាកប្រាប់ស្ថានភាព (ត្រូវពិនិត្យ ផ្អាកការទូទាត់) ហើយប្រយោគប្រាប់អ្វីដែលត្រូវធ្វើ
បន្ថែមប៊ូតុងតែពេលមានកិច្ចការត្រូវធ្វើ សារប្រាប់ព័ត៌មានធម្មតាមិនត្រូវការ

ចំណុចត្រូវប្រុងប្រយ័ត្ន

មិនត្រូវបញ្ជូនអត្ថន័យដោយពណ៌តែម្យ៉ាង អក្សរលើស្លាកជាអ្វីដែលអ្នកមើលពណ៌មិនច្បាស់ទទួលបាន
ប្រើ role=alert សម្រាប់រឿងបន្ទាន់ និង role=status សម្រាប់រឿងផ្សេង

បន្ទាប់

របារសារខ្លី មតិត្រឡប់ កម្មវិធី

អូសដើម្បីផ្ទុកឡើងវិញ មតិត្រឡប់ កម្មវិធី

រង្វង់វឌ្ឍនភាព មតិត្រឡប់ កម្មវិធី វេប

ចំណុចជំហាន មតិត្រឡប់ កម្មវិធី