الانتقال إلى المحتوى
الأقسام
اللغة، حاليًا العربية
نظام تصميم Rastrillo
اللغة، حاليًا العربية
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

العرض

القطع الصغيرة من المفردات التي تُركَّب منها الشاشة: الحالة، والهوية، والتقدّم، وشكل التنبيه الوحيد.

كل مثال يعمل فعلًا، لكن روابطه لا تؤدي إلى أي مكان. يعرض HTML الترميز الجاهز للنسخ.

status-pill

حالة السجل على هيئة شارة ملوّنة، باللون وبالنص معًا.

معاينة

neutral

<span rst-status rst-tone="neutral">مسودة</span>

positive

<span rst-status rst-tone="positive">منشور</span>

warning

<span rst-status rst-tone="warning">مجدول</span>

negative

<span rst-status rst-tone="negative">فشل</span>

neutral

{{template "status-pill" dict "Label" "مسودة"}}

positive

{{template "status-pill" dict "Label" "منشور" "Tone" "positive"}}

warning

{{template "status-pill" dict "Label" "مجدول" "Tone" "warning"}}

negative

{{template "status-pill" dict "Label" "فشل" "Tone" "negative"}}

neutral قيمة Tone الافتراضية هي neutral، لذا يحذفها هذا الاستدعاء.

badge

شارة محاطة بإطار بحروف كبيرة، للعلامات الصغيرة الثابتة. وهي غير ‎status-pill‎ الذي يعبّر عن حالة السجل.

معاينة

بلا نبرة (القيمة الافتراضية الهادئة)

<span rst-badge>مسودة</span>

neutral

<span rst-badge="neutral">داخلي</span>

positive

<span rst-badge="positive">مباشر</span>

warning

<span rst-badge="warning">تجريبي</span>

negative

<span rst-badge="negative">نفدت الكمية</span>

بلا نبرة (القيمة الافتراضية الهادئة)

{{template "badge" dict "Label" "مسودة"}}

neutral

{{template "badge" dict "Label" "داخلي" "Tone" "neutral"}}

positive

{{template "badge" dict "Label" "مباشر" "Tone" "positive"}}

warning

{{template "badge" dict "Label" "تجريبي" "Tone" "warning"}}

negative

{{template "badge" dict "Label" "نفدت الكمية" "Tone" "negative"}}

meter

شريط سعة مع رقمه.

معاينة

فارغ

<span rst-meter>
  <meter rst-meter-bar value="0" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>0/500</span>
</span>

في منتصف الطريق

<span rst-meter>
  <meter rst-meter-bar value="42" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>210/500</span>
</span>

يكاد يمتلئ

<span rst-meter>
  <meter rst-meter-bar value="82" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>412/500</span>
</span>

ممتلئ

<span rst-meter>
  <meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>500/500</span>
</span>

تجاوز الحدّ

<span rst-meter>
  <meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>700/500</span>
</span>

فارغ

{{template "meter" dict "Percent" 0 "Text" "0/500"}}

في منتصف الطريق

{{template "meter" dict "Percent" 42 "Text" "210/500"}}

يكاد يمتلئ

{{template "meter" dict "Percent" 82 "Text" "412/500"}}

ممتلئ

{{template "meter" dict "Percent" 100 "Text" "500/500"}}

تجاوز الحدّ

{{template "meter" dict "Percent" 140 "Text" "700/500"}}

تجاوز الحدّ يُقيَّد الملء عند 100% داخل الجزء.

stat

رقم واحد على لوحة المعلومات، مع تسميته ومقدار تغيّره.

الرقم الكبير

معاينة

ضع هذا داخل <div rst-stats>.

<div rst-stat="lead">
  <span rst-stat-label>إيرادات هذا الشهر</span>
  <span rst-stat-num>€48,210</span>
  <span rst-stat-delta rst-tone="positive">&#43;12%</span>
  <span rst-stat-note>مقارنة بالشهر الماضي</span>
</div>

ضع هذا داخل <div rst-stats>.

{{template "stat" dict
    "Label" "إيرادات هذا الشهر"
    "Value" "€48,210"
    "Delta" "+12%"
    "Tone" "positive"
    "Note" "مقارنة بالشهر الماضي"
    "Lead" true}}

