버튼 목록 컴포넌트

Last updated on 11/6/2024@mrbirddev

이미지와 아이콘

아이콘을 설정하려면 이미지 필드를 비워 두어야 합니다.

그리고 이미지/아이콘을 오른쪽에 배치하려면, 버튼 이미지 CSS에 다음을 적용하세요.

left: auto;
right: .5rem;

DOM 구조

버튼 목록 컴포넌트는 HTML DOM 구조에서 다음과 같이 구성됩니다.

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