نظرة مختلفة لكتلة التفاصيل

مطور
1

حاولت تحقيق مظهر مشابه لما تستخدمه شركة إعلامية فنلندية.

الصورة توضح ما يكفي، أعتقد:

IMG_3465
IMG_34651306×887 166 KB

لدي مهارة أساسية فقط في التعامل مع CSS، ولست متأكدًا مما إذا كان يمكن القيام بذلك (بسهولة) بواسطة CSS. لكن محاولتي الأولى لم تكن… حسناً، ليست جيدة جدًا.

هذا ما استخدمته (التعليقات لي، بالطبع)

/*- نمط مخصص لعنصر details - */
/* استبدال صورة الخلفية للعنصر وتصميمه */
summary {
  background-color: #f5f5f5; /* لون الخلفية */
  border: 1px solid #d8d8d8; /* خط الحدود */
  padding: 10px; /* المسافة البادئة */
  border-radius: 5px; /* الزوايا المستديرة */
  cursor: pointer; /* نمط المؤشر */
  display: flex; /* استخدام Flexbox */
  justify-content: space-between; /* المحاذاة */
  align-items: center; /* المحاذاة في المنتصف */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* إزالة علامة القائمة الافتراضية */
}
summary::after {
  content: '⮟'; /* إضافة سهم */
  font-size: 20px; /* حجم السهم */
}

/*- نمط مخصص لمحتوى عنصر details - */
details[open] summary::after {
  content: '⮝'; /* تغيير السهم إلى الأعلى عند الفتح */
}
details {
  margin-bottom: 10px; /* مسافة فاصلة بين العناصر */
}
details > div {
  padding: 10px; /* المسافة البادئة للمحتوى */
}

بعضها صنعته بنفسي وبعضها اقتراحات من GPT.

أفكار؟

إعجابَين (2)
2

أهلاً @Jagster :wave:

لقد قمت بإنشاء مكون سمة لهذا… :tada:

9 إعجابات
3

أنت رائع :+1: والآن سأتعمق في ما فعلته.\n\nشكراً!

3 إعجابات
4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

6

أولاً، لقد قمت بعمل شيء واحد “مرحباً بالعالم” باستخدام Visual Basic قبل حوالي 20 عامًا. وقمت بضبط بعض إضافات WordPress باستخدام طريقة التجربة والخطأ، وذات مرة تمكنت من تغيير كل الملكيات في خادم VPS الخاص بي، بدءًا من الجذر.

هذا الحل الرائع لا يتبع [details .. open] بعد الآن. متصل بهذا Details block doesn’t obey open أعتقد.

هل المشكلة قادمة من هذا الجزء:


cookedDetails.forEach((details) => {
            details.setAttribute("open", "");

لماذا؟ لأنه مشابه لهذا من Discourse :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>
إعجاب واحد (1)