评论

创建评论,例如关于文章的评论。

用法

评论组件由一个评论头部组成,包括头像、标题和元数据,以及评论主体。

描述
.uk-comment 添加此类以定义评论组件。
.uk-comment-header 添加此类以创建评论头部。
.uk-comment-avatar 将此类添加到 <img> 元素以创建评论作者的头像。
.uk-comment-title 将此类添加到标题以创建评论标题。
.uk-comment-meta 将此类添加到段落以创建关于您评论的元数据。
.uk-comment-body 将此类添加到 <div> 元素以创建评论主体。

示例

作者

12 天前 | 个人资料 | #

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> 元素。

示例

  • 作者

    12 天前 | 个人资料 | #

    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

    • 作者

      12 天前 | 个人资料 | #

      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

标记

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

示例

作者

12 天前 | 个人资料 | #

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>