amazeui学习笔记--css（常用组件5）--评论列表Comment
一、总结
1、am-comment：使用am-comment来声明评论对象，这个是放在article里面的，虽然article也是div来的
2、comment基本结构如下：
1 <article class="am-comment"> <!-- 评论容器 --> 2 <a href=""> 3 <img class="am-comment-avatar" alt=""/> <!-- 评论者头像 --> 4 </a> 5 6 <div class="am-comment-main"> <!-- 评论内容容器 --> 7 <header class="am-comment-hd"> 8 <!--<h3 class="am-comment-title">评论标题</h3>--> 9 <div class="am-comment-meta"> <!-- 评论元数据 --> 10 <a href="#link-to-user" class="am-comment-author">..</a> <!-- 评论者 --> 11 评论于 <time datetime="">...</time> 12 </div> 13 </header> 14 15 <div class="am-comment-bd">...</div> <!-- 评论内容 --> 16 </div> 17 </article>
3、评论列表：还是ul包着li的形式，<ul class="am-comments-list am-comments-list-flip">各种包含am-comment的li标签</ul>
使用 .am-comments-list 包裹多个 .am-comment 即成评论列表。
给<ul>元素添加.am-comment-list类来创建一个评论列表。
4、 评论内容左右对齐：在评论列表 .am-comments-list 上增加 .am-comments-list-flip class，可以使左右交错的评论列表内容左右对齐（在 medium-up 区间有效）。
5、 评论状态（颜色）：
.am-comment-flip在右边显示头像（原来头像在左边）.am-comment-primary高亮评论（边框为主色）.am-comment-highlight/.am-comment-highlight高亮评论（边框为次色）.am-comment-success高亮评论（边框为绿色）.am-comment-warning高亮评论（边框为橙色）.am-comment-danger高亮评论（边框为红色）
二、评论列表Comment
Comment 评论组件
评论组件由用户头像、评论元信息、评论内容组成（有点似曾相识？没错，很像 Github 的评论列表）。
基本结构如下：
<article class="am-comment"> <!-- 评论容器 -->
<a href="">
<img class="am-comment-avatar" alt=""/> <!-- 评论者头像 -->
</a>
<div class="am-comment-main"> <!-- 评论内容容器 -->
<header class="am-comment-hd">
<!--<h3 class="am-comment-title">评论标题</h3>-->
<div class="am-comment-meta"> <!-- 评论元数据 -->
<a href="#link-to-user" class="am-comment-author">..</a> <!-- 评论者 -->
评论于 <time datetime="">...</time>
</div>
</header>
<div class="am-comment-bd">...</div> <!-- 评论内容 -->
</div>
</article>其中 .am-comment-title 在使用中并不常见。
使用演示
单条评论
<article class="am-comment">
<a href="#link-to-user-home">
<img src="" alt="" class="am-comment-avatar" width="48" height="48"/>
</a>
<div class="am-comment-main">
<header class="am-comment-hd">
<!--<h3 class="am-comment-title">评论标题</h3>-->
<div class="am-comment-meta">
<a href="#link-to-user" class="am-comment-author">某人</a>
评论于 <time datetime="2013-07-27T04:54:29-07:00" title="2013年7月27日 下午7:54 格林尼治标准时间+0800">2014-7-12 15:30</time>
</div>
</header>
<div class="am-comment-bd">
...
</div>
</div>
</article>评论列表
使用 .am-comments-list 包裹多个 .am-comment 即成评论列表。
给<ul>元素添加.am-comment-list类来创建一个评论列表。
<ul class="am-comments-list am-comments-list-flip">
<li class="am-comment">
...
</li>
<li class="am-comment">
...
</li>
...
<li class="am-comment am-comment-flip"></li>
<li class="am-comment am-comment-highlight"></li>
</ul>评论内容左右对齐
在评论列表 .am-comments-list 上增加 .am-comments-list-flip class，可以使左右交错的评论列表内容左右对齐（在 medium-up 区间有效）。
谢谢大家的建议。并非所有使用场景都使用左右交错的列表，所以加了单独的 class，供用户选择。
评论状态
在容器上添加评论状态 class（演示见上面列表里的最后几条）。
.am-comment-flip在右边显示头像.am-comment-primary高亮评论（边框为主色）.am-comment-highlight/.am-comment-highlight高亮评论（边框为次色）.am-comment-success高亮评论（边框为绿色）.am-comment-warning高亮评论（边框为橙色）.am-comment-danger高亮评论（边框为红色）
<article class="am-comment am-comment-flip">
...
</article>
<article class="am-comment am-comment-flip">
...
</article>
<article class="am-comment am-comment-flip am-comment-highlight">
...
</article>
那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？