أضف Lead إلى أحد الأرقام في الصف ليصبح كبيرًا. هو المكوّن نفسه، لكن أكبر.

رقم أصغر

معاينة

ضع هذا داخل <div rst-stats>.

<div rst-stat>
  <span rst-stat-label>فواتير غير مدفوعة</span>
  <span rst-stat-num>٢٤</span>
</div>

ضع هذا داخل <div rst-stats>.

{{template "stat" dict "Label" "فواتير غير مدفوعة" "Value" "24"}}

تحتاج فقط إلى تسمية ورقم. وكل ما عدا ذلك اختياري.

حين يكون الانخفاض جيدًا

معاينة

ضع هذا داخل <div rst-stats>.

<div rst-stat>
  <span rst-stat-label>الوقت حتى أول رد</span>
  <span rst-stat-num>1 س 12 د</span>
  <span rst-stat-delta rst-tone="positive">−38%</span>
  <span rst-stat-note>مقارنة بالأسبوع الماضي</span>
</div>

ضع هذا داخل <div rst-stats>.

{{template "stat" dict
    "Label" "الوقت حتى أول رد"
    "Value" "1 س 12 د"
    "Delta" "−38%"
    "Tone" "positive"
    "Note" "مقارنة بالأسبوع الماضي"}}

أنت من يحدد اللون، لا المكوّن. هنا انخفض الرقم وهذا خبر جيد، لذا يظهر التغيّر بالأخضر.

حين يكون الارتفاع سيئًا

معاينة

ضع هذا داخل <div rst-stats>.

<div rst-stat>
  <span rst-stat-label>مدفوعات فاشلة</span>
  <span rst-stat-num>٩</span>
  <span rst-stat-delta rst-tone="negative">&#43;3</span>
  <span rst-stat-note>مقارنة بالأسبوع الماضي</span>
</div>

ضع هذا داخل <div rst-stats>.

{{template "stat" dict
    "Label" "مدفوعات فاشلة"
    "Value" "9"
    "Delta" "+3"
    "Tone" "negative"
    "Note" "مقارنة بالأسبوع الماضي"}}

هنا ارتفع الرقم وهذا خبر سيئ، لذا يظهر التغيّر بالأحمر.

حين لا يمكنك الجزم

معاينة

ضع هذا داخل <div rst-stats>.

<div rst-stat>
  <span rst-stat-label>متوسط مدة الجلسة</span>
  <span rst-stat-num>4 د 12 ث</span>
  <span rst-stat-delta rst-tone="neutral">&#43;18 ث</span>
  <span rst-stat-note>منذ يوم الجمعة</span>
</div>

ضع هذا داخل <div rst-stats>.

{{template "stat" dict
    "Label" "متوسط مدة الجلسة"
    "Value" "4 د 12 ث"
    "Delta" "+18 ث"
    "Note" "منذ يوم الجمعة"}}

اترك اللون دون تحديد فيظهر التغيّر رماديًا. افعل ذلك حين لا تستطيع الجزم أهو جيد أم سيئ.

رقم مختصر

معاينة

ضع هذا داخل <div rst-stats>.

<div rst-stat>
  <span rst-stat-label>الرسائل المرسلة</span>
  <span rst-stat-num><data value="4120">4.1k</data></span>
</div>

ضع هذا داخل <div rst-stats>.

{{template "stat" dict "Label" "الرسائل المرسلة" "Value" "4.1k" "Exact" "4120"}}

أتعرض 4.1k بدل 4120؟ ضع الرقم الكامل في Exact. قارئات الشاشة لا تقرأ إلا ما هو ظاهر، فاحتفظ بكل ما يحتاجه القارئ في الرقم نفسه.

person

صورة بالأحرف الأولى واسم وبريد. تساعد على تمييز سجلات الأشخاص بسرعة.

الاسم والبريد

معاينة 
<a rst-person href="/people/1">
  <span rst-person-av aria-hidden="true">G</span>
  <span rst-person-meta>
    <span rst-person-name>Grace Hopper</span>
    <span rst-person-email>grace@example.com</span>
  </span>
