ជួរការជូនដំណឹង

សម្រាប់មើលឡើងវិញនូវអ្វីដែលកើតឡើង និងដឹងថាមួយណាមិនទាន់អាន។

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

ប្រភព

HTML CSS

<ul class="dc-noti">
  <li class="dc-noti__item dc-noti__item--unread">
    <a class="dc-noti__row" href="#">
      <span class="dc-noti__ico dc-noti__ico--ok" aria-hidden="true">✓</span>
      <span class="dc-noti__body">
        <span class="dc-noti__title">3월 급여 2,480,000원이 들어왔습니다</span>
        <span class="dc-noti__text">명세서에서 공제 내역을 확인할 수 있습니다</span>
        <span class="dc-noti__time">12분 전</span>
      </span>
      <span class="dc-sr">안 읽음</span>
      <span class="dc-noti__dot" aria-hidden="true"></span>
    </a>
  </li>
  <li class="dc-noti__item dc-noti__item--unread">
    <a class="dc-noti__row" href="#">
      <span class="dc-noti__ico dc-noti__ico--warn" aria-hidden="true">!</span>
      <span class="dc-noti__body">
        <span class="dc-noti__title">안전교육 이수 기한이 3일 남았습니다</span>
        <span class="dc-noti__text">3월 20일까지 듣지 않으면 현장 출입이 막힙니다</span>
        <span class="dc-noti__time">2시간 전</span>
      </span>
      <span class="dc-sr">안 읽음</span>
      <span class="dc-noti__dot" aria-hidden="true"></span>
    </a>
  </li>
  <li class="dc-noti__item dc-noti__item--read">
    <a class="dc-noti__row" href="#">
      <span class="dc-noti__ico" aria-hidden="true">◇</span>
      <span class="dc-noti__body">
        <span class="dc-noti__title">최영호 소장님이 메시지를 보냈습니다</span>
        <span class="dc-noti__text">내일 아침 8시에 자재 들어옵니다</span>
        <span class="dc-noti__time">어제</span>
      </span>
    </a>
  </li>
</ul>

.dc-noti {
  margin: 0; padding: 0; list-style: none;
  background: var(--dc-surface);
  font-family: var(--dc-font);
}
.dc-noti__item + .dc-noti__item { border-top: 1px solid var(--dc-line); }
.dc-noti__item--unread { background: var(--dc-brand-soft); }
.dc-noti__row {
  display: flex; align-items: flex-start; gap: var(--dc-3);
  min-height: 72px; padding: var(--dc-4);
  color: inherit; text-decoration: none;
  transition: background var(--dc-fast);
}
.dc-noti__ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--dc-r-full);
  background: var(--dc-sunken); color: var(--dc-text-sub);
  font-size: 16px; font-weight: 700;
}
.dc-noti__ico--ok { background: var(--dc-ok-soft); color: var(--dc-ok); }
.dc-noti__ico--warn { background: var(--dc-warn-soft); color: var(--dc-warn); }
.dc-noti__ico--info { background: var(--dc-info-soft); color: var(--dc-info); }
.dc-noti__body {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: var(--dc-1);
}
.dc-noti__title { font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--dc-text); }
.dc-noti__text { font-size: 13px; line-height: 1.5; color: var(--dc-text-sub); }
.dc-noti__time { font-size: 11px; color: var(--dc-text-mute); }
.dc-noti__dot {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: var(--dc-2);
  border-radius: var(--dc-r-full); background: var(--dc-danger);
}
.dc-noti__acts { display: flex; gap: var(--dc-2); margin-top: var(--dc-2); }
.dc-noti__btn {
  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;
}
.dc-noti__btn--main {
  border-color: var(--dc-brand);
  background: var(--dc-brand); color: var(--dc-text-on);
}
.dc-noti__item--read .dc-noti__title { font-weight: 400; color: var(--dc-text-sub); }

របៀបប្រើ

សរសេរបន្ទាត់ទីមួយឲ្យអានតែមួយក៏ដឹងរឿង — 'អ្នកមានការជូនដំណឹង' មិនគ្រប់គ្រាន់
សម្គាល់មិនទាន់អានពីរបៀប៖ ចំណុច និងពណ៌ផ្ទៃ
ប្រើពេលប្រៀបធៀប ('១២ នាទីមុន'); លើសមួយថ្ងៃប្រើថ្ងៃខែ

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

ចំណុចពណ៌មិនអាចជាសញ្ញាតែមួយ — ដាក់អក្សរលាក់សម្រាប់កម្មវិធីអានអេក្រង់
បើក្នុងជួរមានប៊ូតុង មិនត្រូវរុំជួរទាំងមូលជាតំណ

បន្ទាប់

ជួរបញ្ជី ការបង្ហាញព័ត៌មាន កម្មវិធី

បញ្ជីការកំណត់ ការបង្ហាញព័ត៌មាន កម្មវិធី

បញ្ជីកាត ការបង្ហាញព័ត៌មាន កម្មវិធី

សារពពុះ ការបង្ហាញព័ត៌មាន កម្មវិធី