Источник: Nuances of Programming
При работе над новой страницей своего веб-сайта я решил добавить Timeline, чтобы показать свои профессиональные достижения за последние годы. С помощью временной шкалы можно не только отследить собственные достижения, но и привлечь новых клиентов.
На изображении выше показана временная шкала, которую мы будем создавать с помощью React! Для этого выполним следующие действия:
- Создадим data
- Создадим компонент TimelineItem
- Создадим контейнер Timeline для размещения data, которые затем будут переданы в TimelineItem
- Выполним стилизацию
Создание data
Прежде чем создавать компоненты React, нужно разобраться в том, как будут выглядеть денные, чтобы распланировать структуру DOM.
Для этого приложения Timeline понадобится массив объектов. Назовем этот массив: timelineData.
Он выглядит следующим образом:
Свойства достаточно ясны.
Затем создадим компонент TimelineItem. Он будет использовать данные из объекта выше:
Компонент TimelineItem
У нас есть следующие теги:
- .timeline-item div — используется в качестве wrapper. Этот div обладает половиной родительской ширины (50%), а все остальные .timeline-item div размещаются с правой стороны с помощью селектора :nth-child(odd)
- .timeline-item-content div — еще один wrapper (больше информации об этом в разделе стилизации)
- .tag span — этот тег обладает пользовательским фоновым цветом с зависимости от категории
- time/date и text
- link — ее необходимо проверять, чтобы узнать о наличии ссылки (link) , поскольку она не всегда необходима
- .circle span — этот тег используется для размещения круга в середине строки/панели
Примечание: Все будет понятно в разделах CSS иСтилизация, но для начала создадим компонент Timeline:
Контейнер Timeline
Этот компонент будет отображаться (map) поверх массива и создаст для каждого объекта компонент TimelineItem. Также добавим небольшую проверку, чтобы убедиться в наличии как минимум одного элемента в массиве:
Как было сказано выше, timelineData — это массив объектов, содержащий всю необходимую информацию. В этом случае массив сохранен в файле и импортирован сюда, однако его вы можете взять его из своей базы данных или endpoint API.
CSS
Примечание: большинство wrappers будут контейнерами flexbox, поскольку так легче экспериментировать с их расположением.
Начнем с CSS .timeline-container:
Используем селектор ::after для создания красной линии/полосы в середине .timeline-container. С помощью функции calc() линию можно разместить посередине путем вычисления половины ее размера (2px) из 50%. Это нужно сделать, поскольку по умолчанию свойство left размещает ее в соответствии с левым краем, а не посередине.
Теперь перейдем к wrapper .timeline-item.
Ниже показан пример их размещения относительно родителя (.timeline-container):
Каждый следующий wrapper переходит вправо, а внутренний wrapper (.timeline-item-content) занимает меньше места — пространство, заданное тегом p, который находится внутри (по большей части).
Рассмотрим CSS для этого:
Смысл заключается в том, что мы используем селектор :nth-child(odd) и устанавливаем свойство align-self для flex-end, которое означает: “Перейти вправо настолько, насколько это возможно”!
Поскольку эти wrappers 50% шириной, то два из них занимают всю ширину. Таким образом, для изменения стилизации с правой стороны нужно использовать этот подход.
Переходим к wrapper .timeline-item-content:
Здесь происходит следующее:
- Этот wrapper установил width и max-width, необходимые для наличия рамок. Это означает, что при наличии лишь нескольких слов, коробка должна быть минимум 400px шириной. Однако если текста много, она не должна занимать все пространство (50% от wrapper .timeline-item), а текст должен переходить на следующую строку -> по этой причине мы использовали второй wrapper: .timeline-item-content
- Свойства text-align и align-items используются для перемещения внутренних элементов влево или вправо в зависимости от родителя
- Маленькая стрелка, указывающая на середину линии, задается стилями, которые применяются к селектору ::after. По сути, это коробка с box-shadow, нанесенной на нее и повернутой на 45deg
- Как было сказано выше, стилизация правой стороны осуществляется с помощью выбора родителя с селектором :nth-child(odd)
Переходим ко внутренним элементам:
Примечания:
- .tag имеет размещение absolute, поскольку он должен находится в левом (или правом) верхнем углу независимо от размера коробки
- Нужно добавить небольшой значок после тега a для обозначения ссылки
- Создаем .circle и размещаем его в верхней части средней линии/полосы прямо напротив стрелки
Почти все! Осталось только добавить CSS, чтобы элементы реагировали на все размеры экрана:
У нас есть два медиа-запроса:
На маленьких экранах ноутбуков — max-width: 1023px — .timeline-item-content должен проходить по всей ширине родителя, поскольку экран меньше, иначе изображение будет выглядеть сжатым
- На телефонах — max-width: 767px
- установите .tag на полную ширину (width) (не забудьте вычесть 10px от 100% — поскольку его расположение left: 5px, поэтому удаляем вдвое больше от этой суммы)
- разместите текст в центре и опустите его немного вниз от верхнего края
- удалите значок на ссылке и добавьте подчеркивание — оно выглядит лучше на мобильном устройстве 😉
Вот и все!
Заключение
Этот компонент находится на моей странице Timeline. Там можно увидеть его в действии!
Счастливого программирования! 😇
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Florin Pop: How to create a Timeline Component with React