</a>
{{template "person" dict
    "Href" "/people/1"
    "Name" "Grace Hopper"
    "Email" "grace@example.com"
    "Initial" "G"}}

كبير، وهو مقاس ترويسة شاشة العرض

معاينة 
<a rst-person="lg" href="/people/2">
  <span rst-person-av aria-hidden="true">A</span>
  <span rst-person-meta>
    <span rst-person-name>Ada Lovelace</span>
    <span rst-person-email>ada@example.com</span>
  </span>
</a>
{{template "person" dict
    "Href" "/people/2"
    "Name" "Ada Lovelace"
    "Email" "ada@example.com"
    "Initial" "A"
    "Large" true}}

بلا حرف أول

معاينة 
<a rst-person href="/people/3">
  <span rst-person-av="empty" aria-hidden="true"></span>
  <span rst-person-meta>
    <span rst-person-name>دعوة لم تُقبل</span>
    <span rst-person-email>invited@example.com</span>
  </span>
</a>
{{template "person" dict
    "Href" "/people/3"
    "Name" "دعوة لم تُقبل"
    "Email" "invited@example.com"}}

actor

من فعل شيئًا، بالكلمات: اسم شخص، أو الوكيل والشخص الذي تصرّف نيابةً عنه. بلا شارة ولا أيقونة.

وكيل يتصرّف نيابةً عن شخص

معاينة 
<span rst-actor>Claude نيابةً عن Grace Hopper</span>
{{template "actor" dict "Actor" .Actor}}

اضبط ui.ActorName مرة واحدة عند الإقلاع لتحويل الموضوع إلى اسم. التطبيق نفسه، أي Actor الصفري، لا يعرض شيئًا.

شخص

معاينة 
<span rst-actor>Grace Hopper</span>
{{template "actor" dict "Actor" .Actor}}

callout

مفردات التنبيه الوحيدة: شريط ملوّن، وأيقونة نغمة، وعنوان عريض اختياري، وفقرة متن واحدة.

info

معاينة 
<div rst-callout rst-tone="info">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  </span>
  <div rst-callout-body>
    <p>المنشورات مرئية للأعضاء فقط حتى يُنشر الموقع.</p>
  </div>
</div>
{{template "callout" dict
    "Body" "المنشورات مرئية للأعضاء فقط حتى يُنشر الموقع."
    "Tone" "info"}}

positive

معاينة 
<div rst-callout rst-tone="positive">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
  </span>
  <div rst-callout-body>
    <strong>تم ربط المدفوعات</strong>
    <p>يمكنك الآن تلقي مدفوعات التذاكر.</p>
  </div>
</div>
{{template "callout" dict
    "Body" "يمكنك الآن تلقي مدفوعات التذاكر."
    "Title" "تم ربط المدفوعات"
    "Tone" "positive"}}

warning

معاينة 
<div rst-callout rst-tone="warning">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
  </span>
  <div rst-callout-body>
    <strong>اربط المدفوعات لتبدأ البيع</strong>
    <p>فعاليتك منشورة لكنها لا تستطيع تلقي المدفوعات بعد.</p>
  </div>
</div>
{{template "callout" dict
    "Body" "فعاليتك منشورة لكنها لا تستطيع تلقي المدفوعات بعد."
    "Title" "اربط المدفوعات لتبدأ البيع"
    "Tone" "warning"}}

negative

معاينة 
<div rst-callout rst-tone="negative">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  </span>
  <div rst-callout-body>
    <strong>فشل الاستيراد الأخير</strong>
    <p>لم يتغير شيء. أصلح الصف 91 وحاول مرة أخرى.</p>
  </div>
</div>
{{template "callout" dict
    "Body" "لم يتغير شيء. أصلح الصف 91 وحاول مرة أخرى."
    "Title" "فشل الاستيراد الأخير"
    "Tone" "negative"}}

negative، ويُعلَن بوصفه تنبيهًا

معاينة 
<div rst-callout rst-tone="negative" role="alert">
  <span rst-callout-ic aria-hidden="true">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  </span>
  <div rst-callout-body>
    <strong>توقف الاستيراد</strong>
    <p>لم يتغير شيء. أصلح الصف 91 وحاول مرة أخرى.</p>
  </div>
