개발자 보기: Tailwind CSS를 사용하여 팝오버 구성 요소 모음을 만들었습니다.

안녕하세요 개발자 👋

나와 내 친구들은 유틸리티 우선 Tailwind CSS 프레임워크 클래스를 사용하고 Flowbite 구성 요소 라이브러리와 JavaScript 통합을 구축하여 collection of popover components을 구축했습니다.

팝오버는 기본적으로 단락, 사용자 프로필 정보 등과 같은 추가 정보를 표시할 수 있는 트리거 요소 위로 마우스를 가져가거나 클릭할 때 표시되는 팝업 상자입니다.

다음은 팝오버 구성요소 중 하나의 미리보기입니다.



이 기사에서는 팝오버 예제 모음과 이를 프로젝트에서 사용하는 방법을 보여줍니다.

시작하기

먼저 Tailwind CSS와 Flowbite가 프로젝트에 설치되어 있는지 확인해야 합니다.

Tailwind CSS 설치

quickstart guide을 따르거나 다음 단계에 따라 Tailwind CSS를 설치할 수 있습니다.

NPM을 통해 설치tailwindcss:

npm install -D tailwindcss
npx tailwindcss init

tailwind.config.js 파일 내에서 템플릿 경로를 구성합니다.

/** @type {import('tailwindcss').Config} */ 
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

새src/input.css 파일을 만들고 다음 콘텐츠를 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS의 변경 사항을 컴파일하고 확인합니다.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

엄청난! 이제 Tailwind CSS를 설치했으므로 Flowbite도 설치하여 진행할 수 있습니다.

Flowbite 설치

다음 명령을 실행하여 NPM을 사용하여 Flowbite를 종속 항목으로 설치합니다.

npm i flowbite

tailwind.config.js 파일 내 플러그인으로 Flowbite가 필요합니다.

module.exports = {

    plugins: [
        require('flowbite/plugin')
    ]

}

대화형 요소가 작동하도록 기본 JavaScript 파일을 포함합니다.

<script src="../path/to/flowbite/dist/flowbite.js"></script>

content 파일의 대화형 요소에서 클래스를 적용하려면 자신의 데이터flowbite에 추가로 tailwind.config.js를 추가해야 합니다.

module.exports = {

    content: [
        "./node_modules/flowbite/**/*.js"
    ]

}

Webpack 또는 다른 번들러를 사용하는 경우 다음과 같이 가져올 수도 있습니다.

import 'flowbite';

CDN을 통해 포함

FlowBite 작업을 시작하는 가장 빠른 방법은 CDN을 통해 CSS와 JavaScript를 프로젝트에 포함하는 것입니다.
head 태그 내에 다음과 같은 축소된 스타일시트가 필요합니다.

<link rel="stylesheet" href="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.min.css" />

그리고 body 요소가 끝나기 전에 다음 JavaScript 파일을 포함합니다.

<script src="https://unpkg.com/flowbite@{{< current_version >}}/dist/flowbite.js"></script>

대박! 이제 프로젝트에 Tailwind CSS와 Flowbite가 모두 설치되었으므로 Popover component collection을 바로 사용할 수 있습니다.

Tailwind CSS 팝오버

elementId가 팝오버 구성요소의 id인 트리거 요소에 데이터 속성data-popover-target="{elementId}"을 추가하여 새 팝오버를 초기화합니다.



소스 코드:

<button data-popover-target="popover-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default popover</button>
<div id="popover-default" role="tooltip" class="inline-block absolute invisible z-10 w-64 text-sm font-light text-gray-500 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 transition-opacity duration-300 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
    <div class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
        <h3 class="font-semibold text-gray-900 dark:text-white">Popover title</h3>
    </div>
    <div class="py-2 px-3">
        <p>And here's some amazing content. It's very engaging. Right?</p>
    </div>
    <div data-popper-arrow></div>
</div>

다음은 설명 대신 사용자 프로필에 대한 정보를 사용할 수 있는 또 다른 예입니다.



소스 코드:

<button data-popover-target="popover-user-profile" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">User profile</button>
<div id="popover-user-profile" role="tooltip" class="inline-block absolute invisible z-10 w-64 text-sm font-light text-gray-500 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 transition-opacity duration-300 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600">
    <div class="p-3">
        <div class="flex justify-between items-center mb-2">
            <a href="#">
                <img class="w-10 h-10 rounded-full" src="/docs/images/people/profile-picture-1.jpg" alt="Jese Leos">
            </a>
            <div>
                <button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-xs px-3 py-1.5 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Follow</button>
            </div>
        </div>
        <p class="text-base font-semibold leading-none text-gray-900 dark:text-white">
            <a href="#">Jese Leos</a>
        </p>
        <p class="mb-3 text-sm font-normal">
            <a href="#" class="hover:underline">@jeseleos</a>
        </p>
        <p class="mb-4 text-sm font-light">Open-source contributor. Building <a href="#" class="text-blue-600 dark:text-blue-500 hover:underline">flowbite.com</a>.</p>
        <ul class="flex text-sm font-light">
            <li class="mr-2">
                <a href="#" class="hover:underline">
                    <span class="font-semibold text-gray-900 dark:text-white">799</span>
                    <spa>Following</span>
                </a>
            </li>
            <li>
                <a href="#" class="hover:underline">
                    <span class="font-semibold text-gray-900 dark:text-white">3,758</span>
                    <span>Followers</span>
                </a>
            </li>
        </ul>
    </div>
    <div data-popper-arrow></div>
