聊天气泡

通过聊天气泡可以快速实现聊天界面的搭建。

示例源码

<section class="aui-chat">
    <div class="aui-chat-header">2016年7月13日</div>
    <div class="aui-chat-item aui-chat-left">
        <div class="aui-chat-media">
            <img src="/static/auicss/img/demo2.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">AUI <span class="aui-label aui-label-warning">2.0</span></div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                Hello AUI 2.0!
            </div>
            <div class="aui-chat-status aui-chat-status-refresh">
                <i class="aui-iconfont aui-icon-correct aui-text-success"></i>
            </div>
        </div>
    </div>
    <div class="aui-chat-item aui-chat-right">
        <div class="aui-chat-media">
            <img src="/static/auicss/img/liulangnan.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">流浪男</div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                你好！
            </div>
            <div class="aui-chat-status">
                <i class="aui-iconfont aui-icon-info aui-text-danger"></i>
            </div>
        </div>
    </div>
    <div class="aui-chat-item aui-chat-left">
        <div class="aui-chat-media">
            <img src="/static/auicss/img/demo2.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">AUI <span class="aui-label aui-label-warning">2.0</span></div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                <img src="/static/auicss/img/l1.png" />
            </div>
        </div>
    </div>
    <div class="aui-chat-item aui-chat-right">
        <div class="aui-chat-media">
            <img src="/static/auicss/img/liulangnan.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">流浪男</div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                以前拍摄的牛背山星空
            </div>
        </div>
    </div>
    <div class="aui-chat-item aui-chat-left">
        <div class="aui-chat-media">
            <img src="/static/auicss/img/demo2.png" />
        </div>
        <div class="aui-chat-inner">
            <div class="aui-chat-name">AUI <span class="aui-label aui-label-warning">2.0</span></div>
            <div class="aui-chat-content">
                <div class="aui-chat-arrow"></div>
                <img src="/static/auicss/img/l2.png" />
            </div>
        </div>
    </div>
</section>