खाली अवस्था

सूची खाली भएको बेला 'डेटा छैन' नभनी, यहाँ के गर्ने भनी बताउने पर्दा।

प्रत्यक्ष पूर्वावलोकन

स्रोत

HTML CSS

<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 दिनु
'डेटा छैन' भन्दा प्रयोगकर्ताको गल्ती सुनिन्छ; के गरे भरिन्छ भन्नु

अर्को

सूची पङ्क्ति जानकारी प्रदर्शन एप

सेटिङ सूची जानकारी प्रदर्शन एप

कार्ड सूची जानकारी प्रदर्शन एप

च्याट बबल जानकारी प्रदर्शन एप