会话界面

2018-02-24 16:09 更新

大多数的app已经加入了社交元素,会话界面用到的还是瞒多的,就一块封装了进去

如果想自定义气泡颜色,修改.aui-chat-receiver-cont背景和.aui-chat-left-triangle的border-color

.aui-chat-sender为发送消息的容器,也就是你的

.aui-chat-receiver为接受到的消息容器

.history-date 定义了个时间的效果,可以结合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>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号