amazeui学习笔记--css（常用组件5）--评论列表Comment

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 的评论列表）。

基本结构如下：

 Copy

<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 在使用中并不常见。

使用演示

单条评论

 Copy

某人 评论于 2014-7-12 15:30

 

那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？

妈：我打算在下个月和樱子结婚。

  

<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类来创建一个评论列表。

 Copy

• 
  某人 评论于 2014-7-12 15:30

  那，那是一封写给南部母亲的信。我茫然站在骑楼下，我又看到永远的樱子走到街心。其实雨下得并不大，却是一生一世中最大的一场雨。而那封信是这样写的，年轻的樱子知不知道呢？

  妈：我打算在下个月和樱子结婚。

• 
  路人甲 评论于 2014-7-13 0:03

  She's gone 我早知道
  她将要 从我的生命中走掉
  不再停留多一秒

• 
  路人乙 评论于 2014-7-14 23:30

  @某人 撸主保重！

• 
  某人 评论于 2014-7-14 23:301

  @路人乙 朕知道了！

• 
  路人乙 评论于 2014-7-14 23:32

  @某人 艹民告退！

• 
  某人 评论于 2014-7-14 23:301

  @路人乙 滚！

• 
  路人乙 评论于 2014-7-14 23:32

  @某人 你妹！

• 
  某人 评论于 2014-7-14 23:301

  @路人乙 你妹你妹！

<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 高亮评论（边框为红色）

 Copy

<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>