评论/Comment
创建评论,比如文章的评论。
用法
评论组件由包含头像、标题和元数据的评论header以及评论主体组成。
Class | 描述 |
---|---|
.uk-comment |
添加这个类定义评论组件。 |
.uk-comment-header |
添加这个类创建评论header。 |
.uk-comment-avatar |
添加到 <img> 元素创建评论者的头像。 |
.uk-comment-title |
添加这个类到一个标题元素中,创建评论的标题。 |
.uk-comment-meta |
为段落添加这个类,创建评论的元数据。 |
.uk-comment-body |
为 <div> 元素添加这个类,创建评论主体。 |
示例
作者
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Code
<article class="uk-comment">
<header class="uk-comment-header">
<img class="uk-comment-avatar" src="" alt="">
<h4 class="uk-comment-title">...</h4>
<div class="uk-comment-meta">...</div>
</header>
<div class="uk-comment-body">...</div>
</article>
评论列表
添加.uk-comment-list
类到一个<ul>
元素中,创建一个评论列表。你可以在评论列表中嵌套任意数量的<ul>
元素。
示例
Code
<ul class="uk-comment-list">
<li>
<article class="uk-comment">...</article>
<ul>
<li><article class="uk-comment">...</article></li>
</ul>
</li>
<li><article class="uk-comment">...</article></li>
</ul>
色彩调整
添加.uk-comment-primary
类可以将评论样式变得不同,例如把管理员的评论设置为高亮。
示例
Author
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Code
<article class="uk-comment uk-comment-primary">...</article>
评论中的二级导航
使用二级导航组件 以二级导航栏的形式展示评论的元数据。
示例
Subnav as comment meta
Code
<ul class="uk-comment-meta uk-subnav uk-subnav-line">
<li>...</li>
</ul>
Author
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Author
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.