Chatroom

這是一個簡易的聊天室組件。聊天室組件主要有放置名稱、功能等資訊的 .chat-header、還有放置訊息內容的 .chat-body 以及表單元件的 .chat-footer。如果要設定Chatroom高度,請在 .chat-body 設定 height,例如:

.chat-body {
    height: 200px;
}

Chat Header

.chat-header 當中有放置圖示與名稱的 .chat-roomname 以及聊天室各項功能的 .ctrl-ctrls,可同時搭配 Drops 或 Tooltips 等其他組件。範例如下:

<div class="chat-header">
    <a class="chat-roomname">
        <img src="">
        Room Name
    </a>
    <div class="chat-ctrls">
        <a class="chat-ctrl-item tooltip-top" data-tooltip="Add Users">
            <span class="icon"></span>
        </a>
        <div class="chat-ctrl-item drop drop-hover tooltip-top" data-tooltip="Setting">
            <a class="drop-btn">
                <span class="icon"></span>
            </a>
            <ul class="drop-box menu drop-down-right">
                <li class="menu-item"><a class="menu-link">Item</a></li>
                <li class="menu-item"><a class="menu-link">Item</a></li>
                <li class="menu-divider"></li>
                <li class="menu-item"><a class="menu-link">Item</a></li>
                <li class="menu-item"><a class="menu-link">Item</a></li>
            </ul>
        </div>
        <a class="chat-ctrl-item tooltip-top" data-tooltip="Close">
            <span class="icon"></span>
        </a>
    </div>
</div>

當多人時,可在 .chat-header 內新增 .chat-member-list 並且將各成員的頭像置入。

<div class="chat-header">
    ~略~
    <div class="chat-member-list">
        <a class="chat-member tooltip-bottom" data-tooltip="User name">
            <img src="img/demo1.jpg">
        </a>
    </div>
</div>

Chat Body

.chat-body 當中的訊息可用 .chat-msg-item,加上 .left.right 來區分左右兩側的對話來源,當一對一聊天時可以不使用大頭像。範例如下:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum saepe beatae, labore ducimus vitae dicta itaque, illum dolorem consequatur at sequi, molestias repellat fugiat dolore! Blanditiis, asperiores corporis praesentium nulla, provident impedit, laboriosam saepe odio placeat, ab voluptatum. Fugit inventore reprehenderit reiciendis ex, rem! Mollitia iusto delectus a hic labore molestiae tempore dolorem, voluptatem libero, explicabo quae ratione praesentium suscipit at. Error, incidunt. Laboriosam expedita reiciendis illo repellat nam quisquam, ullam nulla eius impedit adipisci commodi reprehenderit tenetur minima eaque possimus neque qui fuga officiis rem consectetur! Ut quas, nesciunt nulla fugit vero, quod pariatur rem atque qui ratione deleniti!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, perferendis?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, error.

Read
<div class="chat-body">
    <div class="chat-msg-item left">
        <div class="chat-content">
            <p>~略~</p>
            <div class="chat-time">
                <time datetime="2013-11-1 15:34:28">15:34:28</time>
            </div>
            <p>~略~</p>
            <div class="chat-time">
                <time datetime="2013-11-1 15:34:28">15:34:28</time>
            </div>
        </div>
    </div>
    <div class="chat-msg-item right">
        <div class="chat-content">
            <p>~略~</p>
            <div class="chat-time">
                <time datetime="2013-11-1 15:34:28">15:34:28</time>
                <span class="chat-read">Read</span>
            </div>
        </div>
    </div>
</div>

使用大頭像時:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum saepe beatae, labore ducimus vitae dicta itaque, illum dolorem consequatur at sequi, molestias repellat fugiat dolore! Blanditiis, asperiores corporis praesentium nulla, provident impedit, laboriosam saepe odio placeat, ab voluptatum. Fugit inventore reprehenderit reiciendis ex, rem! Mollitia iusto delectus a hic labore molestiae tempore dolorem, voluptatem libero, explicabo quae ratione praesentium suscipit at. Error, incidunt. Laboriosam expedita reiciendis illo repellat nam quisquam, ullam nulla eius impedit adipisci commodi reprehenderit tenetur minima eaque possimus neque qui fuga officiis rem consectetur! Ut quas, nesciunt nulla fugit vero, quod pariatur rem atque qui ratione deleniti!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, error.

Read
<div class="chat-body">
    <div class="chat-msg-item left">
        <a class="chat-avatar">
            <img src="img/demo1.jpg">
        </a>
        <div class="chat-content">
            <p>~略~</p>
            <div class="chat-time">
                <time datetime="2013-11-1 15:34:28">15:34:28</time>
            </div>
        </div>
    </div>
    <div class="chat-msg-item right">
        <a class="chat-avatar">
            <img src="img/demo3.jpg">
        </a>
        <div class="chat-content">
            <p>~略~</p>
            <div class="chat-time">
                <time datetime="2013-11-1 15:34:28">15:34:28</time>
                <span class="chat-read">Read</span>
            </div>
        </div>
    </div>
</div>

Chat Footer

有關訊息輸入功能皆可放置 .chat-footer 內。

<div class="chat-footer">
    <div class="input-grp">
        <input type="text" class="ctrl-input" />
        <span class="input-grp-btn">
            <a class="btn">Submit</a>
        </span>
    </div>
</div>

