评论
创建评论,例如关于文章的评论。
用法
评论组件由一个评论头部组成,包括头像、标题和元数据,以及评论主体。
类 | 描述 |
---|---|
.uk-comment |
添加此类以定义评论组件。 |
.uk-comment-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.
标记
<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>
元素。
示例
标记
<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
类。
示例
作者
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.
标记
<article class="uk-comment uk-comment-primary">...</article>
评论中的子导航
您还可以使用子导航组件中的子导航来显示评论的元数据。
示例
作为评论元数据的子导航
标记
<ul class="uk-comment-meta uk-subnav uk-subnav-line">
<li>...</li>
</ul>
作者
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
作者
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.