Компонент Комментарий 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).
Модификатор «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="/demo/img/avatar2.jpg" 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="/demo/img/avatar.jpg" 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="/demo/img/avatar.jpg" 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="/demo/img/avatar.jpg" 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>
Арина
7 дней назад
Однако ж, собраться мужики с колхоза, который был, к счастью, неподалеку. Так как подобное зрелище для здоровяка сущая благодать, то скоро около экипажа накопилась их стадо, и в селе остались только старые бабоньки да малые ребята.
Илона
5 дней назад
Откуда возьмется и надутость, и чопорность, станет комментарить по вытверженным наставлениям, станет ломать голову и придумывать, с кем, и как, и сколько нужно писать, как на кого смотреть, всякую минуту будет бояться, чтобы не ляпнуть больше, чем нужно, запутается милец.
Самира
5 дней назад
Последние слова он уже сказал, обратившись, как обыкновенно случается с ведущими разговор, когда один из них вдруг, неизвестно по какой причине, обратится не к тому, к которому относятся речи, а к какому-нибудь нечаянно пришедшему третьему.