Chatroom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum saepe beatae, labore ducimus vitae dicta itaque, illum dolorem consequatur at sequi, molestias repellat fugiat dolore! Blanditiis, asperiores corporis praesentium nulla, provident impedit, laboriosam saepe odio placeat, ab voluptatum. Fugit inventore reprehenderit reiciendis ex, rem! Mollitia iusto delectus a hic labore molestiae tempore dolorem, voluptatem libero, explicabo quae ratione praesentium suscipit at. Error, incidunt. Laboriosam expedita reiciendis illo repellat nam quisquam, ullam nulla eius impedit adipisci commodi reprehenderit tenetur minima eaque possimus neque qui fuga officiis rem consectetur! Ut quas, nesciunt nulla fugit vero, quod pariatur rem atque qui ratione deleniti!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, perferendis?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, error.

Read
<div class="chat">
    <div class="chat-header">
        <a class="chat-roomname">
            <img src="">
            Room Name
        </a>
        <div class="chat-ctrls">
            <a class="chat-ctrl-item tooltip-top" data-tooltip="Add Users">
                <span class="icon"></span>
            </a>
            <div class="chat-ctrl-item drop drop-hover tooltip-top" data-tooltip="Setting">
                <a class="drop-btn">
                    <span class="icon"></span>
                </a>
                <ul class="drop-box menu drop-bottom-right size-small">
                    <li class="menu-item"><a>Item</a></li>
                    <li class="menu-item"><a>Item</a></li>
                    <li class="menu-divider"></li>
                    <li class="menu-item"><a>Item</a></li>
                    <li class="menu-item"><a>Item</a></li>
                </ul>
            </div>
            <a class="chat-ctrl-item tooltip-top" data-tooltip="Close">
                <span class="icon"></span>
            </a>
        </div>
    </div>
    <div class="chat-body">
        <div class="chat-msg-item left">
            <div class="chat-content">
                <p>~略~</p>
                <div class="chat-time">
                    <time datetime="2013-11-1 15:34:28">15:34:28</time>
                </div>
                <p>~略~</p>
                <div class="chat-time">
                    <time datetime="2013-11-1 15:34:28">15:34:28</time>
                </div>
            </div>
        </div>
        <div class="chat-msg-item right">
            <div class="chat-content">
                <p>~略~</p>
                <div class="chat-time">
                    <time datetime="2013-11-1 15:34:28">15:34:28</time>
                    <span class="chat-read">Read</span>
                </div>
            </div>
        </div>
    </div>
    <div class="chat-footer">
        <div class="input-grp">
            <input type="text" class="ctrl-input" />
            <span class="input-grp-btn">
                <a class="btn">Submit</a>
            </span>
        </div>
    </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum saepe beatae, labore ducimus vitae dicta itaque, illum dolorem consequatur at sequi, molestias repellat fugiat dolore! Blanditiis, asperiores corporis praesentium nulla, provident impedit, laboriosam saepe odio placeat, ab voluptatum. Fugit inventore reprehenderit reiciendis ex, rem! Mollitia iusto delectus a hic labore molestiae tempore dolorem, voluptatem libero, explicabo quae ratione praesentium suscipit at. Error, incidunt. Laboriosam expedita reiciendis illo repellat nam quisquam, ullam nulla eius impedit adipisci commodi reprehenderit tenetur minima eaque possimus neque qui fuga officiis rem consectetur! Ut quas, nesciunt nulla fugit vero, quod pariatur rem atque qui ratione deleniti!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum, error.

Read
<div class="chat">
    <div class="chat-header">
        <a class="chat-roomname">
            <img src="">
            Room Name
        </a>
        <div class="chat-ctrls">
            <a class="chat-ctrl-item tooltip-top" data-tooltip="Add Users">
                <span class="icon"></span>
            </a>
            <div class="chat-ctrl-item drop drop-hover tooltip-top" data-tooltip="Setting">
                <a class="drop-btn">
                    <span class="icon"></span>
                </a>
                <ul class="drop-box menu drop-bottom-right size-small">
                    <li class="menu-item"><a>Item</a></li>
                    <li class="menu-item"><a>Item</a></li>
                    <li class="menu-divider"></li>
                    <li class="menu-item"><a>Item</a></li>
                    <li class="menu-item"><a>Item</a></li>
                </ul>
            </div>
            <a class="chat-ctrl-item tooltip-top" data-tooltip="Close">
                <span class="icon"></span>
            </a>
        </div>
        <div class="chat-member-list">
            <a class="chat-member tooltip-top" data-tooltip="User name">
                <img src="img/demo1.jpg">
            </a>
        </div>
    </div>
    <div class="chat-body">
        <div class="chat-msg-item left">
            <a class="chat-avatar">
                <img src="img/demo1.jpg">
            </a>
            <div class="chat-content">
                <p>~略~</p>
                <div class="chat-time">
                    <time datetime="2013-11-1 15:34:28">15:34:28</time>
                </div>
            </div>
        </div>
        <div class="chat-msg-item right">
            <a class="chat-avatar">
                <img src="img/demo3.jpg">
            </a>
            <div class="chat-content">
                <p>~略~</p>
                <div class="chat-time">
                    <time datetime="2013-11-1 15:34:28">15:34:28</time>
                    <span class="chat-read">Read</span>
                </div>
            </div>
        </div>
    </div>
    <div class="chat-footer">
        <div class="input-grp">
            <input type="text" class="ctrl-input" />
            <span class="input-grp-btn">
                <a class="btn">Submit</a>
            </span>
        </div>
    </div>
</div>