처음부터 Tailwind CSS 탭
17102 단어 tailwindcssalpinejscsswebdev
demo
처음부터 Tailwind CSS 탭
1단계: 환경 설정
2단계: Tailwind CSS로 Tab UI 만들기
3단계: Alpine js를 사용하여 탭 작업
세트 4: 탭으로 색상 변경
1단계: 환경 설정
이 섹션에서는 Tailwind 2V CDN 및 Apline js 2v CDN을 사용합니다. 구성 요소 CDN 모드를 쉽게 테스트할 수 있습니다. 알파인에서는 put put defer가 필요합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Tailwind CSS Tabs Tutorial Example Step By Step From Scratch </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
</body>
</html>
2단계: Tailwind CSS로 Tab UI 만들기
1) 컨테이너 기본 div를 만들고 mx-auto를 설정해야 부트스트랩 컨테이너처럼 작동합니다.
2) 다음으로 원하는 경우 버튼을 사용할 수 있는 태그인 ul 및 li을 만들어야 합니다.
3) flex 클래스에 ul을 주면 li 아래에 있는 모든 항목을 한 행에 설정한 다음 justify-center를 제공하고 flex도 중간에 있는 모든 요소를 가져옵니다. space-x-2 클래스를 사용하십시오. mr-2 각 요소를 넣을 필요가 없는 전체 클래스를 사용하는 것이 좋습니다. 단순히 부모 클래스 공간을 넣으면 됩니다.
4) px-4 및 py-2를 제공하는 탭에 태그를 설정하고 인라인 블록 추가 클래스를 기억하는 색상을 제공합니다.
5) 이제 3개의 div를 만들어 콘텐츠를 넣고 테두리 스타일을 지정합니다.
demo
<div class="container mx-auto">
<ul class="flex justify-center space-x-2">
<li>
<a href="#" class="inline-block px-4 py-2 bg-purple-500 text-white">Tab 1</a>
</li>
<li>
<a href="#" class="inline-block px-4 py-2 bg-purple-500 text-white">Tab 2</a>
</li>
<li>
<a href="#"class="inline-block px-4 py-2 bg-purple-500 text-white">Tab 3</a>
</li>
</ul>
<div class="mt-6 bg-white border p-3">
<div> Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas debitis nam
cupiditate. Explicabo, beatae voluptates aspernatur aliquid quia hic nobis quaerat quae enim quis.
Quas sunt ducimus numquam! Quam, perspiciatis! </div>
<div>Tab 2 Content show Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Voluptatem unde dolor
quaerat et possimus consequatur similique soluta corporis nam consectetur, cum, eveniet sunt, nulla
aliquam rem. Exercitationem corporis eius voluptatibus.</div>
<div>Tab 3 Content show Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet,
distinctio
voluptas quis cum reprehenderit libero ea quidem voluptatem sunt suscipit, excepturi, tenetur
assumenda sequi eius minus temporibus earum odit soluta.</div>
</div>
</div>
3단계: Alpine js를 사용하여 탭 작업
참고: alpine js를 모르거나 잘 모른다면 먼저 이 기사를 읽으십시오.
먼저 x-data로 시작하고 객체를 생성하고 값을 activeTab: 1로 지정해야 합니다. 그런 다음 x-on:click 태그를 지정해야 합니다. JavaScript 이벤트와 같은 이벤트인 다음 값 1,2,3 다음에 각 클릭을 지정합니다. 다음으로 세 개의 div를 제공해야 합니다 x-show . x-show는 display:none; 값이 일치하지 않으면 false의 true 표현식을 전달하고 false를 전달합니다.
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Tailwind CSS Tabs Tutorial Example Step By Step From Scratch </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{ activeTab:1 }" class="container mx-auto">
<ul class="flex justify-center space-x-2 text-white">
<li>
<a href="#" x-on:click="activeTab = 1" class="inline-block px-4 py-2 bg-purple-500">Tab 1</a>
</li>
<li>
<a href="#" x-on:click="activeTab = 2" class="inline-block px-4 py-2 bg-purple-500">Tab 2</a>
</li>
<li>
<a href="#" x-on:click="activeTab = 3" class="inline-block px-4 py-2 bg-purple-500">Tab 3</a>
</li>
</ul>
<div class="mt-6 bg-white border p-3">
<div x-show="activeTab === 1"> Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Quas debitis nam
cupiditate. Explicabo, beatae voluptates aspernatur aliquid quia hic nobis quaerat quae enim quis.
Quas sunt ducimus numquam! Quam, perspiciatis! </div>
<div x-show="activeTab === 2">Tab 2 Content show Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
Voluptatem unde dolor
quaerat et possimus consequatur similique soluta corporis nam consectetur, cum, eveniet sunt, nulla
aliquam rem. Exercitationem corporis eius voluptatibus.</div>
<div x-show="activeTab === 3">Tab 3 Content show Lorem ipsum dolor sit amet consectetur
adipisicing elit. Amet,
distinctio
voluptas quis cum reprehenderit libero ea quidem voluptatem sunt suscipit, excepturi, tenetur
assumenda sequi eius minus temporibus earum odit soluta.</div>
</div>
</div>
</body>
</html>
4단계: 탭으로 색상 변경
탭을 사용하여 색상을 변경하면 클래스를 두 개 더 만들고 순풍 클래스를 제공해야 합니다. 이제 x-bind:class 또는 :class를 바인딩하고 바인드 클래스에 조건을 부여해야 합니다.
<div x-data="{
activeTab:1,
activeClass: 'inline-block px-4 py-2 bg-red-500',
inactiveClass : 'inline-block px-4 py-2 bg-purple-500'
}" class="container mx-auto mt-20">
<ul class="flex justify-center space-x-2 text-white">
<li>
<a href="#" x-on:click="activeTab = 1" :class="activeTab === 1 ? activeClass : inactiveClass">Tab 1</a>
</li>
<li>
<a href="#" x-on:click="activeTab = 2" :class="activeTab === 2 ? activeClass : inactiveClass">Tab 2</a>
</li>
<li>
<a href="#" x-on:click="activeTab = 3" :class="activeTab === 3 ? activeClass : inactiveClass">Tab 3</a>
</li>
</ul>
<div class="mt-6 bg-white border p-3">
<div x-show="activeTab === 1"> Tab 1 Content show Lorem ipsum dolor sit amet consectetur adipisicing
elit.
Quas debitis nam
cupiditate. Explicabo, beatae voluptates aspernatur aliquid quia hic nobis quaerat quae enim quis.
Quas sunt ducimus numquam! Quam, perspiciatis! </div>
<div x-show="activeTab === 2">Tab 2 Content show Lorem ipsum dolor sit amet consectetur,
adipisicing elit.
Voluptatem unde dolor
quaerat et possimus consequatur similique soluta corporis nam consectetur, cum, eveniet sunt, nulla
aliquam rem. Exercitationem corporis eius voluptatibus.</div>
<div x-show="activeTab === 3">Tab 3 Content show Lorem ipsum dolor sit amet consectetur
adipisicing elit. Amet,
distinctio
voluptas quis cum reprehenderit libero ea quidem voluptatem sunt suscipit, excepturi, tenetur
assumenda sequi eius minus temporibus earum odit soluta.</div>
</div>
</div>
</body>
visit my website
또한 읽기
Laravel each() Collection Method Example
3 way to install bootstrap 5 in laravel 8
Laravel php artisan inspire command
Laravel clear cache without using artisan command
Reference
이 문제에 관하여(처음부터 Tailwind CSS 탭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/larainfo/tailwind-css-tabs-from-scratch-4n3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
