{{template"list-bar-search"dict"Action""/comments""Query""مزعج""Placeholder""ابحث في التعليقات""Hidden" (list (list"page""4"))
"ClearHref""/comments"}}
ليس في Hidden ما يدلّ على أيّ زوج هو الصفحة، فالسلوك الافتراضي ينقل page=4 إلى مجموعة نتائج لم تعد فيها أربع صفحات. وClearHref هو ما يعيد التطبيق به الضبط.
صف واحد من القائمة: اسم السجل رابطًا رئيسيًا، وسطر معلومات، وإجراء ثانوي.
علامة في المقدّمة وحالة وإجراء واحد
ضع هذا داخل <div rst-list>.
<divrst-row>
<spanrst-row-leaddata-lead="accent"aria-hidden="true">RN</span>
<spanrst-row-main><ahref="/posts/1">ملاحظات الإصدار، أغسطس</a>
<smallrst-row-sub>نُشر في 2 أغسطس · قراءة 4 دقائق</small>
</span>
<spanrst-statusrst-tone="positive">منشور</span>
<arst-row-actionhref="/posts/1/edit"aria-label="تعديل ملاحظات الإصدار، أغسطس">تعديل</a>
</div>
ضع هذا داخل <div rst-list>.
{{template"list-row-action"dict"Href""/posts/1""Main""ملاحظات الإصدار، أغسطس""Sub""نُشر في 2 أغسطس · قراءة 4 دقائق""ActionHref""/posts/1/edit""ActionLabel""تعديل""ActionAria""تعديل ملاحظات الإصدار، أغسطس""StatusTone""positive""StatusLabel""منشور""Lead""accent""LeadInitial""RN"}}
{{template"bulk-bar"dict"DoneHref""/posts""Count""تم تحديد 3""EscalateHref""/posts?select=all""EscalateLabel""تحديد كل النتائج المطابقة وعددها 412""Actions" (list
(dict"Label""تصدير""Value""export")
(dict"Label""إلغاء النشر""Value""unpublish")
(dict"Danger"true"Label""حذف…""Value""delete"))
"MenuLabel""الإجراءات"}}
العنصر المُتلِف يأتي أخيرًا: فالمدخل الأول هو ما يشغّله النموذج المحيط ضمنيًّا عند ضغط Enter.
media-grid
شبكة من بلاطات الصور. كل إطار بنسبة 4:3، فتستقر لقطات الشاشة الطويلة واللافتات العريضة في شبكة واحدة منتظمة.
ضع الشبكة وشريط bulk-bar في نموذج واحد. يرسل كل مربع اختيار قيمة Select الخاصة ببلاطته تحت الاسم "id"؛ اضبط SelectName لتغييره. داخل النموذج، يجب أن تكون عناصر القائمة روابط.
pagination
شريط من روابط عادية مرقّمة، حتى يظل التنقّل بين الصفحات يعمل مع تعطيل JavaScript.
لا يوجد Label، فيأتي الاسم الوصفي لعنصر nav من الفهرس.
empty-state
بطاقة الحالة الفارغة. حالة فارغة مع مداخل للخطوات الأولى.
مع دعوة إلى إجراء عبر POST
<divrst-empty>
<h2rst-empty-title>لا شيء هنا بعد</h2>
<prst-empty-body>لا توجد منشورات بعد. منشورك الأول بداية جيدة.</p>
<formrst-empty-ctamethod="post"action="/posts/seed">
<inputtype="hidden"name="csrf"value="tok-123">
<buttonrst-btn="primary"type="submit">أضف منشورات نموذجية</button>
</form>
</div>
{{template"empty-state"dict"Body""لا توجد منشورات بعد. منشورك الأول بداية جيدة.""Title""لا شيء هنا بعد""ActionLabel""أضف منشورات نموذجية""PostAction""/posts/seed""Hidden" (list (list"csrf""tok-123"))}}
الجملة وحدها
<divrst-empty>
<prst-empty-body>لا توجد تعليقات على هذا المنشور بعد.</p>
</div>
{{template"empty-state"dict"Body""لا توجد تعليقات على هذا المنشور بعد."}}