च्याट बबल

भनेका कुरा क्रम अनुसार थुप्रो पार्दै, कसले कहिले भन्यो देखाउने।

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

स्रोत

HTML CSS

<div class="dc-chat">
  <p class="dc-chat__date">3월 14일 목요일</p>
  <div class="dc-chat__turn">
    <span class="dc-chat__avatar" aria-hidden="true">최</span>
    <div class="dc-chat__stack">
      <p class="dc-chat__who">최영호 소장</p>
      <p class="dc-chat__msg">
        <span class="dc-chat__bubble">내일 아침 8시에 자재 들어옵니다. 두 분만 먼저 나와 주세요.</span>
        <span class="dc-chat__time">오전 9:12</span>
      </p>
    </div>
  </div>
  <div class="dc-chat__turn dc-chat__turn--mine">
    <div class="dc-chat__stack">
      <p class="dc-chat__msg">
        <span class="dc-chat__bubble dc-chat__bubble--mine">네, 저랑 응우옌 씨가 나가겠습니다.</span>
        <span class="dc-chat__time">오전 9:14<span class="dc-chat__read">읽음</span></span>
      </p>
    </div>
  </div>
</div>

.dc-chat {
  display: flex; flex-direction: column; gap: var(--dc-3);
  padding: var(--dc-4);
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-chat__date {
  align-self: center; margin: 0;
  padding: var(--dc-1) var(--dc-3);
  border-radius: var(--dc-r-full);
  background: var(--dc-sunken); color: var(--dc-text-mute);
  font-size: 11px;
}
.dc-chat__system {
  align-self: center; max-width: 86%; margin: 0;
  padding: var(--dc-2) var(--dc-3);
  border-radius: var(--dc-r-sm);
  background: var(--dc-info-soft); color: var(--dc-text-sub);
  font-size: 12px; line-height: 1.5; text-align: center;
}
.dc-chat__turn { display: flex; align-items: flex-start; gap: var(--dc-2); }
.dc-chat__turn--mine { justify-content: flex-end; }
.dc-chat__avatar {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--dc-r-full);
  background: var(--dc-brand-soft); color: var(--dc-brand-text);
  font-size: 14px; font-weight: 700;
}
.dc-chat__stack {
  display: flex; flex-direction: column; gap: var(--dc-1);
  min-width: 0; max-width: 80%;
}
.dc-chat__who { margin: 0; font-size: 12px; color: var(--dc-text-sub); }
.dc-chat__msg { display: flex; align-items: flex-end; gap: var(--dc-2); margin: 0; }
.dc-chat__turn--mine .dc-chat__msg { flex-direction: row-reverse; }
.dc-chat__bubble {
  padding: var(--dc-3);
  border: 1px solid var(--dc-line);
  border-radius: var(--dc-r-md);
  background: var(--dc-surface); color: var(--dc-text);
  font-size: 14px; line-height: 1.6;
  overflow-wrap: anywhere;
}
.dc-chat__bubble--mine {
  background: var(--dc-brand); border-color: var(--dc-brand);
  color: var(--dc-text-on);
}
.dc-chat__time {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 10px; line-height: 1.4;
  color: var(--dc-text-mute); white-space: nowrap;
}
.dc-chat__read { color: var(--dc-brand-text); font-weight: 700; }
.dc-chat__photo {
  display: block; width: 180px; aspect-ratio: 4 / 3;
  margin-bottom: var(--dc-2);
  border-radius: var(--dc-r-sm);
  background: linear-gradient(135deg, var(--dc-brand-soft), var(--dc-sunken));
}

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

मेरो सन्देश दायाँ, अर्काको बायाँ — पहिले ठाउँले छुट्याउँछ
एउटै मान्छे लगातार बोले नाम र तस्बिर पहिलो बबलमा मात्र राख्नुहोस्
समय बबलको छेउमा सानो अक्षरमा, मिति बीचको छुट्याउने लाइनमा

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

पठाउनेलाई रङले मात्र नचिनाउनुहोस् — ठाउँ वा नामले पनि चिनिनुपर्छ
लामो शब्द र लिंकले बबल बाहिर नधकेलून् — लाइन तोड्न दिनुहोस्

अर्को

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

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

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

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