टोस्ट

भर्खर गरेको काम साँच्चै भयो भन्ने छोटो पुष्टि दिन, नपढे पनि नोक्सान नहुने बेला प्रयोग गर्ने टुक्रा।

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

स्रोत

HTML CSS

<div class="dc-toastzone">
  <div class="dc-toast" role="status">
    <svg class="dc-toast__icon dc-toast__icon--ok" viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M10 1.6a8.4 8.4 0 1 0 0 16.8 8.4 8.4 0 0 0 0-16.8Zm4.3 6.5-5.1 5.2a1 1 0 0 1-1.4 0L5.7 11a1 1 0 0 1 1.4-1.4l1.4 1.5 4.4-4.4a1 1 0 0 1 1.4 1.4Z"/></svg>
    <p class="dc-toast__text">임시 저장했습니다</p>
    <button class="dc-toast__close" type="button"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4.2 4.2l7.6 7.6M11.8 4.2l-7.6 7.6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span class="dc-sr">알림 닫기</span></button>
  </div>
</div>

.dc-toastzone {
  display: flex; align-items: flex-end; justify-content: flex-end;
  min-height: 104px; padding: var(--dc-3);
  border: 1px dashed var(--dc-line);
  border-radius: var(--dc-r-md);
  background: var(--dc-sunken);
}
.dc-toast {
  display: flex; align-items: center; gap: var(--dc-3);
  max-width: 380px;
  padding: var(--dc-3) var(--dc-3) var(--dc-3) var(--dc-4);
  border: 1px solid var(--dc-line-bold);
  border-radius: var(--dc-r-md);
  background: var(--dc-surface);
  box-shadow: var(--dc-sh-3);
  font-family: var(--dc-font);
}
.dc-toast__icon { flex: none; width: 20px; height: 20px; fill: currentColor; }
.dc-toast__icon--ok { color: var(--dc-ok); }
.dc-toast__icon--bad { color: var(--dc-danger); }
.dc-toast__text { flex: 1 1 auto; margin: 0; font-size: 14px; line-height: 1.5; color: var(--dc-text); }
.dc-toast__action {
  flex: none; min-height: 32px; padding: 0 var(--dc-2);
  border: 0; border-radius: var(--dc-r-xs);
  background: transparent; color: var(--dc-brand-text);
  font-size: 14px; font-weight: 700;
  transition: background var(--dc-fast);
}
.dc-toast__action:hover { background: var(--dc-brand-soft); }
.dc-toast__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: var(--dc-r-sm);
  background: transparent; color: var(--dc-text-mute);
  transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-toast__close svg { width: 16px; height: 16px; }
.dc-toast__close:hover { background: color-mix(in srgb, var(--dc-text) 8%, transparent); color: var(--dc-text); }
.dc-toast--bad { border-color: color-mix(in srgb, var(--dc-danger) 45%, transparent); }
@media (max-width: 440px) {
  .dc-toast { max-width: none; width: 100%; }
}

कसरी प्रयोग गर्ने

छुटाउन मिल्ने कुरा मात्र राख्नुहोस् — पढ्नै पर्ने कुरा ब्यानर वा संवाद बाकसमा राख्नुहोस्
मेटाएको कामसँग फर्काउने बटन राख्नुहोस्; फर्काउन नमिल्ने भए टोस्टले न सुनाउनुहोस्
एक पटक एउटै — थुप्रो न लगाउनुहोस्, पछिल्लो मात्र राख्नुहोस्

ध्यान दिनुपर्ने कुरा

पाँच सेकेन्डमा हराउने अक्षर सुस्त पढ्नेका लागि नभएको बराबर हो — फर्काउने बटन भए अझ लामो राख्नुहोस्
पूर्वावलोकनको थोप्लो किनारा पर्दाको तल–दायाँ कुनाको नक्कल हो; साँचोमा position: fixed ले देखाउनुहोस्

अर्को

गोलो प्रगति प्रतिक्रिया एप वेब

पङ्क्तिभित्रको सूचना प्रतिक्रिया एप वेब

सूचना ब्यानर प्रतिक्रिया वेब

इनलाइन त्रुटि प्रतिक्रिया वेब