هذا موضوع ملاحظات لتجربة تغييرات تنسيق التفاصيل.
مثال على وسم details باستخدام BBCode:
abc
اختبار 123 123
123
مثال على وسم details باستخدام HTML:
11 إعجابًا
يبدو أن استخدام عنصر HTML \u003cdetails\u003e يؤدي إلى دمج المحتوى في الملخص:
\u003cdetails open\u003e
\u003csummary\u003e
هذا تفاصيل مفتوحة
\u003c/summary\u003e
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
\u003c/details\u003e
\u003cdetails\u003e
\u003csummary\u003e
هذا تفاصيل HTML
\u003c/summary\u003e
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
\u003c/details\u003e
أوه، فهمت. لم يتم الحصول على سطر جديد تلقائي ولم أضف واحدًا يدويًا:
\u003cdetails open\u003e
\u003csummary\u003e
هذا تفاصيل مفتوحة
\u003c/summary\u003e
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
\u003c/details\u003e
ملخص
سيتم إخفاء هذا النص
5 إعجابات
نعم، أنت على حق. يبدو أنه عند إضافة هذا بنفسك، لم تقم بتضمين علامات p، بينما عند إضافته باستخدام أداة إدراج التفاصيل، فإنه يفعل ذلك.
الخاص بك:
<details dir="ltr" open="">
<summary>
This is a HTML details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>
أدوات الإدراج:
<details dir="ltr" open="">
<summary>Summary</summary>
<p>This text will be hidden</p>
</details>
علامة p المضافة بواسطة أداة الإدراج تبقي النص في سطر جديد.
إعجاب واحد (1)
آه. لست بحاجة إلى إضافة علامات \u003cp\u003e في النمط الحالي. أفترض أن هذا النمط الجديد أكثر \u003cp\u003e لزجًا. 
إعجابَين (2)
بعض الملاحظات الأولية:
- لقد تجاهلت عنصر
[details]الجديد عندما واجهته لأول مرة. لم ألاحظ أنه[details]. قد يكون “فقط لأنه جديد”، ولكن… - إنه منفصل عن التصميم السابق وتنفيذ المتصفح الافتراضي - السهم يأتي بعد الملخص بدلاً من قبله، والحالة المغلقة تشير إلى الاتجاه الذي كان يعني سابقًا (وبشكل افتراضي) الحالة المفتوحة.
مغلق:
مفتوح:
- يأخذ عنصر الزر/الملخص مساحة أكبر بكثير (سابقًا كان عنصرًا شبه مضمن)
مقابل - كما هو موضح أعلاه، سابقًا كان المثلث/السهم محاذيًا للنص والآن نص “الملخص” ليس كذلك، بسبب الحشو الخاص بالزر (لا شيء محاذٍ لأي شيء
)
- على الهاتف المحمول، بعد التفاعل معه، تظل خلفية الزر مميزة
- كنت سأصوت لصالح الخيار الحدودي بدلاً من الخلفية - أفضل أن يخفي المحتوى بعض المحتوى فقط، دون التأثير على التباين (وهو أمر مهم في الغالب في حالة الصور المضمنة والرموز التعبيرية)
تحديث:
- مساحة قابلة للنقر مخفضة:
مقابل
7 إعجابات
كان هذا هو الهدف إلى حد ما، فجعل الأمر أفضل يعني بعض الاختلاف عن الطريقة التي كان عليها، خاصة الاختلاف عن افتراضي المتصفح. نحن الآن نتبع نمط زر “الردود” الموجود أسفل المشاركات ذات الردود المتعددة.
ملاحظة رائعة!
أخرى رائعة، سألقي نظرة على هذا 
لست متأكدًا من أن استخدام رمز تعبيري أسود/داكن على خلفية داكنة/سوداء هو شيء يمكننا حله هنا…
هذا مربك بعض الشيء أيضًا، هل كنت تنقر في مكان آخر غير النص من قبل؟ هل كان من الشائع أن تنقر هنا؟
3 إعجابات
نعم. لقد استخدمت هذا كثيرًا، خاصة على الهاتف المحمول. 
المنطقة الأصغر أصعب في الإصابة. أعتقد أن هذا هو المكان الذي يكون فيه إبهامي على الشاشة.
5 إعجابات
نعم! هذا أحد توقعات الإعدادات الافتراضية للمنصة: \u003cdetails\u003e، مثل مربعات الاختيار/الراديو و \u003clabel\u003es الخاصة بها، تبدو وتتصرف بطريقة معينة. على سبيل المثال، أفعل الشيء نفسه على GH:
1 Reply
لا أعرف ما إذا كان جعله مشابهًا للشيء الآخر أمرًا جيدًا في الواقع 
إعجاب واحد (1)
مرحباً! أرجو المعذرة إذا لم يكن سؤالي صحيحًا تمامًا 
هل سيكون من الممكن إضافة وظيفة لإظهار المحتوى المخفي بناءً على مجموعة المستخدمين. على سبيل المثال، إذا لم يكن المستخدم مسجلاً أو لم يكن عضوًا في هذه المجموعة أو تلك، فلن يتمكن من عرض التفاصيل وسيتم عرض نافذة منبثقة له، حيث ستكون هناك تعليمات للحصول على الوصول (على سبيل المثال، التسجيل)؟
أعلم بوجود مكونات/إضافات للقالب تخفي الموضوع بأكمله أو الفئة. ببساطة، في بعض الأحيان تريد أن تمنح المستخدمين الفرصة لقراءة المعلومات الأولية فقط.
إعجاب واحد (1)
هذا ليس شيئاً تم استخدامه بهذه الطريقة، حيث عادةً ما يتم تقييد فئة لمجموعات أو مستخدمين معينين، وليس التفاصيل داخل منشور في تلك الفئة.
ومع ذلك، أنا متأكد من أنه يمكن القيام بذلك في إضافة (plugin)، ولكن هذا الموضوع لن يكون مثالياً لتلك المناقشة.
إعجاب واحد (1)
مجرد ملاحظة بسيطة، لكن هذا يبدو مختلفًا قليلاً عن لون خلفية الاقتباس، هذا هو النوع من “القريب ولكن ليس تمامًا” الذي يمكن أن يبدو وكأنه خطأ. أعتقد أنه يجب أن يتطابق، أو أن يكون مختلفًا بشكل واضح.
أفكار أخرى…
هذا اقتباس يدوي
هذا اقتباس جزئي، يمكن توسيعه
ربما نستخدم هذا النمط قليلاً؟ نفس الحشو والخلفية والتوسيع… سيتعين علينا على الأقل إسقاط الحد لجعله يبدو أقل شبهاً بالاقتباس
ربما نمط مختلف تمامًا؟
7 إعجابات
4 إعجابات
مرحباً 
أنا فقط أفكر بصوت عالٍ… هل العنوان ضروري للعرض افتراضيًا؟ أعني أنه في معظم الأوقات يستخدم Summary الافتراضي ومن المحتمل أن معظم المستخدمين لا يعرفون أنه يمكن أن يكون فريدًا وربما سيكون أكثر طبيعية إذا تم اقتطاع النص داخل details بنقاط (…) وسيظهر في النهاية ...إظهار المزيد إذا كان مطويًا و إظهار أقل إذا تم توسيعه. على سبيل المثال، سيكون السطر الأول المقتطع من المحتوى هو العنوان تلقائيًا. يمكن أن يكون هذا عرضًا افتراضيًا ولكن يمكن للمستخدمين إضافة عنوان بشكل منفصل إذا أرادوا؟
4 إعجابات
للموضوعية: التنفيذ هو أن النقر على تسمية يجب أن يحدد زر الراديو الخاص بها، وليس بالضرورة أن النقر على الصف الفارغ بأكمله خلف التسمية يعمل أيضًا.
إعجابَين (2)
- الـ Chevron ليس محاذيًا للنص (إنه موضوع عالياً قليلاً)
مقابل
(وهل هو نفس أيقونة الـ chevron؟
) - قائمة الـ composer تستخدم مثلثًا للإشارة إلى ميزة التفاصيل
- إضافة إلى 2.
وضع الأيقونة بعد النص يجعل من الصعب التعرف عليها، خاصة عند مجرد مسح منشور بسرعة
- إضافة إلى 2.
فيما يتعلق بالاتجاه الذي تشير إليه الأيقونة: نظرًا لأنها تعمل كمفتاح تبديل، ألن يكون من المنطقي عكسها بحيث تشير إلى الحالة الحالية بدلاً من الحالة الفعل/المستقبلية (ينطبق هذا أيضًا على زر “Replies”) - ليس لديها حالة تركيز عند الانتقال إليها باستخدام tab
- حالة الـ hover مرئية فقط عند الإغلاق
5 إعجابات
ربما … @awesomerobot ما رأيك؟
خطأ بسيط – عند فتح تفصيل، تقوم بالتمرير للأعلى حتى تقوم بتحميل المزيد من المشاركات (وقليلًا أكثر)؛ بمجرد العودة، لا يتم عرض محتوى التفصيل (تعديل: أو إغلاقه، ولكنني لا أتوقع إغلاقه هنا)
3 إعجابات
نعم، التعامل معها كزر يمكن أن ينجح… تقريبًا مثل وسم HTML details الحالي، (بالإضافة إلى سهم)
<details class='elided'>
<summary title='Show trimmed content'>Expand me</summary>
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
Here is some trimmed content...
</summary>
</details>
أيضًا…
ماذا لو استخدمت فقرة كمحتوى ملخص؟ يمكن أن يكون هذا بأي طول ويمكن أن تكون فواصل الأسطر غريبة. هل يجب أن يكون هذا محدودًا؟ هل هناك حالة استخدام لنص ملخص طويل جدًا جدًا؟ السهم التالي:
here are the deets
3 إعجابات