Chat
Chat 是用於對話、交流訊息的容器與組件。容器類別為 .chat 並且以此為子組件的前綴詞。
對話框
主要內容置放於 .chat_body 之內，每一組訊息可納入單一或多筆資訊並放入子容器 .chat_item。內容則放置 .chat_content 之內。每一個文字資料的內容可使用 .chat_para。
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias dicta ducimus ex excepturi harum in nisi suscipit voluptates. Beatae cupiditate, distinctio dolores libero magni quas rerum ullam unde ut!
Mr Trump told reporters he did not recall making such comments.
In previously unheard testimony, Bill Taylor, the acting US ambassador to Ukraine, said a member of his staff was told Mr Trump was preoccupied with pushing for a probe into Mr Biden.
He was speaking at the first public hearings in the impeachment inquiry.
<div class="chat">
<div class="chat_body">
<div class="chat_item">
<div class="chat_content">
<div class="chat_para"></div>
</div>
</div>
</div>
</div>
搭配頭像與 Meta 訊息
頭像組件可搭配 Avatar，訊息 Meta 訊息可以直接使用 Meta 組件。這兩個組件放入 .chat_item 內。
K
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias dicta ducimus ex excepturi harum in nisi suscipit voluptates. Beatae cupiditate, distinctio dolores libero magni quas rerum ullam unde ut!
Mr Trump told reporters he did not recall making such comments.
In previously unheard testimony, Bill Taylor, the acting US ambassador to Ukraine, said a member of his staff was told Mr Trump was preoccupied with pushing for a probe into Mr Biden.
He was speaking at the first public hearings in the impeachment inquiry.
<div class="chat">
<div class="chat_body">
<div class="chat_item">
<div class="avatar"></div>
<div class="chat_content">
<div class="chat_para"></div>
<div class="meta"></div>
</div>
</div>
</div>
</div>
多媒體資訊
可將圖片、影片等多媒體資訊放入 .chat_media 之內。
K
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias dicta ducimus ex excepturi harum in nisi suscipit voluptates. Beatae cupiditate, distinctio dolores libero magni quas rerum ullam unde ut!
K
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias dicta ducimus ex excepturi harum in nisi suscipit voluptates. Beatae cupiditate, distinctio dolores libero magni quas rerum ullam unde ut!
<div class="chat">
<div class="chat_body">
<div class="chat_item">
<div class="avatar"></div>
<div class="chat_content">
<div class="chat_para"></div>
<div class="chat_media"></div>
<div class="meta"></div>
</div>
</div>
</div>
</div>
使用 Divider 區隔
如果要標示日期區間可直接使用 Divider 組件。
K
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias dicta ducimus ex excepturi harum in nisi suscipit voluptates. Beatae cupiditate, distinctio dolores libero magni quas rerum ullam unde ut!
Today
K
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias dicta ducimus ex excepturi harum in nisi suscipit voluptates. Beatae cupiditate, distinctio dolores libero magni quas rerum ullam unde ut!
<div class="chat">
<div class="chat_body">
<div class="chat_item">~略~</div>
<div class="divider">~略~</div>
<div class="chat_item">~略~</div>
</div>
</div>
雙向對話
為了區分自己與對方的對話框有所區別，可在 .chat_item 追加 .@right 來辨別。
K
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias dicta ducimus ex excepturi harum in nisi suscipit voluptates. Beatae cupiditate, distinctio dolores libero magni quas rerum ullam unde ut!
M
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias dicta ducimus ex excepturi harum in nisi suscipit voluptates. Beatae cupiditate, distinctio dolores libero magni quas rerum ullam unde ut!
<div class="chat">
<div class="chat_body">
<div class="chat_item @left">~略~</div>
<div class="chat_item @right">~略~</div>
</div>
</div>