amazeui学习笔记--css（常用组件5）--评论列表Comment
amazeui学习笔记--css（常用组件5）--评论列表Comment
一、总结
1、am-comment：使用am-comment来声明评论对象，这个是放在article里面的，虽然article也是div来的
2、comment基本结构如下：
<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>
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>最新文章
- Git 创建本地仓库
- js 获取当前的时间
- jQuery-1.9.1源码分析系列（二）jQuery选择器续1
- 【康拓展开】及其在求全排列第k个数中的应用
- Nginx配置location总结及rewrite规则写法
- error LNK2026: 模块对于 SAFESEH 映像是不安全的
- 【Go】为什么用go; Golang Erlang 前世今生
- mysql explain中key_len的计算
- 深度学习论文笔记-Deep Learning Face Representation from Predicting 10,000 Classes
- 从xib加载文件
- Window vagrant 安装部署【转】
- php灌水
- PHP CodeBase: 生成N个不重复的随机数
- Python笔记·第五章—— 列表（List） 的增删改查及其他方法
- 安卓Acitivity的启动模式
- GIT----IDEA配置git
- java.lang.ClassNotFoundException: org.apache.http.conn.UnsupportedSchemeException
- Makefile ------ 在Makefile中进行宏定义-D
- UML类图中的几种关系的画法和含义
- 一次 Java 内存泄漏排查过程，涨姿势