Включает стили для комментариев, например, для раздела блога на вашем сайте.
Как использовать комментарии в UIkit 3
Компонент Comment состоит из самого комментария, заголовка комментария, включая аватар, заголовок и метаданные, и тела комментария.
| Класс | Описание |
|---|---|
.uk-comment |
Добавьте этот класс для начала работы с компонентом. |
.uk-comment-body |
Добавьте этот класс для создания тела комментария. |
.uk-comment-header |
Добавьте этот класс для создания шапки комментария. |
.uk-comment-title |
Добавьте этот класс в шапку, чтобы создать заголовок комментария. |
.uk-comment-meta |
Добавьте этот класс для создания метаданных о вашем комментарии, можно взять из Субнавигации. |
.uk-comment-avatar |
Добавьте этот класс к элементу <img> для создания аватарки пользователя. |
<article class="uk-comment">
<header class="uk-comment-header">
<img class="uk-comment-avatar" src="" alt="">
<h4 class="uk-comment-title"></h4>
<ul class="uk-comment-meta uk-subnav"></ul>
</header>
<div class="uk-comment-body"></div>
</article>
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"> <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img class="uk-comment-avatar" src="images/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> <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top"> <li><a href="#">12 дней назад</a></li> <li><a href="#">Ответить</a></li> </ul> </div> </header> <div class="uk-comment-body"> <p>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.</p> </div> </article>
Модификатор основного стиля
Чтобы оформить комментарий иначе, например, чтобы выделить его как комментарий администратора, добавьте класс .uk-comment-primary.
<article class="uk-comment uk-comment-primary">...</article>
-
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"> <header class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid> <div class="uk-width-auto"> <img class="uk-comment-avatar" src="images/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> <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top"> <li><a href="#">12 дней назад</a></li> <li><a href="#">Ответить</a></li> </ul> </div> </header> <div class="uk-comment-body"> <p>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.</p> </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>
</ul>
<ul class="uk-comment-list"> <li> <article class="uk-comment uk-visible-toggle"> <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/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="#">12 дней назад</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>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.</p> </div> </article> <ul> <li> <article class="uk-comment uk-comment-primary uk-visible-toggle"> <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/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="#">13 дней назад</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>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.</p> </div> </article> </li> <li> <article class="uk-comment uk-visible-toggle"> <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/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="#">14 дней назад</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>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.</p> </div> </article> </li> </ul> </li> </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. 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.
Автор
13 дней назад
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.
Автор
14 дней назад
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.