Комментарии

Создавайте комментарии к различным материалам, размещенным на сайте, например в блогах, статьях. Комментарии это неотъемлемая часть множества сайтов, будь то небольшой блог или крупный портал. Компонент Comment способен помочь в этом вопросе.

Использование

Компонент Comment состоит из «шапки» раздела, включая в себя аватарку, заголовок и метаданные, а также тело комментария.

Класс Описание
.uk-comment Добавьте этот класс, чтобы определить компонент Comment UIkit 2.
.uk-comment-header Добавьте этот класс для создания «шапки» раздела комментария.
.uk-comment-avatar Добавьте этот класс к элементу <img>, чтобы создать аватарку для автора комментария.
.uk-comment-title Добавьте этот класс в заголовок, чтобы создать заголовок комментария.
.uk-comment-meta Добавьте этот класс в абзац, чтобы создать метаданные комментария.
.uk-comment-body Добавьте этот класс в тег <div> для создания тела комментария.
Заметка Комментарии к новостям, статьям, записям могут быть элементами <article>, вложенными в тег <article>.

Пример

Великий Князь

13 дней назад | Профиль | #

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю.

Разметка

<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> элементов в список комментариев.

Пример

  • Гришка

    33 мин. назад | Профиль | #

    Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю.

    • Машка

      15 мин. назад | Профиль | #

      Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю.

Разметка

<ul class="uk-comment-list">
    <li>
        <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>
        <ul>
            <li>
                <article class="uk-comment">
                    ...
                </article>
            </li>
        </ul>
    </li>
    <li>
        <article class="uk-comment">
            ...
        </article>
    </li>
</ul>

Модификатор

Добавьте класс .uk-comment-primary, чтобы изменить стиль блока с комментарием, например выделить его как комментарий администратора.

Пример

Петька

44 мин. назад | Профиль | #

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.

Разметка

<article class="uk-comment uk-comment-primary">
    ...
</article>

В метаданных с комментарием можно использовать компонент Subnav.

Пример

Разметка

<article class="uk-comment">
    <header class="uk-comment-header">
        <img class="uk-comment-avatar" src="" width="50" height="50" alt="">
        <h4 class="uk-comment-title">...</h4>
        <ul class="uk-comment-meta uk-subnav uk-subnav-line">     <!-- Subnav-->
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </header>
    <div class="uk-comment-body">
        ...
    </div>
</article>