كيفية إنشاء مكون الجدول الزمني مع رد الفعل

في هذه الأيام كنت أعمل على صفحة جديدة لموقع الويب الخاص بي. أردت أن يكون لدي جدول زمني لعرض بعض من إنجازاتي المهنية على مر السنين.

لقد فعلت ذلك لسببين:

  1. سوف ننظر إلى نفسي في المستقبل يوما ما ويقول: "واو ... أتذكر اليوم الذي فعلت ذلك! كم كنت سعيدًا لتحقيق هذا الهدف! "إن نجاحنا هو رحلة وليس وجهة وأريد أن أكتب كل هدف أحققه على طول الطريق
  2. قد يجذب المزيد من العملاء (سنرى كيف تسير الأمور)
  3. في رأيي هو نوع مختلف من المحفظة. محفظة فريدة من نوعها ، ربما؟

ومع ذلك ... دعونا نبني شيئًا الآن!

في الصورة أعلاه ، يمكنك رؤية ما سنبنيه اليوم باستخدام React! قبل أن نبدأ ، لنفصل عن الخطوات التي نحتاج إلى اتخاذها:

  1. قم بإنشاء البيانات التي سنحتاجها
  2. إنشاء مكون TimelineItem - كل إدخال الخط الزمني الفردية
  3. قم بإنشاء حاوية Timeline - سوف يستغرق البيانات ويمررها إلى TimelineItems
  4. أسلوب كل شيء

إنشاء البيانات

قبل الانتقال إلى إنشاء مكونات React بالفعل ، نحتاج إلى معرفة بالضبط كيف ستبدو البيانات حتى نتمكن من تخطيط بنية DOM.

في تطبيق Timeline هذا ، سنحتاج إلى مجموعة من الكائنات. سوف نسمي هذه المجموعة: timelineData.

دعنا نرى كيف سيبدو:

[
    {
        النص: "كتب أول منشور لبلدي على الإطلاق على متوسط" ،
        التاريخ: 'مارس 03 2017' ،
        الفئة: {
            العلامة: 'متوسطة' ،
            اللون: '# 018f69'
        }،
        حلقة الوصل: {
            موقع المعلومات العالمي:
                "https://medium.com/@popflorin1705/javascript-coding-challenge-1-6d9c712963d2،
            النص: "اقرأ المزيد"
        }
    }،
    {
        // كائن آخر مع البيانات
    }
].

الخصائص واضحة ومباشرة ، أليس كذلك؟ لقد استخدمت بيانات مماثلة لما لدي في صفحة الجدول الزمني ، لذلك يمكننا القول أن هذا الإنتاج جاهز!

بعد ذلك ، سننشئ مكون TimelineItem. سيستخدم هذا البيانات من الكائن أعلاه:

المكون TimelineItem

const TimelineItem = ({data}) => (
    
        
                             {data.category.tag}                          <وقت> {data.date}             

{data.text}             {وصلة البيانات && (                 <ل                     أ href = {data.link.url}                     استهداف = "_ فارغة"                     rel = "noopener noreferrer"                 >                     {data.link.text}                              )}                           

لدينا العلامات التالية:

  1. .timeline-item div - يستخدم كملف. سيكون لهذا div نصف عرض عرض الوالد (50٪) وسيتم وضع كل عنصر div في البند الزمني على الجانب الأيمن باستخدام محدد: nth-child (odd)
  2. .timeline-item-content div - غلاف آخر (المزيد حول سبب حاجتنا لذلك في قسم التصميم)
  3. .tag span - سيكون لهذه العلامة لون خلفية مخصص حسب الفئة
  4. الوقت / التاريخ والنص
  5. الرابط - سنحتاج إلى التحقق من ذلك لمعرفة ما إذا تم توفير رابط لأننا قد لا نرغب دائمًا في الحصول على رابط
  6. .circle span - سيتم استخدام هذه العلامة لوضع دائرة على الخط / الشريط الأوسط

ملاحظة: سيكون كل شيء أكثر منطقية عندما نصل إلى قسم CSS / styling ، لكن قبل ذلك ، لنقم بإنشاء مكون الخط الزمني:

حاوية الجدول الزمني

سيتم تعيين هذا المكون بشكل أساسي عبر الصفيف ولكل كائن سيتم إنشاء مكون TimelineItem. نضيف أيضًا فحصًا صغيرًا للتأكد من وجود عنصر واحد على الأقل في المصفوفة:

استيراد timelineData من '_path_to_file_' ؛
const الجدول الزمني = () =>
    timelineData.length> 0 && (
        
            {timelineData.map ((data، idx) => (                              ))}              )؛

كما ذكر أعلاه ، فإن المخطط الزمني هو مجموعة من الكائنات التي تحتوي على جميع المعلومات المطلوبة. في حالتي ، قمت بتخزين هذه المجموعة في ملف وقمت باستيرادها هنا ، لكن يمكنك أخذها من قاعدة بياناتك الخاصة أو من نقطة نهاية API ، الأمر متروك لك.

المغلق

ملاحظة: ستكون معظم الأغلفة عبارة عن حاويات فليكس بوكس ​​لأننا يمكن أن نلعب بشكل أسهل مع وضعهم.

لنبدأ مع CSS. حاوية الجدول الزمني:

الحاويات الزمنية
    عرض: المرن.
    فليكس الاتجاه: العمود.
    الموقف: نسبي
    الهامش: 40px 0 ؛
}
.الجدول الزمني الحاوية :: بعد {
    لون الخلفية: # e17b77؛
    يحتوي: ''؛
    الموقف: مطلق ؛
    اليسار: calc (50 ٪ - 2px) ؛
    العرض: 4 بكسل ؛
    الارتفاع: 100 ٪ ؛
}

