Alpine을 사용하여 탭 탐색을 구축합니다.회사 명

알프스산이 뭔지 알면js네, 건너뛰셔도 됩니다to here. 그렇지 않으면 제가 소개해 드릴게요.
알프스 산.js

a rugged, minimal framework for composing JavaScript behavior in your markup.

나는 그것을 더욱 가볍고 원가가 낮은 Vue로 간주하는 것을 좋아한다.js와 TailwindCSS를 혼합합니다.구문은 Vue와 매우 비슷합니다.js, 그리고 TailwindCSS처럼 HTML에 추가합니다.
나는 알프스 산을 발견했다.그는 라라빌 지역사회의 활발한 구성원이다.당시 나는 Github 링크를 봤는데 솔직히 별로 개의치 않거나 이에 대해 의심을 표시하지 않았다. "그래, 이것은 다른 JS 프레임워크일 뿐이야. 다음 주에 새로운 프레임워크가 발표될 거야."
그리고 나서 나는 그가 그의 아나운서에서 이 일을 이야기하는 것을 들었는데, 이 일은 나의 흥미를 불러일으키기 시작했다.나는 또 문서를 한 번 보고 "그래, 난 Vue.js나 일반적인 js만 사용할 수 있어. 다른 걸로 할 필요 없어."라고 생각했다.나는 그가 docs 팟캐스트에서 이 문제를 토론했다는 말을 듣고서야 비로소 알프스 산을 선택했다.js일정.
이번 회에서 그들은 틀의 용례를 토론했는데 이것은 나에게 매우 의미가 있다.내가 그것을 사용하고 싶은 이유는 자바스크립트가 많이 필요하지 않은 사이트를 구축하고 있다고 가정하기 때문이다.모드, 밑에 있는 메뉴, 옵션 카드 내비게이션 등 이곳과 그곳에는 오직 한 가지가 있다.물론 자바스크립트만 작성하면 됩니다. 걱정하지 마세요.컨텍스트를 전환하고 JS를 사용하는 데 필요한 방법(요소 가져오기, 클래스 전환 등)을 고려하는 것은 어렵거나 Vue를 추가할 수 있습니다.js와 구성 요소 만들기 등등.간단한 상호작용 요소에 대해 말하자면 좀 지나친 것 같다.아니면 알프스 산을 써도 돼요.js 및 HTML에서 선언으로 완료합니다.
문서에서 작성자는 프레임의 구문이 Vue를 완전히 참조했다고 설명합니다.js, x-on:click,x-bind,x-show,x-for와v-on:click,v-bind가 기본적으로 같다는 것을 발견할 수 있습니다.니가 Vue를 알면js, 높은 산을 배우는 것은 쉬운 일이다.js, 하지만 네가 몰라도 나는 이 개념을 들고 이해하기에 충분하다고 생각한다.

풀스택 라디오 우리는 무엇을 건설해야 합니까?

간단한 탭 탐색 구성 요소입니다.JS로 하는 가장 감동적인 일은 아니지만, 알프스 산이 무엇인지 보여주는 것은 좋은 일이다.js는 할 수 있다.우리는 TailwindCSS를 추가할 것입니다. 이렇게 하면 우리는 CSS를 너무 걱정할 필요가 없고 Alpine의 특성에만 관심을 가질 필요가 있습니다.우리는 프레임워크를 CDN으로 구성하기 때문에 링크를 HTML에 붙이기만 하면 된다.로 이동하여 코드를 얻고 계속 조작하거나 개발 지점을 사용하여 최종 결과를 얻을 수 있습니다.
초기 HTML 본문은 다음과 같습니다.

<div class="bg-gray-100 text-gray-800">
  <nav class="bg-gray-300">
    <ul class="flex">
      <li class="px-4 py-2 bg-gray-100">
        <a href="#option-1">Option 1</a>
      </li>
      <li class="px-4 py-2">
        <a href="#option-2">Option 2</a>
      </li>
      <li class="px-4 py-2">
        <a href="#option-3">Option 3</a>
      </li>
    </ul>
  </nav>

  <div class="p-4">
    <h2 class="text-xl mb-4">Here, you have the content of <strong>Option 1</strong></h2>
    <p class="mb-2">Qui ipsorum...</p>
  </div>

  <div class="p-4">
    <h2 class="text-xl mb-4">Here, <strong>Option 2</strong> contents are shown</h2>
    <p class="mb-2">Qui ipsorum...</p>
  </div>

  <div class="p-4">
    <h2 class="text-xl mb-4">And here, only <strong>Option 3</strong> contents should be displayed</h2>
    <p>Qui ipsorum...</p>
  </div>
</div>

브라우저로 열면 스타일이 나타나지만 모든 내용 (모든 탭) 이 동시에 표시됩니다.이제 알프스 산을 뿌려봅시다.js는 단일 탭의 내용만 표시합니다.

