Alpine.js를 사용하여 탭 구성 요소 빌드

5398 단어 tutorialalpinejsjavascript
Alpine.js 자습서 시리즈의 다른 시리즈에 오신 것을 환영합니다. 오늘 우리는 활성 탭을 기반으로 다른 콘텐츠를 표시하는 탭 구성 요소를 만들 것입니다. JavaScript에 대한 실무 지식이 있는 경우 이 구성 요소는 Alpine.js를 사용하여 빌드하는 데 매우 간단합니다.

HTML 파일을 만들고 CDN을 통해 Alpine.js를 로드하여 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Alpine.js Tab Component</title>   
    <script defer src="https://unpkg.com/alpinejs"></script> 
  </head>
  <body> 
    <!-- alpine.js tab component -->   
  </body>
</html>


그런 다음 구성 요소에 대한 래퍼<div>를 추가합니다.

<div x-data="{ tab: 'description' }">
 <!-- nav -->
 <!-- content -->
</div>

x-data는 HTML 청크를 Alpine 구성 요소로 정의하는 데 사용됩니다. 또한 해당 구성 요소가 참조할 반응성 데이터(이 경우 활성 탭)를 제공합니다. 페이지 로드 시 "설명"탭을 활성화하려는 3개의 탭 레이아웃을 구축할 것입니다. 이를 위해 x-data 에서 "설명"을 기본값으로 정의했습니다.

다음으로 <nav> 요소 내에 표준 앵커 요소인 3개의 탭을 추가합니다.

<nav>
  <a :class="{ 'active': tab === 'description' }" x-on:click.prevent="tab = 'description'" href="#">Description</a>
  <a :class="{ 'active': tab === 'dimensions' }" x-on:click.prevent="tab = 'dimensions'" href="#">Dimensions</a>
  <a :class="{ 'active': tab === 'reviews' }" x-on:click.prevent="tab = 'reviews'" href="#">Reviews</a>
</nav>


앵커 요소에서 현재 tab 지시문에 설정된 값과 일치하는 x-data 값을 기반으로 활성 클래스를 토글합니다. tab 지시문을 사용하여 클릭하면 x-on:click 값이 업데이트됩니다.

마지막으로 각 탭의 콘텐츠에 대한 요소<div>를 추가해 보겠습니다.

<div x-show="tab === 'description'">
  <h3>Description</h3>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus
    facilisis tristique. Lorem ipsum dolor sit amet, consectetur adipiscing
    elit. 
  </p>
</div>
<div x-show="tab === 'dimensions'">
  <h3>Dimensions</h3>
  <p>
    Donec placerat ullamcorper sodales. Nam congue justo sit amet erat luctus
    faucibus.
  </p>
</div>
<div x-show="tab === 'reviews'">
  <h3>Reviews</h3>
  <p>
    Sed hendrerit imperdiet accumsan. Nunc venenatis sit amet diam vel rutrum.
    Quisque interdum dui et molestie tristique.
  </p>
</div>

x-show 지시문은 현재 탭 값을 확인하고 해당 탭 값이 일치하는 경우에만 <div>를 표시합니다. 이제 브라우저에서 이 페이지를 보는 경우 각 앵커 요소를 클릭하고 해당 콘텐츠의 가시성을 전환할 수 있어야 합니다.

이 튜토리얼의 모든 것입니다. 이제 웹 페이지 또는 애플리케이션과 일치하는 일부 CSS만 필요한 기능 탭 구성 요소가 있어야 합니다. 이 튜토리얼에서 사용된 코드 중 일부를 탐색하는 데 관심이 있다면 공식 Alpine.js 문서here를 확인하세요.
'npm install'에 작별을 고하세요. 'npm install'이 필요 없습니다. 'npm install'은 버리세요.
유지 참고 사항

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage