{"draftJsState":{"blocks":[{"data":{"image":{"id":"6866b5ef6adc8c622965b5fe"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"9v0d9"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":8,"offset":65}],"inlineStyleRanges":[],"text":"При работе над новой страницей своего веб-сайта я решил добавить Timeline, чтобы показать свои профессиональные достижения за последние годы. С помощью временной шкалы можно не только отследить собственные достижения, но и привлечь новых клиентов.","type":"unstyled","key":"39l8r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На изображении выше показана временная шкала, которую мы будем создавать с помощью React! Для этого выполним следующие действия:","type":"unstyled","key":"5v1ke"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим data","type":"ordered-list-item","key":"9hjl0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим компонент TimelineItem","type":"ordered-list-item","key":"95ti2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим контейнер Timeline для размещения data, которые затем будут переданы в TimelineItem","type":"ordered-list-item","key":"45k4q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Выполним стилизацию","type":"ordered-list-item","key":"380cv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"atpip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание data.","type":"header-two","key":"2ao6g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9kjc1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде чем создавать компоненты React, нужно разобраться в том, как будут выглядеть денные, чтобы распланировать структуру DOM.","type":"unstyled","key":"575ev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":42,"style":"ITALIC"}],"text":"Для этого приложения Timeline понадобится массив объектов. Назовем этот массив: timelineData.","type":"unstyled","key":"3pkuq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Он выглядит следующим образом:","type":"unstyled","key":"7vpe6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5m424"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":317,"style":"ITALIC"}],"text":"[\n {\n text: 'Wrote my first blog post ever on Medium',\n date: 'March 03 2017',\n category: {\n tag: 'medium',\n color: '#018f69'\n },\n link: {\n url:\n 'https://www.google.com\n text: 'Main page'\n }\n },\n {\n // Another object with data\n }\n];","type":"blockquote","key":"aj497"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"57lun"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свойства достаточно ясны.","type":"unstyled","key":"77app"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Затем создадим компонент TimelineItem. Он будет использовать данные из объекта выше:","type":"unstyled","key":"ba7sq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"3e8kh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент TimelineItem.","type":"header-two","key":"4a4dl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"animl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"const TimelineItem = ({ data }) => (\n

\n \n {data.category.tag}\n \n {data.date}\n

{data.text}

\n {data.link && (\n \n {data.link.text}\n \n )}\n \n

\n);","type":"blockquote","key":"6k6db"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"bpj8m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас есть следующие теги:","type":"unstyled","key":"4hvrs"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":158,"style":"BOLD"}],"text":".timeline-item div — используется в качестве wrapper. Этот div обладает половиной родительской ширины (50%), а все остальные .timeline-item div размещаются с правой стороны с помощью селектора :nth-child(odd)","type":"ordered-list-item","key":"4sse6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".timeline-item-content div — еще один wrapper (больше информации об этом в разделе стилизации)","type":"ordered-list-item","key":"1li00"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".tag span — этот тег обладает пользовательским фоновым цветом с зависимости от категории","type":"ordered-list-item","key":"9h2pr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"time/date и text","type":"ordered-list-item","key":"dg8iq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"link — ее необходимо проверять, чтобы узнать о наличии ссылки (link) , поскольку она не всегда необходима","type":"ordered-list-item","key":"1a0le"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".circle span — этот тег используется для размещения круга в середине строки/панели","type":"ordered-list-item","key":"ck8ra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":10,"offset":0,"style":"BOLD"},{"length":4,"offset":41,"style":"BOLD"}],"text":"Примечание: Все будет понятно в разделах CSS иСтилизация, но для начала создадим компонент Timeline:","type":"unstyled","key":"aq22g"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"e54ml"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Контейнер Timeline.","type":"header-two","key":"31edd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"5n62k"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот компонент будет отображаться (map) поверх массива и создаст для каждого объекта компонент TimelineItem. Также добавим небольшую проверку, чтобы убедиться в наличии как минимум одного элемента в массиве:","type":"unstyled","key":"9d9ip"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7d72f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"import timelineData from '_path_to_file_';\n\nconst Timeline = () =>\n timelineData.length > 0 && (\n

\n {timelineData.map((data, idx) => (\n \n ))}\n

\n );","type":"blockquote","key":"8hmlr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"betrg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как было сказано выше, timelineData — это массив объектов, содержащий всю необходимую информацию. В этом случае массив сохранен в файле и импортирован сюда, однако его вы можете взять его из своей базы данных или endpoint API.","type":"unstyled","key":"9qqkp"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-three","key":"acc2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"CSS.","type":"header-two","key":"5uupv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7v5r0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":11,"offset":0,"style":"BOLD"}],"text":"Примечание: большинство wrappers будут контейнерами flexbox, поскольку так легче экспериментировать с их расположением.","type":"unstyled","key":"7t7jr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Начнем с CSS .timeline-container:","type":"unstyled","key":"3uvk4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eusc2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".timeline-container {\n display: flex;\n flex-direction: column;\n position: relative;\n margin: 40px 0;\n}\n\n.timeline-container::after {\n background-color: #e17b77;\n content: '';\n position: absolute;\n left: calc(50% - 2px);\n width: 4px;\n height: 100%;\n}","type":"blockquote","key":"94d0d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"blockquote","key":"7tnc"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":6,"offset":112}],"inlineStyleRanges":[],"text":"Используем селектор ::after для создания красной линии/полосы в середине .timeline-container. С помощью функции calc() линию можно разместить посередине путем вычисления половины ее размера (2px) из 50%. Это нужно сделать, поскольку по умолчанию свойство left размещает ее в соответствии с левым краем, а не посередине.","type":"unstyled","key":"al97"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Теперь перейдем к wrapper .timeline-item.","type":"unstyled","key":"ftnpu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ниже показан пример их размещения относительно родителя (.timeline-container):","type":"unstyled","key":"afpfq"},{"data":{"image":{"id":"6866ba3af926653f1d49c988"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"frbr3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":35,"style":"BOLD"}],"text":"Каждый следующий wrapper переходит вправо, а внутренний wrapper (.timeline-item-content) занимает меньше места — пространство, заданное тегом p, который находится внутри (по большей части).","type":"unstyled","key":"69aur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Рассмотрим CSS для этого:","type":"unstyled","key":"754jf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"6gmbe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".timeline-item {\n display: flex;\n justify-content: flex-end;\n padding-right: 30px;\n position: relative;\n margin: 10px 0;\n width: 50%;\n}\n\n.timeline-item:nth-child(odd) {\n align-self: flex-end;\n justify-content: flex-start;\n padding-left: 30px;\n padding-right: 0;\n}","type":"blockquote","key":"4t42f"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"869tt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Смысл заключается в том, что мы используем селектор :nth-child(odd) и устанавливаем свойство align-self для flex-end, которое означает: “Перейти вправо настолько, насколько это возможно”!","type":"unstyled","key":"13er6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":112,"style":"BOLD"}],"text":"Поскольку эти wrappers 50% шириной, то два из них занимают всю ширину. Таким образом, для изменения стилизации с правой стороны нужно использовать этот подход.","type":"unstyled","key":"6rb32"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим к wrapper .timeline-item-content:","type":"unstyled","key":"dejq1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"1f7fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".timeline-item-content {\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);\n border-radius: 5px;\n background-color: #fff;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n padding: 15px;\n position: relative;\n width: 400px;\n max-width: 70%;\n text-align: right;\n}\n\n.timeline-item-content::after {\n content: ' ';\n background-color: #fff;\n box-shadow: 1px -1px 1px rgba(0, 0, 0, 0.2);\n position: absolute;\n right: -7.5px;\n top: calc(50% - 7.5px);\n transform: rotate(45deg);\n width: 15px;\n height: 15px;\n}\n\n.timeline-item:nth-child(odd) .timeline-item-content {\n text-align: left;\n align-items: flex-start;\n}\n\n.timeline-item:nth-child(odd) .timeline-item-content::after {\n right: auto;\n left: -7.5px;\n box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2);\n}","type":"blockquote","key":"e0bek"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cpvvk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Здесь происходит следующее:","type":"unstyled","key":"dg3bv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Этот wrapper установил width и max-width, необходимые для наличия рамок. Это означает, что при наличии лишь нескольких слов, коробка должна быть минимум 400px шириной. Однако если текста много, она не должна занимать все пространство (50% от wrapper .timeline-item), а текст должен переходить на следующую строку -> по этой причине мы использовали второй wrapper: .timeline-item-content","type":"ordered-list-item","key":"7msag"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Свойства text-align и align-items используются для перемещения внутренних элементов влево или вправо в зависимости от родителя","type":"ordered-list-item","key":"fmels"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Маленькая стрелка, указывающая на середину линии, задается стилями, которые применяются к селектору ::after. По сути, это коробка с box-shadow, нанесенной на нее и повернутой на 45deg","type":"ordered-list-item","key":"3lkul"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":6,"offset":34,"style":"BOLD"}],"text":"Как было сказано выше, стилизация правой стороны осуществляется с помощью выбора родителя с селектором :nth-child(odd)","type":"ordered-list-item","key":"71la7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Переходим ко внутренним элементам:","type":"unstyled","key":"3s77a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"9hhko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".timeline-item-content .tag {\n color: #fff;\n font-size: 12px;\n font-weight: bold;\n top: 5px;\n left: 5px;\n letter-spacing: 1px;\n padding: 5px;\n position: absolute;\n text-transform: uppercase;\n}\n\n.timeline-item:nth-child(odd) .timeline-item-content .tag {\n left: auto;\n right: 5px;\n}\n\n.timeline-item-content time {\n color: #777;\n font-size: 12px;\n font-weight: bold;\n}\n\n.timeline-item-content p {\n font-size: 16px;\n line-height: 24px;\n margin: 15px 0;\n max-width: 250px;\n}\n\n.timeline-item-content a {\n font-size: 14px;\n font-weight: bold;\n}\n\n.timeline-item-content a::after {\n content: ' ►';\n font-size: 12px;\n}\n\n.timeline-item-content .circle {\n background-color: #fff;\n border: 3px solid #e17b77;\n border-radius: 50%;\n position: absolute;\n top: calc(50% - 10px);\n right: -40px;\n width: 20px;\n height: 20px;\n z-index: 100;\n}\n\n.timeline-item:nth-child(odd) .timeline-item-content .circle {\n right: auto;\n left: -40px;\n}","type":"blockquote","key":"6vsts"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"7juu8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Примечания:","type":"unstyled","key":"de7nj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".tag имеет размещение absolute, поскольку он должен находится в левом (или правом) верхнем углу независимо от размера коробки","type":"ordered-list-item","key":"62epl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":5,"offset":32,"style":"ITALIC"}],"text":"Нужно добавить небольшой значок после тега a для обозначения ссылки","type":"ordered-list-item","key":"59mjt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":75,"style":"ITALIC"}],"text":"Создаем .circle и размещаем его в верхней части средней линии/полосы прямо напротив стрелки","type":"ordered-list-item","key":"bts9v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Почти все! Осталось только добавить CSS, чтобы элементы реагировали на все размеры экрана:","type":"unstyled","key":"2ljr7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3fhso"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@media only screen and (max-width: 1023px) {\n .timeline-item-content {\n max-width: 100%;\n }\n}\n\n@media only screen and (max-width: 767px) {\n .timeline-item-content,\n .timeline-item:nth-child(odd) .timeline-item-content {\n padding: 15px 10px;\n text-align: center;\n align-items: center;\n }\n\n.timeline-item-content .tag {\n width: calc(100% - 10px);\n text-align: center;\n }\n\n.timeline-item-content time {\n margin-top: 20px;\n }\n\n.timeline-item-content a {\n text-decoration: underline;\n }\n\n.timeline-item-content a::after {\n display: none;\n }\n}","type":"blockquote","key":"13ef3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"2kgh3"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У нас есть два медиа-запроса:","type":"unstyled","key":"dqdg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На маленьких экранах ноутбуков — max-width: 1023px — .timeline-item-content должен проходить по всей ширине родителя, поскольку экран меньше, иначе изображение будет выглядеть сжатым","type":"unstyled","key":"56uk1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"На телефонах — max-width: 767px","type":"ordered-list-item","key":"fvkfi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"установите .tag на полную ширину (width) (не забудьте вычесть 10px от 100% — поскольку его расположение left: 5px, поэтому удаляем вдвое больше от этой суммы)","type":"unordered-list-item","key":"dk646"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"разместите текст в центре и опустите его немного вниз от верхнего края","type":"unordered-list-item","key":"99ecv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"удалите значок на ссылке и добавьте подчеркивание — оно выглядит лучше на мобильном устройстве ?","type":"unordered-list-item","key":"f3j99"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Вот и все!","type":"unstyled","key":"e7d99"},{"data":{"image":{"id":"6866bad76adc8c62296bbbac"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"7k4vm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-two","key":"dtgtr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"\uD83D\uDE4F Спасибо за прочтение! \uD83D\uDE4F","type":"header-two","key":"dvjbb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"qaqg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":158,"offset":0,"style":"ITALIC"}],"text":"Надеюсь, эта статья была вам полезна. Если у вас есть вопросы или предложения, пожалуйста, оставляйте комментарии. Ваши отзывы помогают мне становиться лучше.","type":"unstyled","key":"d01nl"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"header-two","key":"cgh02"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"⚠️ Внимание! ⚠️","type":"header-two","key":"4rj5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"l9g7"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":188,"offset":0,"style":"ITALIC"}],"text":"Если при чтении этой статьи вы обнаружите какие-либо ошибки в программном коде или грамматике, битые ссылки, пожалуйста, дайте мне знать. Заранее приношу извинения за возможные неудобства.","type":"unstyled","key":"c5h84"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"STLPAD1QXxJnMeYT71mc"}],"entityMap":{"0":{"data":{"href":"https://www.florin-pop.com/timeline","url":"https://www.florin-pop.com/timeline"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://developer.mozilla.org/en-US/docs/Web/CSS/calc","url":"https://developer.mozilla.org/en-US/docs/Web/CSS/calc"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}