Автор оригинала: FreeCodeCamp Community Member.
В наши дни я работал на новой странице для моего сайта. Я хотел иметь Сроки продемонстрировать некоторые из моих профессиональных достижений за эти годы.
Я сделал это по нескольким причинам:
- Мое будущее я оглядываюсь на один день и скажут: «Ух ты … я помню день, когда сделал это! Как счастлив я должен был достичь этой цели!» Наш успех – это путешествие, а не пункт назначения, и я хочу записать каждую цель, которую я достигаю по пути
- Это может привлечь больше клиентов (посмотрим, как это происходит?)
- На мой взгляд, это другой вид портфеля. Уникальный портфель, может быть? ?
Тем не менее … Давайте построим что-то сейчас!
На рисунке выше вы можете увидеть, что мы собираемся построить сегодня, используя React! Прежде чем начать, давайте сломаем шаги, которые нам нужно взять:
- Создать
данные
что нам понадобится - Создать
Жизньтем
Компонент – каждый отдельный ввод временной шкалы - Создать
Сроки
Контейнер – это займетданные
и передать его доЖизньтем
с - Стиль все
Создайте данные
Перед тем, как мы переместимся на самом деле создать компоненты RACT, нам нужно точно знать, как данные будут выглядеть, поэтому мы можем спланировать структуру DOM.
Для этого приложения временной шкалы нам понадобится массив объектов. Мы назовем этот массив: Timelinedata
Отказ
Посмотрим, как это может посмотреть:
[ { text: 'Wrote my first blog post ever on Medium', date: 'March 03 2017', category: { tag: 'medium', color: '#018f69' }, link: { url: 'https://medium.com/@popflorin1705/javascript-coding-challenge-1-6d9c712963d2', text: 'Read more' } }, { // Another object with data } ];
Свойства довольно простые, верно? Я использовал подобные данные к тому, что у меня на странице моих временных шкале, поэтому мы можем сказать, что это готово к производству! ?
Далее мы построим Жизньтем
составная часть. Это будет использовать данные с объекта выше:
Компонент срока
const TimelineItem = ({ data }) => ();{data.category.tag}{data.text}
{data.link && ( {data.link.text} )}
У нас есть следующие теги:
.timeline-item
Div – используется как обертка. Этот DIV будет иметь половину ширины ширины своего родителя (50%
) и все остальные.timeline-item
Div будет размещен в правильно сторона с использованием: Nth-Child (нечетное)
селектор.timeline-item-content
div – еще одна обертка (подробнее о том, почему нам это нужно в разделе Styling).tag
SPAN – этот тег будет иметь пользовательский цвет фона в зависимости от категории-
время
/Дата
итекст
ссылка
– Нам нужно будет проверить это, чтобы увидеть, еслиссылка
предоставляется, потому что мы могли бы не всегда хотеть иметь один.circle
SPAN – этот тег будет использоваться для размещения круга на средней линии/бар
Примечание : Все сделает гораздо больше смысла, когда мы добираемся до CSS /стайлинг, но до этого давайте создадим Сроки
составная часть:
Контейнер сроки
Этот компонент будет в основном карта
над массивом и для каждого объекта создаст Жизньтем
составная часть. Мы также добавляем небольшую проверку, чтобы убедиться, что в массиве есть хотя бы один элемент:
import timelineData from '_path_to_file_'; const Timeline = () => timelineData.length > 0 && ({timelineData.map((data, idx) => ();))}
Как упомянуто выше, Timelinedata
это массив объектов, содержащих всю необходимую информацию. В моем случае я сохранил этот массив в файле, и я импортировал его здесь, но вы можете взять это из собственной базы данных или с конечной точки API, это зависит от вас.
CSS.
Примечание: Большинство обертков будут Flexbox
Контейнеры, потому что мы можем проще играть с их позиционированием.
Давайте начнем с .timeline-контейнер
CSS:
.timeline-container { display: flex; flex-direction: column; position: relative; margin: 40px 0; } .timeline-container::after { background-color: #e17b77; content: ''; position: absolute; left: calc(50% - 2px); width: 4px; height: 100%; }
Мы используем :: после
Селектор, чтобы создать эту красную линию/бар в середине .timeline-контейнер
Отказ Используя Calc () Функция мы можем позиционировать линию именно в середине, вычитая половину его размера ( 2PX
) от 50%
Отказ Нам нужно сделать это, потому что по умолчанию левый
Свойство позиционирует его в соответствии с левым краем элемента и не середина.
Теперь давайте перейдем к .timeline-item
обертка
Ниже вы можете увидеть пример того, как они расположены в своем родиве ( .timeline-container
). Для демонстрационных целей я добавил границу, чтобы выделить эти обертки:
Как видите, каждая другая обертка идет к правильно и внутренняя обертка ( .timeline-item-content
) принимает меньше места – пространство, данное P
Тег, который находится внутри него (в основном).
Давайте посмотрим на CSS для этого:
.timeline-item { display: flex; justify-content: flex-end; padding-right: 30px; position: relative; margin: 10px 0; width: 50%; } .timeline-item:nth-child(odd) { align-self: flex-end; justify-content: flex-start; padding-left: 30px; padding-right: 0; }
ключ к этому, мы используем : Nth-Child (нечетное)
Селектор и мы устанавливаем Выровнять
недвижимость на Flex-End
Что означает: «Перейти к правильному как можно больше»!
Потому что эти обертки – это 50%
В ширине вы можете видеть, что двое из них занимают всю ширину. Отныне, каждый раз, когда мы хотим по-другому что-то в правильно Сторона, нам придется использовать этот подход.
Далее .timeline-item-content
обертка:
.timeline-item-content { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); border-radius: 5px; background-color: #fff; display: flex; flex-direction: column; align-items: flex-end; padding: 15px; position: relative; width: 400px; max-width: 70%; text-align: right; } .timeline-item-content::after { content: ' '; background-color: #fff; box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2); position: absolute; right: -7.5px; top: calc(50% - 7.5px); transform: rotate(45deg); width: 15px; height: 15px; } .timeline-item:nth-child(odd) .timeline-item-content { text-align: left; align-items: flex-start; } .timeline-item:nth-child(odd) .timeline-item-content::after { right: auto; left: -7.5px; box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2); }
У нас есть несколько вещей:
- Эта обертка имеет фиксированную
ширина
а также аМакс-ширина
Отказ Это потому, что мы хотим, чтобы это было несколько границ, что означает, что если есть только несколько слов, мы хотим, чтобы ящик был как минимум400px
Широкий, но если есть много текста, он не должен занимать полное пространство (50%
от.timeline-item
Wrapper) Но текст должен перейти к следующей строке -> Это причина, по которой мы использовали этот второй wrappeR: .timeline-item-cont
придавать -
Выравнивание текста
иВыровняйте предметы
Свойства используются для толкания внутренних элементов влево или вправо, в зависимости от родителя - Маленький стрелка Это указывает на среднюю линию, дается стилями, применяемыми на
:: после
селектор. В основном это коробка скоробка-тень
применяется на нем, что вращается45DEG
- Как упоминалось выше, мы стиль правильно сторона, выбрав родитель с
: Nth-Child (нечетное)
селектор
Далее все внутренние элементы:
.timeline-item-content .tag { color: #fff; font-size: 12px; font-weight: bold; top: 5px; left: 5px; letter-spacing: 1px; padding: 5px; position: absolute; text-transform: uppercase; } .timeline-item:nth-child(odd) .timeline-item-content .tag { left: auto; right: 5px; } .timeline-item-content time { color: #777; font-size: 12px; font-weight: bold; } .timeline-item-content p { font-size: 16px; line-height: 24px; margin: 15px 0; max-width: 250px; } .timeline-item-content a { font-size: 14px; font-weight: bold; } .timeline-item-content a::after { content: ' ►'; font-size: 12px; } .timeline-item-content .circle { background-color: #fff; border: 3px solid #e17b77; border-radius: 50%; position: absolute; top: calc(50% - 10px); right: -40px; width: 20px; height: 20px; z-index: 100; } .timeline-item:nth-child(odd) .timeline-item-content .circle { right: auto; left: -40px; }
Несколько вещей, чтобы отметить здесь:
- Как вы, возможно, догадались,
.tag
расположенАбсолют
потому что мы хотим держать его в верхнем левом (или правом) уголке, независимо от того, какой размер коробка - Мы хотим добавить маленькую карету после
А
тег, чтобы выделить, что это ссылка - Мы создаем
.circle
и положить его поверх средней линии/бар прямо в спереди Стрелки
Мы почти закончили! ? Единственное, что осталось сделать, это добавить CSS, чтобы сделать все отзывчиво по всем размерам экрана:
@media only screen and (max-width: 1023px) { .timeline-item-content { max-width: 100%; } } @media only screen and (max-width: 767px) { .timeline-item-content, .timeline-item:nth-child(odd) .timeline-item-content { padding: 15px 10px; text-align: center; align-items: center; } .timeline-item-content .tag { width: calc(100% - 10px); text-align: center; } .timeline-item-content time { margin-top: 20px; } .timeline-item-content a { text-decoration: underline; } .timeline-item-content a::after { display: none; } }
У нас есть два медиа-запроса:
На небольших размерах экрана ноутбука – Макс-ширина: 1023 пикселей
– Мы хотим позволить .timeline-item-content
пойти по всей ширине своего родителя, потому что экран меньше и в противном случае он будет выглядеть сжатым
- На телефонах –
Макс-ширина: 767 пикселей
- Установите
.tag
быть полнымширина
(И за то, что нам не нужно забывать вычитать10px
от общего количества100%
– это потому, что у нас есть место на уровнеСлева: 5px
, чтобы мы удалили вдвое это количество) - Центруйте весь текст и отставьте его с вершины чуть немного
- Удалите карету по ссылке и добавь подчеркивание – выглядит лучше на мобильном?
Aaaand … Мы закончили!
Заключение
Как я уже упоминал, этот компонент на моем Сроки страница. Проверьте это, чтобы увидеть его в действии! ?
Если есть то, что вы не поняли из этой статьи, убедитесь, что вы связались со мной, и я буду рад ответить на ваши вопросы!
Счастливое кодирование! ?
Первоначально опубликовано www.florin-pop.com .