أوليات الواجهة

الأشكال التي لا يمكن أن يكونها المكوّن، لأنها تغلّف جسدًا لا يعرفه إلا المُستدعي: بطاقة القسم، وشبكة البيانات، وقائمة الكشف، وهيكل الأغلفة نفسه. يوفّر tokens.css الأصناف، ويكتب التطبيق الترميز. وكل ما في الأسفل هو الترميز الذي يعيده ui.Styleguide، بكلماته في لغتك، وتقابل اختبارات ui هذا الترميز نفسه بـ tokens.css.

كل مثال يعمل فعلًا، لكن روابطه لا تؤدي إلى أي مكان.

box

بطاقة القسم ذات الحشو، والعنوان الذي يقف خارجها.

أيّ بطاقة هي أيّ

‏‎rst-list‎ و‎rst-card‎ بلا حشو عن قصد: فهما يحملان سلسلة صفوف، وكل صف يضع حشوه بنفسه. ضع فيهما مباشرةً نموذجًا أو فقرة أو شريط روابط أو أي شيء ليس صفًّا، فسيُرسم ملتصقًا بالحدّ، والنصّ الملامس للحافة هو العلامة. أما البطاقة ذات الحشو لأي محتوى فهي ‎rst-box‎، وعنوانها ‎rst-box-head‎ شقيقٌ يسبقها.

سطح المكتب الهاتف HTML

<div rst-box-head>
  <h2>الدفعة المستحقة</h2>
  <a rst-btn href="/payout/edit">تعديل</a>
</div>
<section rst-box>
  <p>كل ما على الشاشة يوضع داخل صناديق.</p>
  <div rst-box-foot>آخر تحديث قبل ساعتين</div>
</section>

button

تأتي الأزرار بأربعة أنواع وثلاثة أحجام، ويمكن لرابط أن يبدو كزر. أما مؤشر الانتظار الذي يظهر أثناء إرسال النموذج فانظره في form-foot.

سطح المكتب الهاتف HTML

<p>
  <button rst-btn type="button">إلغاء</button> <button rst-btn="primary" type="button">حفظ</button> <button rst-btn="ghost" type="button">معاينة</button> <button rst-btn="danger" type="button">حذف</button>
</p>
<p>
  <button rst-btn="primary sm" type="button">صغير</button> <button rst-btn="primary" type="button">افتراضي</button> <button rst-btn="primary lg" type="button">كبير</button> <a rst-btn href="/orders">عرض الطلبات</a>
</p>
<p>
  <button rst-btn="primary block" type="button">متابعة</button>
</p>
<p>
  <button rst-btn type="button" disabled>مؤرشف</button>
</p>

dropdown

قائمة ‎details/summary‎ التي تقف خلف قوائم الفائض في الترويسة وخلف تصفية شريط القائمة، ومعها تصفية مطبَّقة في هيئة شارة يمكن إزالتها.

سطح المكتب الهاتف HTML

<details rst-dropdown name="rst-menus">
  <summary>
    تصفية
    <span rst-caret 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="m6 9 6 6 6-6"/></svg>
    </span>
    <span class="rst-sr-only">تصفية الطلبات: مدفوع</span>
  </summary>
  <div rst-dropdown-menu>
    <a aria-current="true" href="/orders?status=paid">مدفوع</a>
    <details rst-menu-group name="rst-menus-price" open>
      <summary>السعر</summary>
      <div>
        <a href="/orders?price=free">مجاني</a>
      </div>
    </details>
  </div>
</details>
<span rst-ftok>
  <span rst-ftok-k>مدفوع</span>
  <a href="/orders" aria-label="إزالة عامل التصفية مدفوع">✕</a>
</span>

form-layout

السمات التي تمنح النموذج إيقاعه وشريط الحفظ فيه. لا يُصدرها أي جزء، فهي تلفّ سلسلة حقول يؤلّفها المستدعي بنفسه.

سطح المكتب الهاتف HTML

