大多數(shù)的app已經(jīng)加入了社交元素,會話界面用到的還是瞞多的,就一塊封裝了進去
如果想自定義氣泡顏色,修改.aui-chat-receiver-cont
背景和.aui-chat-left-triangle
的border-color
.aui-chat-sender
為發(fā)送消息的容器,也就是你的
.aui-chat-receiver
為接受到的消息容器
.history-date
定義了個時間的效果,可以結(jié)合p標(biāo)簽來使用
<div class="aui-content aui-content-padded">
<p class="aui-text-center history-date">7-16 20:00</p>
<div class="aui-chat-sender">
<div class="aui-chat-sender-avatar"><img src="https://atts.w3cschool.cn/attachments/image/cimg/demo1.png"></div>
<div class="aui-chat-sender-cont">
<div class="aui-chat-right-triangle"></div>
<span>Hello!!</span>
</div>
</div>
<div class="aui-chat-receiver">
<div class="aui-chat-receiver-avatar"><img src="https://atts.w3cschool.cn/attachments/image/cimg/demo2.png"></div>
<div class="aui-chat-receiver-cont">
<div class="aui-chat-left-triangle"></div>
<span>你好!</span>
</div>
</div>
</div>
更多建議: