کامپوننت‌ها

اجزای رابط که می‌توانید در صفحه‌های خودتان هم استفاده کنید؛ هر کدام همراه نمونهٔ زنده.

دکمه‌ها#

<button class="btn" type="submit"><span class="spin"></span><span class="lbl">ورود به حساب</span></button>
<button class="btn ghost" type="button">بازگشت</button>

هر دکمهٔ ارسال باید <span class="spin"> و <span class="lbl"> داشته باشد. اسکریپت هنگام ارسال کلاس loading را اضافه و برچسب را پس از موفقیت به «انجام شد» تغییر می‌دهد.

فیلد و نمایشگر قدرت رمز#

ساختار کامل این فیلد در [فرم‌ها و اعتبارسنجی](forms.html#password) آمده است.

هشدارها#

<div class="alert err" role="alert">
  <svg class="ic" aria-hidden="true"><use href="#i-alert"/></svg>
  <span>متن پیام</span>
</div>

کلاس‌های err و warn رنگ را تعیین می‌کنند. .note نسخهٔ کوچک و کم‌رنگ برای نکته‌های کنار فیلد است. اسکریپت هشدار بالای فرم را خودش می‌سازد؛ دستی نوشتن آن فقط برای پیام‌های ثابت لازم است.

نشان‌ها#

<div class="badge ok"><svg class="ic" aria-hidden="true"><use href="#i-check"/></svg></div>

نشان گرد بالای کارت‌های وضعیت است. بدون کلاس رنگ، رنگ برند را می‌گیرد؛ ok، warn و err رنگ وضعیت را تعیین می‌کنند.

تاست#

toast("ذخیره شد");               // موفقیت، ۴ ثانیه
toast("اتصال برقرار نشد", "err"); // خطا، ۸ ثانیه، role="alert"

تاست‌ها دکمهٔ بستن دارند و با رفتن ماوس روی آن‌ها متوقف می‌شوند.

مودال#

<a href="#" data-modal="terms">قوانین و شرایط</a>

<div class="modal" id="terms" role="dialog" aria-modal="true" aria-labelledby="tt">
  <section class="card">
    <h1 id="tt">قوانین و شرایط</h1>
    <p class="lead">متن قوانین</p>
    <button class="btn" type="button" data-close>متوجه شدم</button>
  </section>
</div>

مودال فوکوس را درون خود نگه می‌دارد، با Esc یا کلیک روی پس‌زمینه بسته می‌شود و فوکوس را به عنصر بازکننده برمی‌گرداند.

شمارش معکوس#

<div class="cd" data-count="900" role="timer"></div>

شمارنده بر پایهٔ زمان واقعی محاسبه می‌شود و در تب پس‌زمینه عقب نمی‌ماند. برای شمارش تا یک تاریخ، از data-until استفاده کنید.