<form rst-form-flow method="post" action="/settings">
  <div rst-field>
    <label rst-field-label for="name">الاسم</label>
    <input rst-input type="text" id="name" name="name">
  </div>
  <div rst-field>
    <label rst-field-label for="email">البريد الإلكتروني</label>
    <input rst-input type="email" id="email" name="email">
  </div>
  <div rst-field-row>
    <div class="rst-grow" rst-field>
      <label rst-field-label for="city">المدينة</label>
      <input rst-input type="text" id="city" name="city">
    </div>
    <div rst-field>
      <label rst-field-label for="zip">الرمز البريدي</label>
      <input rst-input="short" type="text" id="zip" name="zip">
    </div>
  </div>
  <div rst-form-bar>
    <span rst-form-bar-note>تُحفظ التغييرات فورًا.</span>
    <div rst-form-actions>
      <a rst-btn href="/settings">إلغاء</a>
      <button rst-btn="primary" type="submit">حفظ</button>
    </div>
  </div>
</form>

help

علامة استفهام محاطة بإطار تصل إلى مقالة مساعدة. تلميح CSS زينة فقط، أما الرابط فيحمل تسميته الكاملة بجملة تامة.

سطح المكتب الهاتف HTML

<a rst-help rst-tip href="/help/orders" target="_blank" rel="noopener" aria-label="مساعدة: الطلبات" data-tip="عن الطلبات">
  <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.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><path d="M12 17h.01"/></svg>
</a>

list-grid

مفردات جداول البيانات الحقيقية: البطاقة تحدّد أعمدتها مرة واحدة، والصفوف تختار الخلايا فحسب.

الشاشات تتراصّ رأسيًّا

الشاشة عمود واحد: page-header، ثم section-header وبطاقة، ثم section-header وبطاقة أخرى، بترتيب القراءة. أمّا الترتيب الأفقي فمحجوز للأساليب التي تأتي به: rst-box-head وrst-field-row وrst-lbar وخلايا rst-lrow وrst-seg-tabs.

سطح المكتب الهاتف HTML

<div rst-card style="--rst-cols: 2fr 110px var(--rst-col-menu)">
  <div rst-lrow="head">
    <span>الطلب</span>
    <span class="rst-m-hide">الحالة</span>
    <span></span>
  </div>
  <div rst-lrow>
    <a class="rst-nm" href="/orders/AB3PX"><bdi>Grace Hopper</bdi>
      <small>AB3PX · <bdi>grace@example.com</bdi></small>
    </a>
    <span class="rst-m-hide rst-cell-mut">مدفوع</span>
    <details rst-row-menu name="rst-menus">
      <summary aria-label="إجراءات Grace Hopper">
        <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="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
      </summary>
      <div rst-row-menu-panel>
        <a href="/orders/AB3PX">عرض</a>
        <hr>
        <a class="rst-danger" href="/orders/AB3PX/refund">استرداد مبلغ الطلب…</a>
      </div>
    </details>
  </div>
  <p rst-no-match>لا توجد طلبات مطابقة. <a href="/orders">مسح عوامل التصفية</a></p>
</div>
<p rst-count-line>عرض <strong>1–20</strong> من <strong>412</strong></p>

modal

النافذة المشروطة عنوان مستقل بذاته، لا حالة في المتصفح: الصفحة تحتها معلّمة بـ inert، واللوحة فوقها، والإغلاق رابط عادي.

سطح المكتب الهاتف HTML

<div rst-backdrop inert>
  <div rst-page>
    <h1>الإعدادات</h1>
  </div>
</div>
<div rst-modal-overlay>
  <dialog rst-modal-panel open aria-labelledby="modal-title">
    <nav>
      <a href="/settings/profile" aria-current="page">الملف الشخصي</a>
      <a href="/settings/billing">الفوترة</a>
      <a href="/settings/notifications">الإشعارات</a>
    </nav>
    <section>
      <a rst-modal-close href="/settings" aria-label="إغلاق الإعدادات">✕</a>
      <h2 id="modal-title">الملف الشخصي</h2>
      <p>حدِّث الاسم والصورة الظاهرين في الحساب كلّه.</p>
    </section>
  </dialog>
</div>

شاهده حيًّا على العنوان الذي ينتمي إليه (يُفتح في علامة تبويب جديدة).

selbox

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

سطح المكتب الهاتف HTML

<label rst-selbox>
  <input type="checkbox" aria-label="تحديد الطلب AB3PX">
</label>

shell-sidebar

إطار الهيكل sidebar في صفحة محتوى: على الهاتف، عنصر للرجوع إلى الفهرس.

سطح المكتب الهاتف HTML

