В 2016 году нет сомнений в том, что шаблон проектирования на основе карточек является важным инструментом в наборе инструментов современного веб-разработчика.
Карты с большим успехом использовались в большинстве социальных сетей и веб-сайтов и приложений для совместного использования (Dribbble, Twitter, Facebook, Pinterest, Trello и т. Д.), И особенно в мобильном дизайне. Их компактность, портативность и высокая гибкость дают разработчикам удобный способ создания адаптивных макетов и легко адаптируют контент к различным контекстам.
Вы можете использовать карты в самых разных сценариях, таких как перечисление постов в блоге, статьи о рецептах, обзоры продуктов, основные характеристики, создание автономных виджетов и т. Д. Более подробный обзор того, что такое карты и почему вы должны их использовать, см. эта статья
Сегодня мы рассмотрим два примера реализованного шаблона карточного дизайна.
- альбом изображений
- и виджет рецепт
Мы собираемся использовать Semantic UI , который является одним из самых популярных и простых в использовании CSS-фреймворков и предоставляет готовый к использованию компонент Card из коробки. Любой дизайнер, знакомый с HTML / CSS, не должен испытывать проблем с этим учебником.
Прежде чем мы начнем с примерами, убедитесь, что вы подготовили два пустых HTML-файла, каждый со ссылками на jQuery ( jquery.js ) и Semantic UI (semantic.css, semantic.js). Вы можете связать их с CDN, если вы не хотите загружать их.
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>Semantic UI CDN</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script> </head> <body> <!-- Your Semantic UI Code --> </body> </html> Пример 1: простой альбом изображений
Для первого примера, давайте предположим, что нам нужно приложение для хранения и управления нашими изображениями, сгруппированными в отдельные альбомы. Мы также хотим, чтобы каждый альбом выглядел как стопка изображений. Чтобы добиться этого, добавьте следующий код в ваш первый HTML-файл:
<div id="album"> <div class="ui piled compact segment"> <div class="floating ui red label">9</div> <div class="ui card"> <!-- Album Card Content --> </div> </div> </div>
Мы обертываем альбом <div id="album"> . Затем мы используем компонент « Сегмент» , благодаря которому альбом отображается в виде стопки изображений. Мы также поместили ярлык в верхнем правом углу, показывающий, сколько изображений содержит альбом. И, наконец, мы добавляем пустой компонент Card .
На этом этапе нам нужно немного CSS, чтобы дать небольшую передышку вокруг альбома и отличить его от фона:
body { margin: 30px; background-color: whitesmoke; }
Прямо сейчас альбом выглядит немного странно. Но не волнуйтесь, мы приведем его в форму через минуту.
Мы хотим, чтобы переднее изображение показывало первое изображение из альбома. Когда мы наведем курсор на это изображение, оно будет затемнено, и в центре появится кнопка. Когда мы нажмем кнопку, мы попадем внутрь альбома. Мы делаем все это, добавляя следующий код в пустой компонент Card .
<div class="blurring dimmable image"> <div class="ui inverted dimmer"> <div class="content"> <div class="center"> <div class="ui red button view">VIEW</div> </div> </div> </div> <img src="http://mrg.bz/IxQIgC"> </div>
Чтобы активировать компонент Dimmer , который мы используем выше, нам нужно добавить следующий код jQuery:
$( document ).ready(function() { $('.ui.card .image').dimmer({on: 'hover'}); });
Альбом теперь выглядит лучше, но кнопка VIEW ничего не делает. Пока оставьте все как есть, мы активируем его чуть позже.
Давайте продолжим создание «лица» альбома, добавив следующий код:
<div class="content"> <div id="rate" class="ui star rating right floated" data-rating="3"></div> <div class="header">Animals</div> <div class="meta"> <span class="date"><i class="calendar icon"></i>Created 7/27/2014</span> <span class="right floated date"><i class="history icon"></i> Modified 8/4/2014</span> </div> <div class="description"> Different animals from around the world </div> </div>
Здесь мы используем класс content для группировки элементов заголовка, мета и описания, которые представляют заголовок альбома, сведения об альбоме, например, когда альбом создается и когда изменяется, а также краткое описание содержимого альбома. Кроме того, мы добавляем компонент Rating, выровненный по правому краю заголовка. Чтобы активировать его и сделать его видимым, мы снова используем jQuery:
$('.ui.rating').rating({maxRating: 5});
Вы можете заметить, что детали альбома слишком велики и не помещаются в одну строку. Мы исправим это в конце, когда будут созданы все карты.
Мы продолжим, добавив две кнопки внизу карточки альбома:
<div class="extra content" > <div class="ui right labeled button" data-content="Like it!" data-variation="tiny"> <div class="ui red icon tiny button"> <i class="thumbs outline up large icon"></i> </div> <a class="ui basic red left pointing label">365</a> </div> <div class="ui left labeled right floated button" data-content="Share it!" data-variation="tiny"> <a class="ui basic red right pointing label">183</a> <div class="ui red icon tiny button"> <i class="external share large icon"></i> </div> </div> </div>
Здесь мы используем две сложные кнопки, обернутые в extra content класс extra content — одну, чтобы понравиться альбому и одну, чтобы поделиться им. Кроме того, нам нужна всплывающая подсказка для каждой кнопки, поэтому мы добавляем атрибут data-content содержащий сообщение всплывающей подсказки. И снова, чтобы активировать компонент Popup, мы используем этот код jQuery:
$('.ui.button').popup();
Теперь «лицо» альбома готово, и пришло время создать внутренний вид для изображений альбома. Мы добавляем следующий код, но на этот раз после ( снаружи ) <div id="album"> :
<div id="album_items"> <button class="ui labeled icon button back"> <i class="arrow lircle left icon"></i>Back </button> <div class="ui cards"> <!-- Album Images Cards --> </div> </div>
Здесь мы обертываем изображения альбома <div id="album_items"> и добавляем кнопку, чтобы вернуться к «лицу» альбома. Затем мы добавляем <div class="ui cards"> , цель которого — хранить отдельные карточки с изображениями. Мы также поместили следующий CSS-код, чтобы изначально скрыть изображения альбома и дать им пространство вокруг них:
#album_items { display: none; } #album_items .ui.cards { margin: 10px; }
Теперь пришло время заставить работать кнопку VIEW . Мы добавляем следующий код:
$('.button.view').on('click', (function() { $('#album').fadeOut('slow', function () { $('#album_items').fadeIn('slow'); }); })); $('.button.back').on('click', (function() { $('#album_items').fadeOut('slow', function () { $('#album').fadeIn('slow'); }); }));
Хорошо. Если вы попробуете это сейчас, вы увидите, что это работает. Но пока в альбоме нечего показать. Итак, начнем добавлять карточки с изображениями. Вот код для первой карты:
<div class="card"> <div class="image"> <img src="http://mrg.bz/IxQIgC"> </div> <div class="content"> <div class="header">giraffes.jpg</div> <div class="meta">263 KB</div> </div> <div class="ui bottom attached basic buttons"> <button class="ui button"><i class="pencil icon"></i></button> <button class="ui button"><i class="trash icon"></i></button> </div> </div>
Для каждой карты изображений мы добавляем само изображение, раздел содержимого с заголовком и размером изображения, а также две кнопки для редактирования и удаления изображения. Мы делаем это еще восемь раз, пока в альбоме не будет 9 карточных изображений, как это обозначено на этикетке альбома в правом верхнем углу. (См. Окончательный результат ниже для справки о других восьми картах)
Последнее, что нам нужно сделать, это немного изменить внешний вид карт с изображениями. Для этого мы используем следующий CSS:
.ui.cards > .card { width: 210px; } .ui.cards > .card > .content > .header:not(.ui) { font-size: 1.1em; font-weight: normal; } .ui.cards > .card .meta, .ui.card .meta { font-size: 0.8em; }
Теперь все должно работать и отображаться правильно. Вы можете увидеть окончательный результат здесь JS Bin
Пример 2: виджет рецепта
ПРИМЕЧАНИЕ: содержание рецепта взято отсюда .
Для второго примера, давайте предположим, что мы хотим создать виджет рецепта, содержащий изображение рецепта, имя, описание и некоторые детали (время приготовления, количество порций и уровень сложности) на его передней карточке. Когда мы наведем курсор на карту, основное содержимое будет скрыто, показывая другую карту с двумя списками: один для ингредиентов рецепта и один для указаний рецепта.
Используйте ваш второй HTML-файл и добавьте этот начальный код:
<div class="ui move reveal"> <div class="visible content"> <div class="ui card"> </div> </div> <div class="hidden content"> <div class="ui card"> </div> </div> </div>
Здесь мы используем компонент Reveal , который имеет два раздела: для видимого и скрытого контента. Для каждого раздела мы ставим пустой компонент Card . Мы также добавили немного CSS — мы даем некоторое пространство вокруг карты рецепта и используем lightgrey цвет, чтобы различать карты. Мы переопределяем стиль для Reveal, чтобы иметь ширину 290px чтобы соответствовать ширине компонента Card по умолчанию, и мы устанавливаем свойство white-space в normal , чтобы обернуть длинные строки внутри карты. Также мы даем карточку высотой 420px .
body { margin: 30px; background-color: lightgrey; } .ui.move.reveal { width: 290px; white-space: normal; } .ui.card { height: 420px; }
Теперь давайте добавим код для видимой карты:
<img class="ui image" src="http://mrg.bz/TRRrQJ"> <div class="content"> <div class="header">Pizza Margherita</div> <div class="description">Invented in Naples in honor of the first queen of Italy, the Margherita pizza is the triumph of Italian cuisine in the world.</div> </div> <div class="extra content" > <div class="ui labeled icon menu"> <a class="item"><i class="wait icon"></i>2h 16min</a> <a class="item"><i class="food icon"></i>6 servings</a> <a class="item"><i class="signal icon"></i>Easy</a> </div> </div>
Сначала мы ставим изображение для рецепта. Далее мы используем раздел контента, чтобы показать заголовок и описание рецепта. И, наконец, мы используем компонент Меню внутри раздела дополнительного контента, чтобы отобразить детали для рецепта — время приготовления, количество порций и уровень сложности. Единственное, что остается сделать с этой передней картой, это настроить внешний вид меню, чтобы равномерно отображать три его части.
Также мы немного уменьшаем размер шрифта и корректируем отступы, чтобы иметь больше места справа и слева и меньше сверху и снизу.
.ui.labeled.icon.menu .item{ min-width: 33.3333%; max-width: 33.3333%; font-size: 0.8em; padding: 6px 2px; }
Отлично. Теперь вы можете проверить это. Работает нормально, но нам нужно добавить контент для скрытой карты:
<div class="content"> <div class="ui pointing secondary menu"> <div class="item active" data-tab="ingredients">Ingredients</div> <div class="item" data-tab="directions">Directions</div> </div> <div class="ui tab active" data-tab="ingredients"> </div> <div class="ui tab" data-tab="directions"> </div> </div>
Здесь мы используем компонент Tab вместе с компонентом Menu для создания вкладок для списков ингредиентов и направлений .
Для активации компонента Tab нам нужно использовать следующий код jQuery:
$( document ).ready(function() { $('.menu .item').tab(); });
Сейчас вкладки работают, но контент отсутствует. Давайте добавим содержимое первой вкладки:
<h3>For pasta</h3> <div class="ui list"> <div class="item"><i class="check circle red icon"></i>2 lb Italian "00" flour or all-purpose flour</div> <div class="item"><i class="check circle red icon"></i>1 oz fresh yeast</div> <div class="item"><i class="check circle red icon"></i>2 cups water</div> <div class="item"><i class="check circle red icon"></i>⅜ oz salt</div> </div> <h3>For dressing</h3> <div class="ui small list"> <div class="item"><i class="check circle red icon"></i>½ cup extra virgin olive oil</div> <div class="item"><i class="check circle red icon"></i>1 lb mozzarella cheese</div> <div class="item"><i class="check circle red icon"></i>basil leaves to taste</div> <div class="item"><i class="check circle red icon"></i>1 lb canned tomatoes</div> <div class="item"><i class="check circle red icon"></i>salt to taste</div> </div>
А теперь давайте добавим содержимое для второй вкладки:
<div class="ui small list"> <div class="item"><span class="ui red circular label">1</span> On a wooden...</div> <div class="item"><span class="ui red circular label">2</span> Knead the dough...</div> ... <div class="item"><span class="ui red circular label">8</span> Once ready...</div> </div>
Здесь для краткости я не даю полный список направлений. Смотрите окончательный результат ниже для полной версии.
Последнее, что нам нужно сделать, это добавить немного CSS для правильного отображения. Сначала мы устанавливаем курсор на pointer при наведении курсора на вкладки. Затем мы устанавливаем высоту вкладок 320px и свойство overflow-y auto , чтобы показать полосу прокрутки, когда список становится слишком длинным, как это происходит со списком направлений .
.ui.pointing.menu { cursor: pointer; } .ui.tab { height: 320px; overflow-y: auto; }
Отлично. Теперь все должно работать правильно. Вы можете увидеть окончательный результат здесь JS Bin
Резюме
До сих пор мы видели два примера, демонстрирующих практическую реализацию шаблона проектирования на основе карт. Попутно мы изучили компоненты карточного интерфейса Semantic UI и то, как мы можем использовать его для реализации различных видов карточного дизайна. Теперь вы можете продолжить экспериментировать со своими собственными идеями.
И для тех из вас, кто является поклонниками Bootstrap, хорошая новость заключается в том, что их следующий крупный релиз также предоставит встроенный карточный компонент.