تعرف على <تفاصيل>

أريد أن أتحدث عن عنصر <details> الرائع وأعرض بعض الأمثلة على استخدامه ، من البسيط إلى الجنون.

أنت على دراية بنموذج تخطيط مكون يمكنه تغيير حالته من مرئي إلى مخفي:

 .component { display:none; } .component.open { display:block; } 

 toggleButton.onclick = () => component.classList.toggle('open') 

الآن ننسى ذلك. هناك عنصر يمكنه القيام بذلك خارج الصندوق. يجتمع - <details>

يتم استخدام عنصر HTML <details> للكشف عن معلومات مخفية (إضافية).

التطبيق الأساسي

بادئ ذي بدء ، دعونا نرى كيف يعمل هذا العنصر:

يرجى ملاحظة أن المثال يعمل دون أي أنماط إضافية أو جافا سكريبت. بنيت كل الوظائف في المتصفح نفسه.

بشكل افتراضي ، يعتمد النص المرئي على إعدادات اللغة في نظامك ، ولكن يمكنك تغييره عن طريق إضافة عنصر <summary> إلى <details> <summary> :

لتغيير حالة عنصر في html ، تحتاج فقط إلى إضافة السمة open

 <!--  -  --> <details open> ... </details> <!--  -  --> <details> ... </details> 

ولإدارة الحالة باستخدام JavaScript ، يتم توفير واجهة برمجة تطبيقات خاصة:

 const details = document.querySelector('details') details.open = true //   details.open = false //   

بضع كلمات حول إمكانية الوصول

العنصر <summary> قابل <summary> . وهذا يعني أن الانتقال إلى الصفحة من لوحة المفاتيح سيصل إلى هذا العنصر. لكن المحتوى يمكن أن يكون موضع التركيز فقط إذا كان <details> مفتوحًا ، أي أن التركيز لن يقع أبدًا على العناصر غير المرئية داخل <details> .

عادةً ، يمكن لقارئات الشاشة أداءً جيدًا باستخدام معيار <details> و <summary> . هناك بعض الأشكال في الإعلان حسب البرنامج والمستعرض. مزيد من التفاصيل .

أمثلة الاستخدام

بعد ذلك ، سأكرر بعض المكونات تقريبًا من وثائق bootstrap ، ولكن مع جافا سكريبت قليل أو بدون.

تغيير العلامة

أول شيء قد تحتاجه هو تغيير مظهر العلامة. يتم ذلك ببساطة شديدة:

 summary::-webkit-details-marker { /*   */ } 

أو يمكنك إخفاء العلامة القياسية وتنفيذ العلامة الخاصة بك

 /*    Chrome */ details summary::-webkit-details-marker { display: none } /*    Firefox */ details > summary { list-style: none; } /*       */ details summary:before { content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; } /*       */ details[open] summary:before { content: '\f146'; } 

عنصر الانهيار

كل شيء بسيط هنا. الوظيفة الأساسية هي نفسها. من الضروري فقط تغيير المظهر قليلاً:

عنصر الأكورديون

دعنا نكرر المثال السابق ، ونغير قليلاً من <summary> ونحصل على الأكورديون:

ولكن ، كما ترون ، لا يغلق أحد العناصر عند فتح عنصر آخر. لتحقيق ذلك ، نحتاج إلى سطرين من JavaScript. تحتاج إلى تتبع مظهر السمة المفتوحة على أحد عناصر <details> وحذفها من البقية:

عنصر Popover

يشبه هذا التطبيق تطبيق Collapse Component ، مع وجود اختلاف في أن محتوى <details> يحتوي على موضع مطلق ويتداخل مع المحتوى.

عنصر القائمة المنسدلة

في الأساس ، هذا هو نفس مكون Popover. يختلف المظهر فقط.

نفس المثال ، فقط مع زر منفصل

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

 //      document.body.onclick = () => { //    <details> document.body.querySelectorAll('details.dropdown[open]') //      .forEach(e => e.open = false) } 

مكون مشروط

وأخيرا ، مثال على نافذة مشروط.

بشكل عام ، <details> ليس <details> الخيار الأفضل لتنفيذ هذا المكون. هناك عنصر أكثر ملاءمة بكثير - <dialog> ، لكنه يحتوي على دعم ضعيف جدًا للمتصفح.

مراجع

هل يمكنني استخدام تفاصيل وعناصر الملخص
عنصر تفاصيل MDN
عنصر تفاصيل W3C

UPD.
قررت إضافة مثال آخر لاستخدام <details> - التنقل متعدد المستويات. مرة أخرى ، أود أن ألفت انتباهكم إلى حقيقة أن المثال يعمل دون أي جافا سكريبت. وهو أكثر شمولاً بكثير من التخطيط التقليدي على <div> .