نحن نستخدم :: after selector لإنشاء هذا الخط / الشريط الأحمر في منتصف الحاوية. باستخدام وظيفة calc () يمكننا وضع الخط في المنتصف تمامًا بطرح نصف حجمه (2 بكسل) من 50٪. نحتاج إلى القيام بذلك لأنه افتراضيًا ، تقوم الخاصية اليسرى بوضعها وفقًا للحافة اليسرى لعنصر وليس الوسط.

الآن ، دعنا ننتقل إلى المجمع.

يمكنك أن ترى أدناه مثالاً عن كيفية وضعها داخل الوالدين (حاوية الجدول الزمني). لأغراض العرض التوضيحي أضفت حدًا لتسليط الضوء على هذه الأغلفة:

كما ترون ، يذهب كل غلاف آخر إلى اليمين ، ويشغل المجمع الداخلي (محتوى البند في الجدول الزمني) مساحة أقل - المساحة المعطاة بواسطة العلامة p الموجودة بداخله (في الغالب).

دعونا نرى CSS لهذا:

البند الزمني
    عرض: المرن.
    تبرير المحتوى: نهاية المرن ؛
    الحشوة اليمنى: 30 بكسل ؛
    الموقف: نسبي
    الهامش: 10px 0 ؛
    العرض: 50 ٪ ؛
}
. الجدول الزمني - البند: nth-child (odd) {
    محاذاة الذات: نهاية المرن.
    تبرير المحتوى: بداية مرنة ؛
    الحشوة إلى اليسار: 30 بكسل ؛
    الحشوة اليمنى: 0؛
}

المفتاح لهذا هو أننا نستخدم محدد: nth-child (odd) ونقوم بتعيين خاصية المحاذاة الذاتية على الطرف المرن مما يعني: "اذهب إلى اليمين بقدر ما تستطيع"!

نظرًا لأن هذه الأغلفة يبلغ عرضها 50٪ ، يمكنك أن ترى أن اثنتين منها تأخذان العرض بالكامل. من الآن فصاعدًا ، في كل مرة نريد فيها تصميم شيء مختلف في الجانب الأيمن ، يجب علينا استخدام هذا الأسلوب.

بعد ذلك ، المجمع .timeline-item-content:

.timeline-item-content {
    box-shadow: 0 0 5px rgba (0، 0، 0، 0.3)؛
    دائرة نصف قطرها الحدود: 5px ؛
    لون الخلفية: #fff؛
    عرض: المرن.
    فليكس الاتجاه: العمود.
    محاذاة البنود: نهاية المرن.
    الحشو: 15px.
    الموقف: نسبي
    العرض: 400 بكسل ؛
    أقصى عرض: 70 ٪ ؛
    محاذاة النص: اليمين ؛
}
.timeline-item-content :: after {
    يحتوي: ' '؛
    لون الخلفية: #fff؛
    box-shadow: 1px -1px 1px rgba (0، 0، 0، 0.2)؛
    الموقف: مطلق ؛
    اليمين: -5.5 بكسل ؛
    أعلى: calc (50 ٪ - 7.5px) ؛
    تحويل: تدوير (45deg) ؛
    العرض: 15 بكسل ؛
    الارتفاع: 15 بكسل ؛
}
.timeline-item: nth-child (odd) .timeline-item-content {
    محاذاة النص: اليسار ؛
    محاذاة البنود: بداية المرن.
}
.timeline-item: nth-child (odd) .timeline-item-content :: after {
    الحق: السيارات ؛
    اليسار: -5.5 بكسل ؛
    box-shadow: -1px 1px 1px rgba (0، 0، 0، 0.2)؛
}

لدينا بعض الأشياء التي تحدث:

  1. يحتوي هذا الغلاف على عرض ثابت وأيضًا عرض أقصى. هذا لأننا نريد أن يكون لها بعض الحدود ، وهذا يعني أنه إذا كانت هناك بضع كلمات فقط ، فنحن نريد أن يكون المربع على الأقل 400 بكسل ، ولكن إذا كان هناك نص كثير ، فلا ينبغي أن يشغل المساحة الكاملة (الـ 50٪ من غلاف البند.) ، ولكن يجب أن ينتقل النص إلى السطر التالي -> هذا هو السبب في أننا استخدمنا هذا المجمع الثاني: .timeline-item-content
  2. تُستخدم خصائص محاذاة النص ومحاذاة العناصر لدفع العناصر الداخلية إلى اليسار أو اليمين ، اعتمادًا على الأصل
  3. يتم إعطاء السهم الصغير الذي يشير إلى الخط الأوسط بواسطة الأنماط المطبقة على :: after selector. أساسا ، هو مربع مع مربع الظل تطبيقها على أن تدور 45deg
  4. كما ذكرنا أعلاه ، قمنا بتصميم الجانب الأيمن عن طريق اختيار الوالد باستخدام محدد: nth-child (odd)

