رفتن به محتوا
HarmoniQHarmoniQزبان طراحی هارمونیک

مودال

وضعیت: پیش‌نویس

این پروژه حذف شود؟

پروژه و همهٔ فایل‌هایش حذف می‌شود و برگشتی ندارد.

<button class="hq-button hq-button--md" type="button" data-hq-open="#demo-modal">حذف پروژه</button>


<dialog class="hq-modal" id="demo-modal" aria-labelledby="demo-modal-title">
  <div class="hq-modal__header">
    <h2 class="hq-modal__title" id="demo-modal-title">این پروژه حذف شود؟</h2>
    <button class="hq-button hq-button--ghost hq-button--md hq-button--icon-only" type="button" aria-label="بستن" data-hq-close><svg class="hq-button__icon" viewBox="0 0 32 32" aria-hidden="true" focusable="false"><path d="M17.4141 16 24 9.4141 22.5859 8 16 14.5859 9.4143 8 8 9.4141 14.5859 16 8 22.5859 9.4143 24 16 17.4141 22.5859 24 24 22.5859 17.4141 16z"/></svg></button>
  </div>
  <div class="hq-modal__body">
    <p>پروژه و همهٔ فایل‌هایش حذف می‌شود و برگشتی ندارد.</p>
  </div>
  <div class="hq-modal__footer">
    <button class="hq-button hq-button--danger hq-button--md" type="button" data-hq-close>حذف پروژه</button>
    <button class="hq-button hq-button--secondary hq-button--md" type="button" data-hq-close>انصراف</button>
  </div>
</dialog>

چه وقت استفاده کنیم

Section titled “چه وقت استفاده کنیم”
  • برای تصمیمی که کاربر باید پیش از ادامه بگیرد: تایید کنش برگشت‌ناپذیر، یا پرکردن یک فرم کوتاه.
  • محتوای کوتاه: یک عنوان، یک یا دو بند، و حداکثر دو دکمه.

چه وقت استفاده نکنیم

Section titled “چه وقت استفاده نکنیم”
  • برای پیام‌هایی که نیازی به تصمیم ندارند؛ از اعلان استفاده کنید.
  • برای محتوای بلند یا فرم چندمرحله‌ای؛ صفحهٔ جدا بسازید.
  • مودال روی مودال.

ساختار دکمه‌ها

Section titled “ساختار دکمه‌ها”
  • دکمهٔ اصلی اول می‌آید و در چیدمان راست‌به‌چپ سمت راست است؛ دکمهٔ «انصراف» کنار آن.
  • در تایید کنش برگشت‌ناپذیر، دکمهٔ اصلی دکمهٔ خطر است و برچسبش همان کنش را می‌گوید («حذف پروژه»)، نه «بله».

این پروژه حذف شود؟

حذف پروژهانصراف
انجام بدهعنوان پرسش روشن و دکمه‌ای که همان کنش را نام می‌برد.

مطمئنید؟

بلهخیر
انجام ندهعنوان مبهم و دکمه‌های «بله» و «خیر».