Flowbite Admin Dashboard 템플릿 사용하여 어드민 페이지 토대 만들기

https://github.com/themesberg/flowbite-admin-dashboard

GitHub - themesberg/flowbite-admin-dashboard: Free and open-source admin dashboard template built with Tailwind CSS and Flowbite

 

 

Flowbite Admin Dashboard를 기존 웹 어드민 페이지에 적용하고 주요 컴포넌트를 사용하는 방법에 대해 설명해드리겠습니다.

환경 설정

1. Tailwind CSS 설치:
   

   npm install tailwindcss

   
   
2. Flowbite 설치:
   

   npm install flowbite

   
   
   
3. tailwind.config.js 파일 설정:
   

   module.exports = {
     content: [
       "./src/**/*.{html,js}",
       "./node_modules/flowbite/**/*.js"// Flowbite 컴포넌트를 위해 추가
     ],
     theme: {
       extend: {},
     },
     plugins: [
       require('flowbite/plugin') // Flowbite 플러그인 추가
     ],
   }

   
   
   
4. CSS 파일에 Tailwind 지시어 추가:
   

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

   
   
   

주요 컴포넌트 사용 방법

Input 필드

기본 입력 필드:

<input type="text" id="default-input" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Default input">

Table

기본 테이블:

<div class="relative overflow-x-auto">
    <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
            <tr>
                <th scope="col" class="px-6 py-3">Product name</th>
                <th scope="col" class="px-6 py-3">Color</th>
                <th scope="col" class="px-6 py-3">Category</th>
                <th scope="col" class="px-6 py-3">Price</th>
            </tr>
        </thead>
        <tbody>
            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
                <th scope="row" class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                    Apple MacBook Pro 17"
                </th>
                <td class="px-6 py-4">Silver</td>
                <td class="px-6 py-4">Laptop</td>
                <td class="px-6 py-4">$2999</td>
            </tr>
            <!-- 추가 행 -->
        </tbody>
    </table>
</div>

 

Button

기본 버튼:

<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-sm px-5 py-2.5 mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Default</button>

 

대시보드 레이아웃 적용

Flowbite Admin Dashboard의 레이아웃을 적용하려면:

1. 사이드바 네비게이션:
   

   <aside id="logo-sidebar" class="fixed top-0 left-0 z-40 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
      <!-- 사이드바 내용 -->
   </aside>

   
   
   
2. 메인 콘텐츠 영역:
   

   <div class="p-4 sm:ml-64">
      <div class="p-4 border-2 border-gray-200 border-dashed rounded-lg dark:border-gray-700 mt-14">
         <!-- 대시보드 콘텐츠 -->
      </div>
   </div>

   
   
   
3. 상단 네비게이션 바:
   

   <nav class="fixed top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
      <!-- 네비게이션 바 내용 -->
   </nav>

   
   
   

이러한 방식으로 Flowbite Admin Dashboard의 컴포넌트와 레이아웃을 기존 웹 어드민 페이지에 통합할 수 있습니다. 필요에 따라 클래스를 조정하고 컴포넌트를 선택적으로 사용하여 원하는 디자인을 구현하세요.