مكون قائمة الأزرار

الصورة والأيقونة

إذا كنت ترغب في تعيين أيقونة، يجب أن تترك حقل الصورة فارغًا.

وإذا كنت تريد وضع الصورة/الأيقونة على اليمين، قم بتطبيق ما يلي على أنماط مخصصة لصورة الزر

left: auto;
right: .5rem;

هيكل DOM

يتكون مكون قائمة الأزرار في هيكل HTML DOM كما يلي.

<div style="display: flex; width: 100%"> <!-- أنماط مخصصة applies here -->
  <a href="" ...> <!-- أنماط مخصصة للزر applies here-->
    <div
      style="position: absolute; top: .5rem; bottom: .5rem; overflow: hidden; left: .5rem;"
      <!-- أنماط مخصصة لصورة الزر applies here-->
    >
      {image || icon}
    </div>
    <span>
      {button text}
    </span>
  </a>
  ...
</div>