</div>

다음은 Wikipedia 팝오버와 유사한 설명 및 이미지를 표시할 수 있는 예입니다.



소스 코드:

<p class="font-light text-gray-500 dark:text-gray-400">Due to its central geographic location in Southern Europe, <a href="#" class="text-blue-600 underline dark:text-blue-500 hover:no-underline" data-popover-target="popover-image">Italy</a> has historically been home to myriad peoples and cultures. In addition to the various ancient peoples dispersed throughout what is now modern-day Italy, the most predominant being the Indo-European Italic peoples who gave the peninsula its name, beginning from the classical era, Phoenicians and Carthaginians founded colonies mostly in insular Italy</p>
<div id="popover-image" role="tooltip" class="inline-block absolute invisible z-10 w-96 text-sm font-light text-gray-500 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 transition-opacity duration-300 dark:text-gray-400 dark:bg-gray-800 dark:border-gray-600">
    <div class="grid grid-cols-5">
        <div class="col-span-3 p-3">
            <div class="space-y-2">
                <h3 class="font-semibold text-gray-900 dark:text-white">About Italy</h3>
                <p>Italy is located in the middle of the Mediterranean Sea, in Southern Europe it is also considered part of Western Europe. A unitary parliamentary republic with Rome as its capital and largest city.</p>
                <a href="#" class="flex items-center font-medium text-blue-600 dark:text-blue-500 dark:hover:text-blue-600 hover:text-blue-700">Read more <svg class="ml-1 w-4 h-4" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg></a>
            </div>
        </div>
        <img src="/docs/images/popovers/italy.png" class="col-span-2 h-full" alt="Italy map" />
    </div>
    <div data-popper-arrow></div>
</div>

놓기

data-popover-placement="{top|right|bottom"left}" 데이터 속성과 해당 값을 사용하여 트리거 요소를 기준으로 팝오버 구성요소의 위치를 ​​설정할 수도 있습니다.



소스 코드:

<button data-popover-target="popover-top" data-popover-placement="top" type="button" class="text-white mb-3 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Top popover</button>
<div id="popover-top" role="tooltip" class="inline-block absolute invisible z-10 w-64 text-sm font-light text-gray-500 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 transition-opacity duration-300 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(59.5px, 106px, 0px);">
    <div class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
        <h3 class="font-semibold text-gray-900 dark:text-white">Popover top</h3>
    </div>
    <div class="py-2 px-3">
        <p>And here's some amazing content. It's very engaging. Right?</p>
    </div>
    <div data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(123px, 0px, 0px);"></div>
</div>
<button data-popover-target="popover-right" data-popover-placement="right" type="button" class="text-white mb-3 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Right popover</button>
<div id="popover-right" role="tooltip" class="inline-block absolute invisible z-10 w-64 text-sm font-light text-gray-500 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 transition-opacity duration-300 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="right" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(409.5px, 29px, 0px);">
    <div class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
        <h3 class="font-semibold text-gray-900 dark:text-white">Popover right</h3>
    </div>
    <div class="py-2 px-3">
        <p>And here's some amazing content. It's very engaging. Right?</p>
    </div>
    <div data-popper-arrow="" style="position: absolute; top: 0px; transform: translate3d(0px, 85px, 0px);"></div>
</div>
<button data-popover-target="popover-bottom" data-popover-placement="bottom" type="button" class="text-white mb-3 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Bottom popover</button>
<div id="popover-bottom" role="tooltip" class="inline-block absolute invisible z-10 w-64 text-sm font-light text-gray-500 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 transition-opacity duration-300 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="top" style="position: absolute; inset: auto auto 0px 0px; margin: 0px; transform: translate3d(361px, 106px, 0px);">
    <div class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
        <h3 class="font-semibold text-gray-900 dark:text-white">Popover bottom</h3>
    </div>
    <div class="py-2 px-3">
        <p>And here's some amazing content. It's very engaging. Right?</p>
    </div>
    <div data-popper-arrow="" style="position: absolute; left: 0px; transform: translate3d(123px, 0px, 0px);"></div>
</div>
<button data-popover-target="popover-left" data-popover-placement="left" type="button" class="text-white mb-3 bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Left popover</button>
<div id="popover-left" role="tooltip" class="inline-block absolute invisible z-10 w-64 text-sm font-light text-gray-500 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 transition-opacity duration-300 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="left" style="position: absolute; inset: 0px 0px auto auto; margin: 0px; transform: translate3d(-261px, 29px, 0px);">
    <div class="py-2 px-3 bg-gray-100 rounded-t-lg border-b border-gray-200 dark:border-gray-600 dark:bg-gray-700">
        <h3 class="font-semibold text-gray-900 dark:text-white">Popover left</h3>
    </div>
    <div class="py-2 px-3">
        <p>And here's some amazing content. It's very engaging. Right?</p>
    </div>
    <div data-popper-arrow="" style="position: absolute; top: 0px; transform: translate3d(0px, 85px, 0px);"></div>
</div>

결론

Flowbite 라이브러리 자체에서 Tailwind CSS Popover Component의 전체 설명서와 예제를 확인할 수 있습니다.



학점:

Tailwind CSS

Flowbite