<div class="bg-gray-100 text-gray-800" x-data="{ selected: 'option-1' }">
  <nav class="bg-gray-300">
    <ul class="flex">
      <li class="px-4 py-2 bg-gray-100">
        <a href="#option-1" x-on:click="selected = 'option-1'">Option 1</a>
      </li>
      <li class="px-4 py-2">
        <a href="#option-2" x-on:click="selected = 'option-2'">Option 2</a>
      </li>
      <li class="px-4 py-2">
        <a href="#option-3" x-on:click="selected = 'option-3'">Option 3</a>
      </li>
    </ul>
  </nav>

    <div x-show="selected === 'option-1'" class="p-4">
      ...
    </div>

    <div x-show="selected === 'option-2'" class="p-4">
      ...
    </div>

    <div x-show="selected === 'option-3'" class="p-4">
      ...
    </div>
</div>

여기서 우리는 세 가지 지령을 받았다. x-data, x-on:click, x-show.x-data 는 새로운 구성 요소의 범위를 성명했다.JS 객체를 전달할 수 있습니다.x-data 선언된 요소로 포장된 각 요소는 전달된 JS 객체에 액세스할 수 있습니다.예를 들어 만약에 내가nav원소에서 x-data 성명했다면nav,ul,li와 a만 이 데이터에 접근할 수 있다.우리는 옵션 카드의 내용 요소에서selected를 사용하고 싶기 때문에 다른 요소로 모든 내용을 포장하고 거기에서 사용합니다x-data.페이지에 여러 개의 x-data 성명이 있을 수 있으며, 모든 구성 요소가 어떤 내용에 접근할 수 있는지 기억하기만 하면 됩니다.x-on:click 클릭 이벤트 탐지기를 이 요소에 추가합니다.지령 부분은 사실상 x-on만 있고, 두 번째 부분은 (클릭) 당신이 듣고 싶은 사건입니다.예를 들어, 를 사용할 수 있습니다 x-on:keydown.escape는 escape 키를 눌렀는지 감청할 수 있습니다.문서를 보고 들을 수 있는 모든 다른 사건을 알아보세요.따라서 x-on:click 함수나 표현식을 수신할 수 있다.선택한 대상의 상태만 바꾸고 싶기 때문에 이 짧은 표현식을 직접 추가할 수 있습니다. 예를 들어 x-on:click="selected = 'option-1'".그러면 selected 명령의 x-data 값이 변경됩니다.
마지막으로 우리는 x-show 있다.true 또는false로 해석된 표현식을 전달할 수 있습니다. 요소에서 display: none; 스타일을 전환합니다.
네, 있습니다. 기본적인 탭 기능이 있을 것입니다.
this Github repository
등등, 내 말은, 그것은 작업 중이지만, 라벨의 양식은 그 상태를 반영하기 위해 바뀌지 않았다.그래, 내가 너를 소개할게x-bind:class(Vue.js를 알면 놀라지 않을 거야):

<ul class="flex">
  <li class="px-4 py-2" x-bind:class="{ 'bg-gray-100': selected === 'option-1' }">
    <a href="#option-1" x-on:click="selected = 'option-1'">Option 1</a>
  </li>
  <li class="px-4 py-2" x-bind:class="{ 'bg-gray-100': selected === 'option-2' }">
    <a href="#option-2" x-on:click="selected = 'option-2'">Option 2</a>
  </li>
  <li class="px-4 py-2" x-bind:class="{ 'bg-gray-100': selected === 'option-3' }">
    <a href="#option-3" x-on:click="selected = 'option-3'">Option 3</a>
  </li>
</ul>

여기서 우리는 하나의 대상을 x-bind:class 명령에 전달합니다. 그 중에서 키는 응용해야 할 클래스이고 값은true 또는false로 해석된 표현식입니다.true인 경우 이 클래스를 적용합니다. 그렇지 않으면 적용되지 않습니다.이렇게 하면 이 구성 요소가 완성된다.
이제 솜털을 좀 첨가합시다.우선, Vue처럼.js, 우리는 비교적 짧은 문법을 사용할 수 있습니다. 그 중에서 x-on 는 @ 로 바꿀 수 있고, x-bind 는 : 로 바꿀 수 있습니다.

<li class="px-4 py-2" :class="{ 'bg-gray-100': selected === 'option-1' }">
  <a href="#option-1" @click="selected = 'option-1'">Option 1</a>
</li>

이제 엔딩을 위해 내용 상자에 과도를 추가하면 간단해 보입니다.

<div x-show.transition.in.opacity.duration.750ms="selected === 'option-1'" class="p-4">
  ...
</div>

<div x-show.transition.in.opacity.duration.750ms="selected === 'option-2'" class="p-4">
  ...
</div>

<div x-show.transition.in.opacity.duration.750ms="selected === 'option-3'" class="p-4">
  ...
</div>

네, 그렇습니다.이렇게 간단해.기본적으로 몇 가지 옵션을 연결하여 전환이 더 좋아 보일 수 있습니다.기본적으로 x-show.transition 만 추가하면 200ms의 입력과 출력 불투명도 비례 변환이 추가됩니다.이 프레젠테이션에서, 나는 그것을 단지 과도로, 불투명도만 변경하고, 750ms를 지속한다.다른 선택을 보고 싶다면.
그렇습니다.소량의 코드만 있으면 우리는 옵션 카드의 내비게이션을 응용 프로그램에 추가할 수 있다.알프스 산이런 간단한 것을 만들고 싶을 때, js는 훌륭하지만, 폼과 같은 더 복잡한 상호작용을 만들 수도 있다.앞으로의 댓글에서 나는 너에게 어떻게 하는지 보여줄 것이다😎.