Đến nội dung chính
EN KO VI NE KM ID
Thiết kế danh thiếp English Bộ sưu tập nhân vật 16 mẫu · PNG / SVG / PDF

Trạng thái trống

Điều một danh sách rỗng cần nói — không phải chữ Không có dữ liệu, mà việc nên làm ở đây.

Hiển thị dữ liệu

Xem trước trực tiếp

Nguồn

<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); }

Cách dùng

  • Nói lý do trống và việc làm tiếp theo, luôn đi đôi
  • Viết khác nhau cho lần đầu chưa dùng và cho tìm kiếm không ra gì
  • Chỉ một nút: việc dễ nhất mà có ích ở đây

Điểm cần lưu ý

  • Đừng chỉ để hình mà thiếu chữ, và đánh dấu hình bằng aria-hidden
  • Chữ Không có dữ liệu nghe như lỗi của người dùng; hãy nói làm gì thì màn hình có nội dung

Tiếp theo