Комментарии
Создавайте комментарии к различным материалам, размещенным на сайте, например в блогах, статьях. Комментарии это неотъемлемая часть множества сайтов, будь то небольшой блог или крупный портал. Компонент 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>.
Пример
Великий Князь
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю.
Разметка
<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> элементов в список комментариев.
Пример
Разметка
<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, чтобы изменить стиль блока с комментарием, например выделить его как комментарий администратора.
Пример
Петька
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана. Маленький ручеек Даль журчит по всей стране и обеспечивает ее всеми необходимыми правилами.
Разметка
<article class="uk-comment uk-comment-primary">
...
</article>Subnav в комментариях
В метаданных с комментарием можно использовать компонент Subnav.
Пример
Компонент 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>
Гришка
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю.
Машка
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю.