Tailwind CSS 및 Alpine JS로 아코디언 만들기

11909 단어 tutorialwebdevtailwindcssjavascript
안녕! 이 블로그에서는 TailwindCSS 및 AlpineJS를 사용하여 아코디언 구성 요소를 만드는 방법을 배웁니다.



무엇입니까 Alpine JS

Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the modern web. Plop in a script tag and get going.



Alpine JS를 사용하는 경우 Tailwind CSS처럼 index.html를 떠날 필요가 없습니다.

나와 함께 코딩하고 싶다면 이것을 확인하십시오

먼저 index.html를 생성합니다. 이 자습서에서는 Tailwind Play CDN 을 사용합니다. 이제 프로젝트에서 Alpine JS를 사용하려면 다음 스크립트를 추가해야 합니다.

<script src="//unpkg.com/alpinejs" defer></script>


Alpine JS에 대한 기본 이해가 없는 경우 다음을 참조할 수 있습니다video.

HTML

프로젝트의 시작 파일은 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Accordion Tutorial</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
</head>
<body>

</body>
</html>


이제 Tailwind CSS를 사용하여 아코디언의 기본 구조를 만듭니다.

<div class="w-[60vw] mx-auto bg-red-50 mt-16">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 1</p>
            <button class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div class="mx-4 py-4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr class="h-[0.1rem] bg-slate-500">
    </div>

button와 함께 사용된 텍스트가 없지만 아코디언 상태에 따라 동적으로 입력합니다. 아코디언의 세부 사항은 현재 표시되지만 걱정하지 마세요. AlpineJS로 수정하겠습니다.

상위 요소에 x-data="open:false" Alpine 속성을 추가합니다. 그리고 onclick 이벤트를 button에 추가합니다. 따라서 버튼을 클릭하면 open 의 상태가 변경됩니다. open가 true이면 + 기호를 표시하고 false - 기호를 button 태그의 텍스트로 표시합니다.

<button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>


이제 아코디언의 세부 정보를 표시하거나 숨기기 위해 Alpine JS의 x-show 속성을 추가합니다. 따라서 open의 값이 'true'이면 세부 정보를 표시하고 그렇지 않으면 세부 정보를 숨깁니다. 또한 일부 전환 효과를 추가하기 위해 x-transition 속성을 추가합니다.

이 작은 튜토리얼의 전체 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Accordion Tutorial</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="//unpkg.com/alpinejs" defer></script>
    <style>
        [x-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <!-- <p class="text-5xl">Tailwind Accordion Tutorial</p> -->
    <div x-data="{open:false}" class="w-[60vw] mx-auto bg-red-50 mt-16">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 1</p>
            <button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div x-show="open" x-cloak  class="mx-4 py-4" x-transition>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr class="h-[0.1rem] bg-slate-500">
    </div>
    <div x-data="{open:false}" class="w-[60vw] mx-auto  bg-red-50">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 2</p>
            <button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div x-show="open" x-cloak class="mx-4 py-4" x-transition>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr class="h-[0.1rem] bg-slate-500">
    </div>
    <div x-data="{open:false}" class="w-[60vw] mx-auto  bg-red-50">
        <div class="flex justify-between items-center bg-red-200">
            <p class="px-4">Accordion 3</p>
            <button @click="open=!open" x-html="open ? '-' :'+' " class="px-2 text-black hover:text-gray-500 font-bold text-3xl"></button>
        </div>
        <div x-show="open" x-cloak class="mx-4 py-4" x-transition>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta repudiandae ut dolores totam nobis molestias!</div>
        <hr>
    </div>
</body>
</html>


나는 당신이 이것을 사랑 바랍니다.
HTML, CSS 및 JavaScript를 사용하는 사용자 지정 캘린더
초보자를 위한 JavaScript 배열

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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