ស្ថានភាពទទេ
អ្វីដែលបញ្ជីទទេគួរនិយាយ — មិនមែនពាក្យ គ្មានទិន្នន័យ ទេ តែអ្វីដែលគួរធ្វើនៅទីនេះ។
មើលជាមុនផ្ទាល់
ប្រភព
<div class="dc-empty">
<div class="dc-empty__art" aria-hidden="true">
<svg viewBox="0 0 64 64" width="40" height="40" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<rect x="9" y="14" width="46" height="38" rx="6" />
<path d="M9 26h46" />
<path d="M22 9v8" />
<path d="M42 9v8" />
<path d="M24 39h16" />
</svg>
</div>
<h3 class="dc-empty__title">아직 등록한 일정이 없습니다</h3>
<p class="dc-empty__text">첫 일정을 만들면 팀원 모두에게 같은 화면이 보입니다. 만드는 데 1분이 걸리지 않습니다.</p>
<div class="dc-empty__acts">
<button type="button" class="dc-empty__btn">일정 만들기</button>
<a class="dc-empty__link" href="#guide">쓰는 방법 보기</a>
</div>
</div>.dc-empty { display:flex; flex-direction:column; align-items:center; gap:var(--dc-3); max-width:420px; margin:0 auto; padding:var(--dc-7) var(--dc-5); border:1px dashed var(--dc-line-bold); border-radius:var(--dc-r-lg); background:var(--dc-surface); text-align:center; font-family:var(--dc-font); }
.dc-empty__art { display:flex; align-items:center; justify-content:center; width:72px; height:72px; border-radius:var(--dc-r-full); background:var(--dc-sunken); color:var(--dc-text-mute); }
.dc-empty__title { margin:0; font-size:16px; font-weight:700; color:var(--dc-text); }
.dc-empty__text { margin:0; font-size:14px; line-height:1.7; color:var(--dc-text-sub); }
.dc-empty__key { font-weight:700; color:var(--dc-text); }
.dc-empty__acts { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--dc-3); margin-top:var(--dc-2); }
.dc-empty__btn { min-height:44px; padding:0 var(--dc-5); border:1px solid var(--dc-brand); border-radius:var(--dc-r-sm); background:var(--dc-brand); color:var(--dc-text-on); font:inherit; font-weight:600; cursor:pointer; }
.dc-empty__btn:hover { background:var(--dc-brand-hi); border-color:var(--dc-brand-hi); }
.dc-empty__btn--ghost { border-color:var(--dc-line-field); background:var(--dc-surface); color:var(--dc-text); }
.dc-empty__btn--ghost:hover { background:var(--dc-sunken); border-color:var(--dc-line-field); }
.dc-empty__link { font-size:14px; color:var(--dc-brand-text); }របៀបប្រើ
- ប្រាប់មូលហេតុដែលទទេ និងអ្វីដែលត្រូវធ្វើបន្ទាប់ ជាគូ
- សរសេរខុសគ្នារវាងករណីមិនទាន់ប្រើ និងករណីស្វែងរកមិនឃើញ
- ប៊ូតុងតែមួយ — កិច្ចការងាយស្រួលបំផុតដែលមានប្រយោជន៍ពីទីនេះ
ចំណុចត្រូវប្រុងប្រយ័ត្ន
- កុំដាក់តែរូបដោយខ្វះអក្សរ ហើយដាក់ aria-hidden លើរូប
- ពាក្យ គ្មានទិន្នន័យ ស្ដាប់ទៅដូចកំហុសអ្នកប្រើ សូមប្រាប់របៀបបំពេញវិញ