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

نظام تصميم rastrillo

نظرة عامة على كل ما يوفّره نظام التصميم. السمة: day. اللغة: العربية.

العرض

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

عناصر واجهة جاهزة ومتّسقة فيما بينها، تُبنى في الخادم.

مفردات إطار العمل نفسه تسمّيها partials: تُرجع ui.Templates() قيم partials، ويوثّقها docs/site/templates.md بهذا الاسم. تغيّرت الكلمة في هذه الصفحة، ولم تتغيّر في الشيفرة.

الروابط هنا غير مفعّلة

الروابط غير مفعّلة، ومصدر العيّنة متاح.

كل عيّنة أدناه داخل إطارها الخاص.

محتوى العيّنات بالإنجليزية. أمّا أغلفة العيّنات فمترجمة.

status-pill

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

النغمة الافتراضية (neutral)

معاينة
<span rst-status rst-tone="neutral">Draft</span>

neutral

معاينة
<span rst-status rst-tone="neutral">Draft</span>

positive

معاينة
<span rst-status rst-tone="positive">Published</span>

warning

معاينة
<span rst-status rst-tone="warning">Scheduled</span>

negative

معاينة
<span rst-status rst-tone="negative">Failed</span>

badge

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

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

معاينة
<span rst-badge>Draft</span>

neutral

معاينة
<span rst-badge="neutral">Internal</span>

positive

معاينة
<span rst-badge="positive">Live</span>

warning

معاينة
<span rst-badge="warning">Beta</span>

negative

معاينة
<span rst-badge="negative">Sold out</span>

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>

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

stat

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

الرقم الكبير

معاينة
<div rst-stats><div rst-stat="lead"><span rst-stat-label>Revenue this month</span><span rst-stat-num>€48,210</span><span rst-stat-delta rst-tone="positive">&#43;12%</span><span rst-stat-note>vs. last month</span></div></div>

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

رقم أصغر

معاينة
<div rst-stats><div rst-stat><span rst-stat-label>Unpaid invoices</span><span rst-stat-num>24</span></div></div>

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

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

معاينة
<div rst-stats><div rst-stat><span rst-stat-label>Time to first reply</span><span rst-stat-num>1h 12m</span><span rst-stat-delta rst-tone="positive">−38%</span><span rst-stat-note>vs. last week</span></div></div>

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

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

معاينة
<div rst-stats><div rst-stat><span rst-stat-label>Failed payments</span><span rst-stat-num>9</span><span rst-stat-delta rst-tone="negative">&#43;3</span><span rst-stat-note>vs. last week</span></div></div>

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

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

معاينة
<div rst-stats><div rst-stat><span rst-stat-label>Average session length</span><span rst-stat-num>4m 12s</span><span rst-stat-delta rst-tone="neutral">&#43;18s</span><span rst-stat-note>since Friday</span></div></div>

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

رقم مختصر

معاينة
<div rst-stats><div rst-stat><span rst-stat-label>Messages sent</span><span rst-stat-num><data value="4120">4.1k</data></span></div></div>

أتعرض 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>

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

معاينة
<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>

بلا حرف أول

معاينة
<a rst-person href="/people/3"><span rst-person-av="empty" aria-hidden="true"></span><span rst-person-meta><span rst-person-name>Unclaimed invitation</span><span rst-person-email>invited@example.com</span></span></a>

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>Posts are visible to members only until the site is published.</p></div></div>

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>Posts are visible to members only until the site is published.</p></div></div>

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>Payments are connected</strong><p>You can take payment for tickets now.</p></div></div>

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>Connect payments to start selling</strong><p>Your event is live but cannot take payment yet.</p></div></div>

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>The last import failed</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>

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>The import stopped</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>

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

detail-list

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

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

معاينة
<section rst-box><dl rst-detail>
  <dt>Audience</dt>
  <dd>Members</dd>
  <dt>Main page</dt>
  <dd>No</dd>
  <dt>Published</dt>
  <dd><time datetime="2026-08-02">2 August 2026</time></dd>
  <dt>Reference</dt>
  <dd class="rst-mono">post_01H9ZQ</dd>
</dl></section>

notice

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

رسالة حفظ

معاينة
<p rst-notice role="status">Post saved.</p>

form-error

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

إرسال مرفوض

معاينة
<p rst-form-error role="alert">That title is already taken.</p>

job-status

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

قيد التنفيذ

معاينة

<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
  <span rst-spin aria-hidden="true"></span> <strong>Import</strong> is running — 128 of 400…
  <progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>

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

انتهى

معاينة

<div rst-job>
  <strong>Import</strong> finished.
</div>

فشل

معاينة

<div rst-job>
  <strong>Import</strong> failed: row 91: no such column &#34;published&#34;
</div>