يصل المقبل ، جميع العناصر الداخلية:

.timeline-item-content .tag {
    اللون: # ff؛
    حجم الخط: 12 بكسل ؛
    وزن الخط: غامق ؛
    أعلى: 5px ؛
    اليسار: 5 بكسل ؛
    تباعد الحروف: 1 بكسل ؛
    الحشو: 5px.
    الموقف: مطلق ؛
    تحويل النص: أحرف كبيرة ؛
}
.timeline-item: nth-child (odd) .timeline-item-content .tag {
    اليسار: السيارات ؛
    اليمين: 5 بكسل ؛
}
وقت محتوى البند الزمني
    اللون: # 777 ؛
    حجم الخط: 12 بكسل ؛
    وزن الخط: غامق ؛
}
.timeline-item-content p {
    حجم الخط: 16 بكسل ؛
    ارتفاع الخط: 24px ؛
    الهامش: 15px 0 ؛
    أقصى عرض: 250 بكسل ؛
}
.timeline-item-content a {
    حجم الخط: 14 بكسل ؛
    وزن الخط: غامق ؛
}
.timeline-item-content a :: after {
    المحتوى: '►' ؛
    حجم الخط: 12 بكسل ؛
}
.timeline-item-content .circle {
    لون الخلفية: #fff؛
    الحدود: 3px صلب # e17b77 ؛
    نصف قطر الحدود: 50 ٪ ؛
    الموقف: مطلق ؛
    أعلى: calc (50 ٪ - 10px) ؛
    اليمين: -40 بكسل ؛
    العرض: 20 بكسل ؛
    الارتفاع: 20 بكسل ؛
    مؤشر z: 100 ؛
}
.timeline-item: nth-child (odd) .timeline-item-content .circle {
    الحق: السيارات ؛
    اليسار: -40 بكسل ؛
}

بعض الأشياء التي يجب ملاحظتها هنا:

  1. كما قد تكون خمنت ، تم وضع .tag بشكل مطلق لأننا نريد الاحتفاظ بها في الزاوية العلوية اليسرى (أو اليمنى) بغض النظر عن حجم المربع
  2. نريد إضافة علامة إقحام صغيرة بعد العلامة لإبراز أنها رابط
  3. نقوم بإنشاء دائرة. ونضعها أعلى الخط / الشريط الأوسط مباشرة أمام السهم

نحن على وشك الانتهاء! only الشيء الوحيد المتبقي هو إضافة CSS لجعل كل شيء مستجيبًا لجميع أحجام الشاشة:

Media فقط الشاشة و (الحد الأقصى للعرض: 1023 بكسل) {
    .timeline-item-content {
        أقصى عرض: 100 ٪ ؛
    }
}
Media فقط الشاشة و (الحد الأقصى للعرض: 767 بكسل) {
    .timeline البند المحتوى،
    .timeline-item: nth-child (odd) .timeline-item-content {
        الحشو: 15px 10px ؛
        محاذاة النص: المركز ؛
        محاذاة البنود: مركز.
    }
    .timeline-item-content .tag {
        العرض: calc (100 ٪ - 10px) ؛
        محاذاة النص: المركز ؛
    }
    وقت محتوى البند الزمني
        أعلى هامش: 20 بكسل ؛
    }
    .timeline-item-content a {
        زخرفة النص: تسطير
    }
    .timeline-item-content a :: after {
        عرض لا شيء؛
    }
}

لدينا استفساران إعلاميان:

في أحجام شاشة الكمبيوتر المحمول الصغيرة - الحد الأقصى للعرض: 1023 بكسل - نود السماح لمحتوى بند الجدول الزمني بالمرور عبر العرض الأصلي للوالد بالكامل لأن الشاشة أصغر حجمًا ، وإلا ستبدو مضغوطة

  1. على الهواتف - أقصى عرض: 767 بكسل
  • اضبط .tag على أن يكون العرض كاملاً (ولهذا لا ننسى أن نطرح 10pxfrom من المجموع 100 ٪ - وهذا لأننا وضعناه على اليسار: 5px ، لذلك نحن نزيل ضعف هذا المبلغ)
  • توسيط النص بالكامل ودفعه لأسفل من الأعلى قليلاً
  • إزالة علامة الإقحام الموجودة على الرابط وإضافة تسطير - يبدو أفضل على الهاتف المحمول

Aaaand ... لقد انتهينا!

خاتمة

كما ذكرت ، هذا المكون موجود في صفحة الجدول الزمني الخاصة بي. التحقق من ذلك لرؤيتها في العمل!

إذا كان هناك شيء لم تفهمه من هذه المقالة ، فتأكد من الاتصال بي وسيسعدني الإجابة على أسئلتك!

ترميز سعيد!

نشرت أصلا على www.florin-pop.com.