Vue3 챌린지: ButtonsGroup

q-button-group 과 유사한 컴포넌트를 만들고 싶다고 가정해 봅시다.

개발자로서 2개의 구성요소TButton와 GroupRender가 필요하므로 TButton 독립적으로 스타일을 지정하고 해당 버튼을 GroupRender 안에 넣어 그룹을 생성할 수 있습니다.

주어진 Vue 템플릿은 결과 HTML이 되어야 합니다.

뷰 템플릿

<div class="flex flex-col justify-center items-center min-h-screen space-y-8">
  <div>
    <TButton label="One" />
  </div>
  <div>
    <GroupRender>
      <TButton label="Two" />
      <TButton label="Three" />
    </GroupRender>
  </div>
</div>

결과 HTML

<div class="flex flex-col justify-center items-center min-h-screen space-y-8">
  <div>
    <button class="border rounded-lg px-4 py-2 hover:bg-gray-100">One</button>
  </div>
  <div>
    <div class="border rounded-lg flex divide-x">
      <div>
        <button class="px-4 py-2 hover:bg-gray-100">Two</button>
      </div>
      <div>
        <button class="px-4 py-2 hover:bg-gray-100">Three</button>
      </div>
    </div>
  </div>
</div>

See result

제출하는 방법?

"도전 수락"댓글에 작성하십시오.

포크stackblitz project하고 원래 의견에 대한 답장으로 솔루션이 포함된 새 링크를 보냅니다.

단위 테스트는 있으면 좋지만 선택 사항입니다.

의견에 유용한 기사를 공유하십시오.

그동안 튜토리얼과 솔루션 작업을 시작할 것입니다. 그것을 놓치지 마세요 - 토론을 구독하고 나를 따르십시오.