يستخدم التطبيق المصغّر القابل للتوسيع العنصر المخصّص <devsite-expandable>
للسماح
للمستخدمين بإخفاء أجزاء من المحتوى أو إظهارها في قسم قابل للتوسيع. في ملف Markdown
، احط العنصر المخصّص بعنصر HTML عادي، مثل
<section>
أو <div>
.
إيقاف/تفعيل القسم
يتضمن المثال التالي عنصرًا مخصصًا <devsite-expandable>
من العناصر التي
القيمة التلقائية على موضع مخفي. يحتوي العنوان على سمة class
باسم
showalways
.
يظهر هذا العنوان دائمًا
تكون هذه الفقرة مخفية تلقائيًا.
This code block within the custom element also defaults to a hidden position.
عنصر تحكّم مخصّص
يضيف المثال التالي الفئة expand-control
إلى العنصر button
في
العنصر المخصّص <devsite-expandable>
لتوسيع القسم وتصغيره
بدون مفتاح تبديل.
تتوفّر العديد من الخيارات.
توسيع مرة واحدة
يضيف المثال التالي الفئة expand-control once
إلى رابط داخل السمة.
عنصر مخصص <devsite-expandable>
يعرض محتوى إضافيًا عند النقر عليه
ثم تختفي من الصفحة.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
المزيد...Duis aute irure dolor in reprehenderit في voluptate velit esse cillum dolore eu fugiat nulla pariatur. استثناء sint occaecat cupidatat غير Proident، Sunt in culpa qui officia deserunt mollit anim id est laborum.
توسيع تلقائي عند الربط
يضيف المثال التالي معرّف #sample1 إلى العنصر المخصّص
<devsite-expandable>
الذي يوسّع القسم تلقائيًا عند تحميل الصفحة
عند الربط به.
كيفية التوسيع التلقائي عند الربط
أغلِق هذا القسم القابل للتوسيع، وانقر على الرابط #sample1 أعلاه، ثم أعِد تحميل الصفحة لتوسيع هذا القسم القابل للتوسيع تلقائيًا.
Code block within the 'Auto-expand on linking' demo.
الفتح تلقائيًا
يضيف المثال التالي السمة expanded
إلى
عنصر <devsite-expandable>
مخصص لجعل الإعلان القابل للتوسيع مفتوحًا بشكل تلقائي.
موسّعة تلقائيًا
تكون الفتحة بشكل افتراضي رائعة عندما يكون لديك الكثير من الوحدات القابلة للتوسيع، مثل وملاحظات الإصدار، ولكنك تريد إبقاء أحدثها مفتوحة.