Button-Listen-Komponente

Bild und Symbol

Wenn Sie ein Symbol festlegen möchten, sollten Sie das Bildfeld leer lassen.

Und wenn Sie das Bild/Symbol rechts platzieren möchten, wenden Sie Folgendes auf Button-Bild-CSS an.

left: auto;
right: .5rem;

DOM-Struktur

Ein Schaltflächenliste-Komponente ist in der HTML-DOM-Struktur wie folgt zusammengesetzt.

<div style="display: flex; width: 100%"> <!-- CSS applies here -->
  <a href="" ...> <!-- Button-CSS applies here-->
    <div
      style="position: absolute; top: .5rem; bottom: .5rem; overflow: hidden; left: .5rem;"
      <!-- Button-Bild-CSS applies here-->
    >
      {image || icon}
    </div>
    <span>
      {button text}
    </span>
  </a>
  ...
</div>