Компонент Комментарий

Создавайте и стилизуйте блоки с комментариями на сайте, например, для раздела блога на вашем сайте. Компонент по умолчанию включает в себя стили для комментариев.

Comment: Блоки комментариев

Комментарии на сайте. Содержимое. Разметка.

Компонент Комментарии состоит из самого комментария, заголовка (шапка) комментария, включая аватарку, заголовок (имя автора) и метаданные, и тела комментария.

Класс Описание
.uk-comment Добавьте этот класс, чтобы определить компонент Комментарий.
.uk-comment-header Добавьте этот класс для создания шапки (вводный контент) комментария.
.uk-comment-avatar Добавьте этот класс к элементу <img>, чтобы создать аватар для автора комментария.
.uk-comment-title Добавьте этот класс в заголовок, чтобы создать заголовок из имени автора комментария.
.uk-comment-meta Добавьте этот класс для создания метатекста комментарию, например, с использованием суб-навигации.
.uk-comment-body Добавьте этот класс для создания тела комментария.

Разметка. Пример

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

Если необходимо для изображения-аватарки установить круглую форму, добавьте к .uk-comment-avatar класс .uk-border-circle из компонента Утилита (модификатор Border radius). 

<article class="uk-comment" role="comment">
    <header class="uk-comment-header">
        <div class="uk-grid-medium uk-flex-middle" uk-grid>
            <div class="uk-width-auto">
                <img class="uk-comment-avatar" src="images/ava/avatar-1.webp" width="80" height="80" alt="Аватарка">
            </div>
            <div class="uk-width-expand">
                <h4 class="uk-comment-title uk-margin-remove">
                    <a class="uk-link-reset" href="#">Великолепная Мария</a>
                </h4>
                <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
                    <li><a href="#">13 дней назад</a></li>
                    <li><a href="#">Ответить</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="uk-comment-body">
        <p>Самый лучший и самый правильный выход из ситуации: забыть все плохое, сохранить в памяти хорошие моменты, просто сказать спасибо за все что мы пережили. И пойти дальше. Потому что все, что с нами происходит — к лучшему. Ачарья Раджниш</p>
    </div>
</article>

<hr class="uk-margin-large">

<article class="uk-comment" role="comment">
    <header class="uk-comment-header">
        <div class="uk-grid-medium uk-flex-middle" uk-grid>
            <figure class="uk-width-auto">
                <img class="uk-comment-avatar uk-border-circle" src="images/ava/avatar-2.webp" width="80" height="80" alt="Аватарка">
            </figure>
            <div class="uk-width-expand">
                <h4 class="uk-comment-title uk-margin-remove">
                    <a class="uk-link-reset" href="#">Настасья</a>
                </h4>
                <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
                    <li><a href="#">15 дней назад</a></li>
                    <li><a href="#">Ответить</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div class="uk-comment-body">
        <p>Да вот теперь у них под властью парни: ты с ними в ладу и, конечно, их не обидишь, потому что они твои. Словом, все было отлично, как не выдумать ни природе, ни искусству, когда они соединятся вместе.</p>
    </div>
</article>

Модификатор «Primary»

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

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

<article class="uk-comment uk-comment-primary" role="comment">
    <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>
        <figure class="uk-width-auto">
            <img class="uk-comment-avatar" src="images/ava/avatar-2.webp" width="80" height="80" alt="Аватарка">
        </figure>
        <div class="uk-width-expand">
            <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Зинуля</a></h4>
            <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
                <li><a href="#">17 дней назад</a></li>
                <li><a href="#">Ответить</a></li>
            </ul>
        </div>
    </header>
    <div class="uk-comment-body uk-margin-top">
        <p>Никогда не слушайте осуждений в свой адрес. Ибо, даже если бы вы умели ходить по воде, то будьте уверены, кто-нибудь обязательно скажет: «Смотрите, он даже не умеет плавать». © Маргарет Тэтчер</p>
    </div>
</article>

Cписок комментариев

Как создать список комментариев

Всё просто! Добавьте класс .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>
</ul>

<ul class="uk-comment-list">
    <li>
        <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
            <header class="uk-comment-header uk-position-relative">
                <div class="uk-grid-medium uk-flex-middle" uk-grid>
                    <div class="uk-width-auto">
                        <img class="uk-comment-avatar" src="images/ava/avatar-1.webp" width="80" height="80" alt="Аватарка">
                    </div>
                    <div class="uk-width-expand">
                        <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Арина</a></h4>
                        <p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">7 дней назад</a></p>
                    </div>
                </div>
                <div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Ответить</a></div>
            </header>
            <div class="uk-comment-body">
                <p>Однако ж, собраться мужики с колхоза, который был, к счастью, неподалеку. Так как подобное зрелище для здоровяка сущая благодать, то скоро около экипажа накопилась их стадо, и в селе остались только старые бабоньки да малые ребята.</p>
            </div>
        </article>
        <ul>
            <li>
                <article class="uk-comment uk-comment-primary uk-visible-toggle" tabindex="-1" role="comment">
                    <header class="uk-comment-header uk-position-relative">
                        <div class="uk-grid-medium uk-flex-middle" uk-grid>
                            <div class="uk-width-auto">
                                <img class="uk-comment-avatar" src="images/ava/avatar-3.webp" width="80" height="80" alt="Аватарка">
                            </div>
                            <div class="uk-width-expand">
                                <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Илона</a></h4>
                                <p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">5 дней назад</a></p>
                            </div>
                        </div>
                        <div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Ответить</a></div>
                    </header>
                    <div class="uk-comment-body">
                        <p>Откуда возьмется и надутость, и чопорность, станет комментарить по вытверженным наставлениям, станет ломать голову и придумывать, с кем, и как, и сколько нужно писать, как на кого смотреть, всякую минуту будет бояться, чтобы не ляпнуть больше, чем нужно, запутается милец.</p>
                    </div>
                </article>
            </li>
            <li>
                <article class="uk-comment uk-visible-toggle" tabindex="-1" role="comment">
                    <header class="uk-comment-header uk-position-relative">
                        <div class="uk-grid-medium uk-flex-middle" uk-grid>
                            <div class="uk-width-auto">
                                <img class="uk-comment-avatar" src="images/ava/avatar-2.webp" width="80" height="80" alt="Аватарка">
                            </div>
                            <div class="uk-width-expand">
                                <h4 class="uk-comment-title uk-margin-remove"><a class="uk-link-reset" href="#">Самира</a></h4>
                                <p class="uk-comment-meta uk-margin-remove-top"><a class="uk-link-reset" href="#">5 дней назад</a></p>
                            </div>
                        </div>
                        <div class="uk-position-top-right uk-position-small uk-hidden-hover"><a class="uk-link-muted" href="#">Ответить</a></div>
                    </header>
                    <div class="uk-comment-body">
                        <p>Последние слова он уже сказал, обратившись, как обыкновенно случается с ведущими разговор, когда один из них вдруг, неизвестно по какой причине, обратится не к тому, к которому относятся речи, а к какому-нибудь нечаянно пришедшему третьему.</p>
                    </div>
                </article>
            </li>
        </ul>
    </li>
</ul>

Доступность

Установите соответствующие роли, состояния и свойства WAI-ARIA для компонента «Комментарий».
Установите роль comment для каждого комментария. 

<ul class="uk-comment-list">
    <li>
        <article class="uk-comment" role="comment">…</article>
        <ul>
            <li>
                <article class="uk-comment" role="comment">…</article>
            </li>
        </ul>
    </li>
</ul>