Рубрики
Без рубрики

Как создать компонент временной шкалы с реагированием

В наши дни я работал на новой странице для моего сайта. Я хотел, чтобы сроки продемонстрировать некоторые из моих профессиональных достижений за эти годы. Я сделал это на пару причин: мое будущее я оглянутся на один день и скажет: «Ух ты … я помню

Автор оригинала: FreeCodeCamp Community Member.

В наши дни я работал на новой странице для моего сайта. Я хотел иметь Сроки продемонстрировать некоторые из моих профессиональных достижений за эти годы.

Я сделал это по нескольким причинам:

  1. Мое будущее я оглядываюсь на один день и скажут: «Ух ты … я помню день, когда сделал это! Как счастлив я должен был достичь этой цели!» Наш успех – это путешествие, а не пункт назначения, и я хочу записать каждую цель, которую я достигаю по пути
  2. Это может привлечь больше клиентов (посмотрим, как это происходит?)
  3. На мой взгляд, это другой вид портфеля. Уникальный портфель, может быть? ?

Тем не менее … Давайте построим что-то сейчас!

На рисунке выше вы можете увидеть, что мы собираемся построить сегодня, используя React! Прежде чем начать, давайте сломаем шаги, которые нам нужно взять:

  1. Создать данные что нам понадобится
  2. Создать Жизньтем Компонент – каждый отдельный ввод временной шкалы
  3. Создать Сроки Контейнер – это займет данные и передать его до Жизньтем с
  4. Стиль все

Создайте данные

Перед тем, как мы переместимся на самом деле создать компоненты 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} )}
);

У нас есть следующие теги:

  1. .timeline-item Div – используется как обертка. Этот DIV будет иметь половину ширины ширины своего родителя ( 50% ) и все остальные .timeline-item Div будет размещен в правильно сторона с использованием : Nth-Child (нечетное) селектор
  2. .timeline-item-content div – еще одна обертка (подробнее о том, почему нам это нужно в разделе Styling)
  3. .tag SPAN – этот тег будет иметь пользовательский цвет фона в зависимости от категории
  4. время / Дата и текст
  5. ссылка – Нам нужно будет проверить это, чтобы увидеть, если ссылка предоставляется, потому что мы могли бы не всегда хотеть иметь один
  6. .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);
}

У нас есть несколько вещей:

  1. Эта обертка имеет фиксированную ширина а также а Макс-ширина Отказ Это потому, что мы хотим, чтобы это было несколько границ, что означает, что если есть только несколько слов, мы хотим, чтобы ящик был как минимум 400px Широкий, но если есть много текста, он не должен занимать полное пространство ( 50% от .timeline-item Wrapper) Но текст должен перейти к следующей строке -> Это причина, по которой мы использовали этот второй wrappe R: .timeline-item-cont придавать
  2. Выравнивание текста и Выровняйте предметы Свойства используются для толкания внутренних элементов влево или вправо, в зависимости от родителя
  3. Маленький стрелка Это указывает на среднюю линию, дается стилями, применяемыми на :: после селектор. В основном это коробка с коробка-тень применяется на нем, что вращается 45DEG
  4. Как упоминалось выше, мы стиль правильно сторона, выбрав родитель с : 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;
}

Несколько вещей, чтобы отметить здесь:

  1. Как вы, возможно, догадались, .tag расположен Абсолют потому что мы хотим держать его в верхнем левом (или правом) уголке, независимо от того, какой размер коробка
  2. Мы хотим добавить маленькую карету после А тег, чтобы выделить, что это ссылка
  3. Мы создаем .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 пойти по всей ширине своего родителя, потому что экран меньше и в противном случае он будет выглядеть сжатым

  1. На телефонах – Макс-ширина: 767 пикселей
  • Установите .tag быть полным ширина (И за то, что нам не нужно забывать вычитать 10px от общего количества 100% – это потому, что у нас есть место на уровне Слева: 5px , чтобы мы удалили вдвое это количество)
  • Центруйте весь текст и отставьте его с вершины чуть немного
  • Удалите карету по ссылке и добавь подчеркивание – выглядит лучше на мобильном?

Aaaand … Мы закончили!

Заключение

Как я уже упоминал, этот компонент на моем Сроки страница. Проверьте это, чтобы увидеть его в действии! ?

Если есть то, что вы не поняли из этой статьи, убедитесь, что вы связались со мной, и я буду рад ответить на ваши вопросы!

Счастливое кодирование! ?

Первоначально опубликовано www.florin-pop.com .