</div>
{{template "callout" dict
    "Body" "لم يتغير شيء. أصلح الصف 91 وحاول مرة أخرى."
    "Title" "توقف الاستيراد"
    "Tone" "negative"
    "Alert" true}}

يضيف alert السمة role="alert" لعرض الرسائل المهمة.

detail-list

قائمة تعريفات عن سجل في شاشة التفاصيل. علامة mono للقيم ذات الطابع الآلي.

أربع معلومات، إحداها ذات طابع آلي

معاينة

ضع هذا داخل <section rst-box>.

<dl rst-detail>
  <dt>الجمهور</dt>
  <dd>الأعضاء</dd>
  <dt>الصفحة الرئيسية</dt>
  <dd>لا</dd>
  <dt>منشور</dt>
  <dd>
    <time datetime="2026-08-02">2 أغسطس 2026</time>
  </dd>
  <dt>المرجع</dt>
  <dd class="rst-mono">post_01H9ZQ</dd>
</dl>

ضع هذا داخل <section rst-box>.

{{template "detail-list" dict
    "Items" (list
        (dict "Label" "الجمهور" "Value" "الأعضاء")
        (dict "Label" "الصفحة الرئيسية" "Value" "لا")
        (dict "DateTime" "2026-08-02" "Label" "منشور" "Value" "2 أغسطس 2026")
        (dict "Label" "المرجع" "Mono" true "Value" "post_01H9ZQ"))}}

notice

تأكيد من سطر واحد بعد إعادة التوجيه. يأخذ نصًّا بسيطًا لا dict، ولا يرسم شيئًا إن كان فارغًا.

رسالة حفظ

معاينة 
<p rst-notice role="status">تم حفظ المنشور.</p>
{{template "notice" "تم حفظ المنشور."}}

region:notice

الإشعار الذي يُبقيه كل إطار على الصفحة، ويعرض Notice من بيانات الصفحة، كي يسمع قارئ الشاشة الرسالة ويستطيع live.js ملأه في مكانه.

رسالة حفظ

معاينة 
<div id="notice" role="status">
  <p rst-notice>تم حفظ المنشور.</p>
</div>
{{template "region:notice" dict "Notice" "تم حفظ المنشور."}}

form-error

سطر ملخّص أخطاء النموذج، ‎role="alert"‎. يأخذ نصًّا بسيطًا، ولا يرسم شيئًا حين لا يوجد خطأ.

إرسال مرفوض

معاينة 
<p rst-form-error role="alert">هذا العنوان مستخدم بالفعل.</p>
{{template "form-error" "هذا العنوان مستخدم بالفعل."}}

job-status

الجزء الذي يُستقصى من مهمة تعمل في الخلفية. لا تُكتب السمة data-poll إلا أثناء تشغيل المهمة، وحذفها هو طريقة إيقاف الاستقصاء.

قيد التنفيذ

معاينة 

<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
  <span rst-spin aria-hidden="true"></span> <bdi><strong>الاستيراد</strong></bdi> قيد التشغيل: <bdi>128 من 400</bdi>…
  <progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>

{{template "job-status" dict
    "Name" "الاستيراد"
    "Percent" 32
    "PollSeconds" 2
    "PollURL" "/jobs/1/fragment"
    "Progress" "128 من 400"
    "Status" "running"}}

هذه العيّنة تستقصي: وهي الوحيدة في الصفحة التي تطلب شيئًا من الشبكة، وفي موقع ساكن لا يأتيها ردّ أبدًا.

انتهى

معاينة 

<div rst-job>
  انتهى <bdi><strong>الاستيراد</strong></bdi>.
</div>

{{template "job-status" dict "Name" "الاستيراد" "Status" "done"}}

فشل

معاينة 

<div rst-job>
  فشل <bdi><strong>الاستيراد</strong></bdi>: <bdi>row 91: no such column &#34;published&#34;</bdi>
</div>

{{template "job-status" dict
    "Err" "row 91: no such column \"published\""
    "Name" "الاستيراد"
    "Status" "failed"}}