Существует множество инструментов, которые помогут вам создать красивый и функциональный портфель с параметрами фильтрации и сортировки. Вот некоторые примеры: масонство , изотоп , микс и т. Д.
Некоторые из этих инструментов не могут быть использованы для коммерческих проектов, если вы не приобретете коммерческую лицензию. И хотя есть и другие варианты для коммерческого использования, они могут принести дополнительный уровень сложности и несоответствия кода. Например, если вы используете Bootstrap в качестве интерфейсной среды, а Masonry — в качестве плагина для создания портфеля, потребуется несколько дополнительных усилий, чтобы сделать работу без проблем.
Разве не было бы замечательно, если бы в Bootstrap была встроена функциональность построения портфолио? Ну … Bootstrap не предлагает такого, но UIkit делает!
Динамическая Сетка UIkit
UIkit является многофункциональным и имеет компоненты, которые вы не можете найти в других популярных фреймворках. Один из таких компонентов называется Dynamic Grid и может использоваться вместе с компонентами другого фреймворка для создания полнофункционального портфеля. И это именно то, что мы собираемся сделать в оставшейся части этого урока.
Настройка нашего проекта
Для создания портфолио нам понадобятся следующие ресурсы:
- CSS UIkit, включая CSS для компонента Sticky
- JQuery
- Основной JavaScript UIkit
- JavaScript UIkit для компонентов Dynamic Grid и Sticky
Здесь важно отметить, что обычный компонент Grid и Dynamic Grid имеют одинаковое имя файла: grid.js или grid.min.js Но они помещаются в разные папки «ядро» и «компоненты» соответственно.
Создание отдельных позиций портфолио
После того, как мы подготовили почву, давайте продолжим, создав контейнер для хранения и центрирования элементов портфеля.
<div class="uk-container uk-container-center uk-margin-top"> <div class="uk-grid-width-small-1-1 uk-grid-width-medium-1-4" data-uk-grid="{gutter: 20}"> <!-- content... --> </div> </div>
Мы используем элемент div с классами uk-container и uk-container-center . Мы также используем uk-margin-top чтобы добавить пространство над содержимым. Внутри контейнера мы создаем сетку с некоторым промежутком между столбцами, который мы указываем с помощью атрибута data-uk-grid="{gutter: 20}" .
Классы uk-grid-width-small-1-1 и uk-grid-width-medium-1-4 говорят браузеру, что элементы должны отображаться по-разному на разных устройствах. На смартфонах элементы будут отображаться в виде одного столбца, а на планшетах и устройствах с большими экранами элементы будут размещаться в четырех столбцах.
Теперь давайте создадим прототип для предметов портфолио. Следующий блок кода создает миниатюру с подписью внизу:
<div> <figure class="uk-thumbnail uk-overlay uk-overlay-hover"> <img class="uk-overlay-fade" src="http://placehold.it/1200x800/1e90ff/fff&text=A+4"> <div class="uk-overlay-panel uk-overlay-scale uk-flex uk-flex-center uk-flex-middle uk-text-center"> <button class="uk-button" data-uk-modal="{target:'#project-details'}" type="button">VIEW MORE</button> </div> <figcaption class="uk-thumbnail-caption">My Project</figcaption> </figure> </div>
Чтобы создать миниатюру, мы используем элемент figure с классом uk-thumbnail и добавляем заголовок, добавляя класс uk-thumbnail-caption к элементу figcaption .
Затем мы добавляем button «View More» с классом uk-button , которая будет отображаться при наведении курсора.
Добавление модального наложения к каждому элементу
Нам нужны некоторые классы из компонента Overlay UIkit.
- Сначала мы добавляем классы
uk-overlayиuk-overlay-hoverк элементуfigure. - Затем мы добавляем класс
uk-overlay-fadeк элементуimg, который изначально заставляет изображение казаться блеклым, и постепенно нарастает при наведении курсора. - Наконец, мы заключаем кнопку в элемент
divс классомuk-overlay-panel, который служит контейнером для содержимого оверлея — в нашем случае, кнопки.
Класс uk-overlay-scale заставляет кнопку увеличиваться при наведении. Остальные классы ( uk-flex uk-flex-center uk-flex-middle uk-text-center ) используются для выравнивания и центрирования кнопки и текста на ней.
Возможно, вы заметили атрибут data-uk-modal="{target:'#project-details'}" внутри элемента button . Это используется для ссылки на модал, который мы собираемся создать через минуту.
<div id="project-details" class="uk-modal"> <div class="uk-modal-dialog"> <a class="uk-modal-close uk-close"></a> <div class="uk-modal-header"><h2>My Project Title</h2></div> <div class="uk-overflow-container"> <img src="http://placehold.it/1200x800/1e90ff/fff&text=My+Project+Image"> <p>Lorem Ipsum...</p> </div> </div> </div>
Чтобы создать рабочий модальный диалог — который будет отображать детали о конкретном элементе при нажатии кнопки — мы делаем следующее:
- Добавьте элемент
divс классомuk-modalи атрибутомid="project-details". Мы создаем настоящий диалог, добавляя элементdivс классомuk-modal-dialog. - Мы добавляем элемент с классами
uk-modal-close uk-closeчтобы создать кнопку закрытия. - Чтобы добавить заголовок, мы используем другой элемент
divс классомuk-modal-header. - Наконец, чтобы отобразить содержимое модала в прокручиваемом контейнере, мы добавляем еще один элемент
divс классомuk-overflow-container.
Вы можете скопировать и вставить код прототипа несколько раз, чтобы создать остальные элементы портфолио. Вы можете опустить код для модального диалога, потому что это не существенно. Учебник по первому пункту достаточен, чтобы показать желаемую функциональность, и нет необходимости копировать его для остальных.
Добавление фильтрации и сортировки
Далее мы хотим создать панель навигации с элементами управления фильтрацией и сортировкой. Поместите следующий код над разметкой для элементов портфолио:
<nav data-uk-sticky id="items" class="uk-navbar"> <label class="uk-navbar-content uk-hidden-small">Filter:</label> <ul class="uk-navbar-nav uk-hidden-small"> <li data-uk-filter="" class="uk-active"><a href="#">ALL</a></li> <li data-uk-filter="blue"><a href="#">BLUE</a></li> <li data-uk-filter="green"><a href="#">GREEN</a></li> </ul> </nav>
Вот что происходит в коде выше:
- Мы используем элемент
navс классомuk-navbar. - Мы добавляем атрибут
data-uk-stickyчтобы панель навигации прилипала к верху при прокрутке содержимого вниз. - Чтобы добавить текст («Filter:»), мы используем элемент
labelсuk-navbar-content uk-hidden-small. Второй класс скрывает текст при просмотре на смартфонах. - Мы используем элемент
ulсuk-navbar-nav uk-hidden-smallдля создания элементов управления фильтрацией. - Для каждого элемента управления мы используем элемент списка с атрибутом
data-uk-filterс именем соответствующего фильтра. Чтобы показать все элементы портфеля без примененного фильтра, мы оставляем значение атрибутаdata-uk-filterпустым. Также, чтобы сделать элемент управления «ВСЕ» выбранным по умолчанию, мы используем классuk-active.
Для элементов управления сортировкой мы делаем почти то же самое с некоторыми незначительными отличиями. Поместите эту разметку внутри элемента nav после элементов управления фильтрацией:
<label class="uk-navbar-content uk-hidden-small">Sort:</label> <ul class="uk-navbar-nav uk-hidden-small"> <li data-uk-sort="numbers"> <a href="#">NUMBERS <i class="uk-icon-sort-numeric-asc"></i></a> </li> <li data-uk-sort="numbers:desc"> <a href="#">NUMBERS <i class="uk-icon-sort-numeric-desc"></i></a> </li> <li data-uk-sort="letters"> <a href="#">LETTERS <i class="uk-icon-sort-alpha-asc"></i></a> </li> <li data-uk-sort="letters:desc"> <a href="#">LETTERS <i class="uk-icon-sort-alpha-desc"></i></a> </li> </ul>
Чтобы добавить категорию для сортировки, мы используем атрибут data-uk-sort . Чтобы сделать сортировку по убыванию, мы просто добавляем суффикс :desc к имени категории. Мы также добавили некоторые значки в элементы управления для большей эстетики и удобства использования. Как видите, вы можете создать столько категорий, сколько пожелаете.
И теперь, чтобы все заработало, нам нужно сделать еще две вещи.
- Измените настройки для нашей динамической сетки на:
data-uk-grid="{gutter: 20, controls: '#items', duration: 500}". Это связывает элементы портфолио с элементами управления с помощьюid="items"из элементаnavи устанавливает продолжительность анимации 500 мс. - Соедините элементы управления с элементами портфолио. Для этого для каждого
div-обертки элементов добавляются следующие атрибуты:data-uk-filter(для связи с элементами управления фильтра),data-numbersиdata-letters(для связи с элементами управления сортировкой).
Код выглядит так:
<!-- item-wrapping div --> <div data-uk-filter="blue" data-numbers="4" data-letters="A"> <figure class="uk-thumbnail uk-overlay uk-overlay-hover"> <img class="uk-overlay-fade" src="http://placehold.it/1200x800/1e90ff/fff&text=A+4"> <!-- etc... --> </figure> </div>
Все идет нормально. Но чтобы сделать портфолио по-настоящему отзывчивым, мы добавим еще один ингредиент. Когда портфель просматривается на смартфонах вместо элементов управления, мы хотим, чтобы на панели навигации отображался только значок меню. И когда пользователь щелкает этот значок, мы хотим, чтобы элементы управления отображались в раскрывающемся списке. Для этого мы поместим следующую разметку внутри элемента nav — после элементов управления:
<div data-uk-dropdown="{mode:'click'}"> <a href="#" class="uk-navbar-toggle uk-visible-small"></a> <div class="uk-dropdown uk-dropdown-navbar"> <!-- where the navbar will go --> </div> </div>
Подведем итог приведенному выше коду:
- Раскрывающийся список создается с элементом
divс атрибутомdata-uk-dropdown, режим которого установлен на «click». Это означает, что раскрывающийся список открывается при щелчке, а не при наведении. - Мы помещаем элемент внутрь, с классом
uk-navbar-toggle uk-visible-small. Это создает вышеупомянутый значок меню и гарантирует, что он будет виден только на смартфонах. - Мы добавляем еще один элемент
divс классамиuk-dropdown uk-dropdown-navbar.
Последнее, что нужно добавить, это элементы управления. Мы делаем это, помещая следующую разметку в последний созданный нами div :
<ul class="uk-nav uk-nav-navbar"> <li class="uk-nav-header">Filter:</li> <li data-uk-filter="" class="uk-active"><a href="#">ALL</a></li> <li data-uk-filter="blue"><a href="#">BLUE</a></li> <li data-uk-filter="green"><a href="#">GREEN</a></li> <li class="uk-nav-divider"></li> </ul> <ul class="uk-nav uk-nav-navbar"> <li class="uk-nav-header">Sort:</li> <li data-uk-sort="numbers"> <a href="#">NUMBERS <i class="uk-icon-sort-numeric-asc"></i></a> </li> <li data-uk-sort="numbers:desc"> <a href="#">NUMBERS <i class="uk-icon-sort-numeric-desc"></i> </a></li> <li data-uk-sort="letters"> <a href="#">LETTERS <i class="uk-icon-sort-alpha-asc"></i></a> </li> <li data-uk-sort="letters:desc"> <a href="#">LETTERS <i class="uk-icon-sort-alpha-desc"></i></a> </li> </ul>
Заключение и Демо
И вот окончательный результат:
Примечание: как уже упоминалось, только первый элемент в демонстрационной версии имеет функциональные возможности наложения модов.
Это только базовая структура и функциональность, необходимые для рабочей страницы портфолио. Отсюда вы можете добавить больше наворотов, особенно в портфолио или на всю страницу (дополнительные стили, другие компоненты и т. Д.).
Например, если ваше портфолио больше похоже на галерею изображений, вы можете использовать компоненты Lightbox и / или Slideshow . Просто повеселитесь, поэкспериментируйте и посмотрите, что работает лучше для вас.