PenTool UIتصفّح المكتبة

المكوّنات · لوحة تأكيد لا رجعة فيه

لوحة تأكيد لا رجعة فيه

تطلب كتابة كلمة للتأكيد، ولا تفعّل الزرّ قبلها

7 تصاميم من هذه العائلة
لوحة تأكيد لا رجعة فيهلوحة إجراءاتلوحة سفلية بنقاط توقّفلوحة مرشّحاتلوحة اختيار وسيلة الدفعلوحة منتقي بعجلاتلوحة مشاركة بشبكة
متوسّط
<div class="ap apsn"><div class="ph">
  <div class="sb"><span class="tm num"></span>
    <span class="r" aria-hidden="true"><span>▲</span><span>◗</span><span class="bt num"></span></span></div>
  <div class="scr"><div class="body">
    <h6 data-ar="إعدادات الحساب" data-en="Account settings">إعدادات الحساب</h6>
    <ul class="st"></ul>
    <button class="dg" aria-expanded="false" data-ar="حذف الحساب نهائيًّا" data-en="Delete account permanently">حذف الحساب نهائيًّا</button>
  </div></div>
  <div class="scrim" hidden></div>
  <section class="sheet" hidden aria-label="تأكيد الحذف" role="alertdialog">
    <div class="grab" role="separator" aria-label="مقبض اللوحة"></div>
    <div class="cn">
      <span class="ico" aria-hidden="true">⚠</span>
      <b data-ar="حذف الحساب نهائيًّا؟" data-en="Delete account permanently?">حذف الحساب نهائيًّا؟</b>
      <p data-ar="تُحذف كل بياناتك ولا يمكن استرجاعها. اكتب كلمة التأكيد للمتابعة." data-en="All your data is erased and cannot be recovered. Type the confirmation word to continue.">تُحذف كل بياناتك ولا يمكن استرجاعها. اكتب كلمة التأكيد للمتابعة.</p>
      <div class="req"><span data-ar="اكتب" data-en="Type">اكتب</span><code>حذف</code></div>
      <input class="cf" type="text" aria-label="كلمة التأكيد" placeholder="…">
      <div class="acts"><button class="no" data-ar="تراجع" data-en="Keep account">تراجع</button>
        <button class="yes" disabled data-ar="حذف نهائي" data-en="Delete forever">حذف نهائي</button></div>
    </div>
  </section>
  <div class="safe"></div>
</div></div>
← لوحة إجراءاتلوحة سفلية بنقاط توقّف →