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

المكوّنات · زرّ عائم يتحوّل إلى لوحة

زرّ عائم يتحوّل إلى لوحة

يتمدّد من دائرة إلى نموذج، ويعود عند الإغلاق

7 تصاميم من هذه العائلة
زرّ عائم يتحوّل إلى لوحةزرّان عائمان متلازمانزرّ عائم قابل للسحبزرّ عائم ممتدّ ينكمشزرّ عائم بحلقة تقدّمزرّ عودة للأعلىزرّ عائم بقائمة سريعة
متقدّم
<div class="ap apfm"><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="Today's spending">مصروفات اليوم</h6>
    <b class="tot num"></b>
    <ul class="ex"></ul>
  </div></div>
  <div class="morph">
    <button class="trig tap" aria-expanded="false" aria-controls="mpanel" aria-label="أضف مصروفًا">＋</button>
    <div id="mpanel" class="panel" hidden>
      <div class="ph-hd"><b data-ar="مصروف جديد" data-en="New expense">مصروف جديد</b>
        <button class="cl tap" aria-label="إغلاق">✕</button></div>
      <input class="am" type="text" inputmode="decimal" placeholder="0.00" dir="ltr"
        aria-label="المبلغ">
      <div class="cats"></div>
      <button class="sv" disabled data-ar="حفظ" data-en="Save">حفظ</button>
    </div>
  </div>
  <div class="safe"></div>
</div></div>
← زرّ عائم ممتدّ ينكمشزرّ عائم بحلقة تقدّم →