會話界面

2018-02-24 16:09 更新

大多數(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標簽來使用

<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>
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號