소개

라디오 버튼은 웹에서 매우 일반적입니다. 스타일을 지정하고 맞춤형 라디오를 사용하는 것이 조금 더 어렵습니다. 그러나 그렇게 하면 UI가 훨씬 더 매력적으로 만들어집니다.
이 기사에서는 Alpine.js로 "라디오 탭"을 구축한 방법에 대해 설명합니다. 라디오 탭이란 무엇입니까? 탭처럼 보이고 느껴지는 라디오 버튼으로 생각하십시오.

소스 코드 및 미리보기

내 GitHub Repo에서 소스를 볼 수 있습니다.
https://github.com/zaxwebs/tailwind-alpine/blob/main/radio-tabs.html
실시간으로 사용해 보려면 다음 단계를 따르세요.
https://tailpine.netlify.app/radio-tabs.html

설명

미리 읽으면서 저장소의 코드를 검토하는 것이 좋습니다.

설계

각 라디오 버튼은 레이블 안에 있습니다. "라디오 버튼"을 숨기려면 class="hidden"를 사용하고 버튼의 for를 가리키는 레이블의 id로 참조합니다.
버튼의 전체 그룹(외부 div)은 다른 클래스 중에서 .inline-flex를 가지며, 이것은 라디오를 나란히 쌓는 것입니다.
오른쪽을 제외하고 이 div에도 패딩이 있습니다. 왜요? 라디오에는 동일한 padding-right가 있습니다.

작동

라디오 버튼은 Alpine을 사용하는 배열로 구성됩니다.

function radioTabs(name, radios) {
    return {
        name,
        radios,
    }
}

이것은 외부 div의 x-데이터로 사용됩니다.

<div x-data="radioTabs('direction', directions)">

그런 다음 x-for는 라디오 버튼으로 구성된 레이블을 생성하기 위해 템플릿을 반복합니다.

<input
type="radio"
class="hidden"
:id="radio.id"
:value="radio.value"
:name="name"
x-model="selectedDirection"
/>

궁금한 점이 있다면 방향 배열은 다음과 같습니다.

const directions = [ { id: "radio-tab-direction-e", value: "East", label: "East" }, { id: "radio-tab-direction-w", value: "West", label: "West" }, { id: "radio-tab-direction-n", value: "North", label: "North" }, { id: "radio-tab-direction-s", value: "South", label: "South" }, ]

그리고 그것은 일종의 일반적인 생각입니다.

사용 사례

나는 최근에 이것을 비교 테이블로 사용했습니다. 유사한 인스턴스에 대한 라디오 탭을 사용하여 전체적인 매력을 더할 수 있습니다.
다음과 같이 표시됩니다.

그게 다야!

시간을 내어 이 실험/프로젝트를 읽고 확인해 주셔서 감사합니다. 내Github repo 및 라이브Netlify에 더 많은 Alpine 및 Tailwind 관련 항목이 있습니다.