<div rst-shell-sidebar="page">
  <a rst-skip href="#main">الانتقال إلى المحتوى</a>
  <div rst-shell-back>
    <a href="/#nav-reports" rel="up" aria-label="العودة إلى الأقسام">الأقسام</a>
  </div>
  <aside rst-shell-rail>
    <h1 rst-shell-title>
      <span><a rst-shell-brand href="/">Notes</a></span><span>التقارير</span>
    </h1>
    <a rst-shell-brand href="/">Notes</a>
    <nav rst-shell-nav>
      <span rst-shell-group>العمل</span>
      <a id="nav-dashboard" href="/dashboard">لوحة الموجز</a>
      <a id="nav-reports" href="/reports" aria-current="page">التقارير</a>
    </nav>
    <div rst-shell-rail-foot>
      <details rst-dropdown rst-shell-profile name="rst-shell-menu">
        <summary>
          <span rst-shell-avatar>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
          </span>
        </summary>
        <div rst-dropdown-menu>
          <div rst-shell-who>
            <span rst-person-av aria-hidden="true">A</span>
            <span rst-person-name>Ada Lovelace</span>
            <span rst-person-email>ada@example.com</span>
          </div>
          <a href="/settings">الإعدادات</a>
        </div>
      </details>
    </div>
  </aside>
  <main rst-shell-main id="main">
    <div rst-page>المحتوى.</div>
  </main>
</div>

افتح عرض الهيكل ذي الشريط الجانبي، وهو معاينة مستقلة. (يُفتح في علامة تبويب جديدة).

shell-topbar

هيكل الغلاف ذي الشريط العلوي نفسه، بصيغة الترميز. يقدّمه Layout كقالب كامل.

سطح المكتب الهاتف HTML

<div rst-shell-topbar>
  <a rst-skip href="#main">الانتقال إلى المحتوى</a>
  <header rst-shell-bar>
    <a rst-shell-brand href="/">Notes</a>
    <details rst-shell-menu name="rst-shell-menu">
      <summary>
        <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="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/></svg>القائمة</summary>
    </details>
    <div rst-shell-tail>
      <nav rst-shell-nav>
        <a href="/" aria-current="page">الرئيسية</a>
        <a href="/archive">الأرشيف</a>
      </nav>
      <details rst-dropdown rst-shell-account name="rst-menus">
        <summary>
          الحساب
          <span rst-caret 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="m6 9 6 6 6-6"/></svg>
          </span>
        </summary>
        <div rst-dropdown-menu>
          <a href="/settings">الإعدادات</a>
        </div>
      </details>
    </div>
  </header>
  <main rst-page id="main">المحتوى.</main>
  <footer rst-shell-foot>صُنع باستخدام rastrillo</footer>
</div>

افتح عرض الهيكل ذي الشريط العلوي، وله معاينة خاصّة به. (يُفتح في علامة تبويب جديدة).

stat-band

صف من الأرقام على امتداد أعلى لوحة المعلومات.

سطح المكتب الهاتف HTML

<div rst-stats>
  <div rst-stat="lead">
    <span rst-stat-label>إيرادات هذا الشهر</span>
    <span rst-stat-num>&euro;48,210</span>
    <span rst-stat-delta rst-tone="positive">+12%</span>
    <span rst-stat-note>مقارنة بالشهر الماضي</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>طلبات اليوم</span>
    <span rst-stat-num>318</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>متوسط قيمة السلة</span>
    <span rst-stat-num>&euro;41.20</span>
    <span rst-stat-delta rst-tone="negative">&minus;3%</span>
  </div>
  <div rst-stat>
    <span rst-stat-label>المبالغ المستردة</span>
    <span rst-stat-num>7</span>
  </div>
</div>

tblock

بطاقة محاطة بإطار لا يظهر متنها إلا ما دام مفتاحها مفعّلًا، عبر ‎:has()‎. المفتاح هو المرجع، والإظهار مجرد تسهيل في العرض.

سطح المكتب الهاتف HTML

<div rst-tblock>
  <label rst-tblock-head>
    <input type="checkbox" name="notify" checked>
    <span rst-switch-track aria-hidden="true"></span>
    <span>
      <span rst-tblock-title>إشعارات البريد الإلكتروني</span>
      <span rst-tblock-desc>تُرسل مع كل رد في نقاش تشارك فيه.</span>
    </span>
  </label>
  <div rst-tblock-body>
    <div rst-field>
      <label rst-field-label for="notify-freq">التكرار</label>
      <input rst-input type="text" id="notify-freq" name="notify_freq" value="ملخص يومي">
    </div>
  </div>
</div>