Tailwind CSS로 사이드바 만들기
6723 단어 webdevtailwindcsscssprogramming
Tailwind를 사용하여 사이드바를 만드는 방법을 살펴보겠습니다.
다른 모든 태그가 포함될 첫 번째 태그는
div
이며 여기에 클래스를 작성할 것입니다.min-h-0 (min-height: 0px)
flex-1 (flex: 1 1 0%)
overflow-hidden (overflow: hidden)
<div class="min-h-0 flex-1 flex overflow-hidden">
....
</div>
첫 번째 태그
div
내부의 두 번째 태그는 다음 클래스가 포함된 nav
입니다.hidden lg:block
(모바일에서 사이드바를 숨기고 더 큰 화면에서 볼 수 있도록) flex-shrink-0
(플렉스 아이템이 수축되는 것을 방지하기 위해) bg-gray-800 (background-color: rgb(31 41 55))
overflow-y-auto
(필요한 경우 수직 스크롤을 허용하기 위해)<div class=" min-h-0 flex-1 flex overflow-hidden">
<nav aria-label="Sidebar" class="narrow-sidebar hidden lg:block lg:flex-shrink-0 lg:bg-gray-800 lg:overflow-y-auto">
....
</nav>
</div>
nav
안에 있는 세 번째 태그는 다음 클래스가 있는 또 다른 div
태그입니다.relative (position: relative)
w-20 (width: 5rem; /* 80px */)
flex (display: flex)
space-y-16 (margin-top: 4rem; /* 64px */)
flex-col (to position flex items vertically)
p-3 (padding: 0.75rem; /* 12px */)
<div class=" min-h-0 flex-1 flex overflow-hidden">
<nav aria-label="Sidebar" class=" hidden lg:block flex-shrink-0 bg-gray-800 overflow-y-auto">
<div class="relative w-20 flex space-y-16 flex-col p-3">
....
</div>
</nav>
</div>
이제 아이콘과 이름을 추가하기만 하면 됩니다. 이 게시물에서는 기본 예제를 보여주기 위해 세 개의 아이콘만 있는 사이드바를 만들었습니다. 주어진 예제의 최종 코드는 다음과 같습니다.
<div class=" min-h-0 flex-1 flex overflow-hidden">
<nav aria-label="Sidebar" class="hidden lg:block flex-shrink-0 bg-gray-800 overflow-y-auto">
<div class="relative w-20 flex space-y-16 flex-col p-3">
<a href="#" class="text-gray-400 hover:text-red-700">
<div class="flex-shrink-0 inline-flex items-center justify-center w-14">
<i class="fa fa-house"></i>
</div>
<div class="text-center text-xs font-normal ">Home</div>
</a>
<a href="#" class="text-gray-400 hover:text-red-700">
<div class="flex-shrink-0 inline-flex items-center justify-center w-14">
<i class="fa fa-cog"></i>
</div>
<div class="text-center text-xs font-normal ">Settings</div>
</a>
<a href="#" class="text-gray-400 hover:text-red-700">
<div class="flex-shrink-0 inline-flex items-center justify-center w-14">
<i class="fa fa-envelope"></i>
</div>
<div class="text-center text-xs font-normal ">Messages</div>
</a>
</div>
</nav>
</div>
보시다시피 Tailwind를 사용한다는 것은 필요한 모든 코드를 html로 작성하는 것을 의미합니다. 최종 결과는 CSS로 작성된 것과 동일합니다.
최종 사이드바는 다음과 같습니다.
Reference
이 문제에 관하여(Tailwind CSS로 사이드바 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/jolamemushaj/building-a-sidebar-with-tailwind-css-4kn4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)