이 프로젝트는 Flowbite의 구성 요소로 구축되었으며 차트, 테이블, 위젯, CRUD 레이아웃, 모달, 서랍 등을 갖춘 유틸리티 우선 Tailwind CSS 프레임워크를 기반으로 구축된 무료 오픈 소스 UI 관리 대시보드 템플릿입니다.
이 관리 대시보드는 Tailwind CSS 및 Flowbite를 포함한 오픈 소스 영역의 최신 UI/UX 개발 기술을 사용하여 프로젝트용 애플리케이션 구축을 빠르게 시작하는 데 도움이 됩니다.
탐색 모음, 모달, 서랍 및 도구 설명과 같은 대화형 구성 요소는 모두 Flowbite라는 인기 있는 오픈 소스 구성 요소 라이브러리를 기반으로 하며, 이를 통해 완전한 기능을 갖춘 관리 대시보드 내에서 보다 복잡한 페이지 및 위젯 세트를 생성하여 이러한 요소를 사용할 수 있습니다. 주형.
모든 페이지, 위젯 및 구성 요소는 Tailwind CSS의 유틸리티 우선 클래스만을 기반으로 하며 템플릿 경로를 기반으로 모든 클래스를 자동으로 제거하여 최신 v3.x
기술과 호환됩니다.
차트 위젯, 테이블, 날짜 선택기 및 통계로 가득 찬 대시보드 홈페이지의 두 가지 다른 레이아웃을 포함하는 15개의 고급 예제 페이지로 시작하고 제품, 사용자, 설정 페이지, 로그인 및 등록을 위한 인증 페이지, 심지어는 2개의 CRUD 레이아웃 페이지도 포함합니다. 사용자 정의 404 및 500 오류 페이지.
이 관리 대시보드에는 Flowbite뿐만 아니라 Tailwind CSS 클래스에 맞게 맞춤화되고 Flowbite 디자인 시스템을 기반으로 설계된 ApexCharts와 같은 다른 타사 라이브러리의 많은 고급 구성 요소가 포함되어 있습니다.
이 프로젝트를 사용하려면 이 대시보드를 구축하는 데 사용한 구성 요소 라이브러리도 연구하는 것이 좋습니다. 해당 라이브러리의 더 많은 구성 요소를 사용하여 여기에 이미 코딩한 예제를 향상시킬 수 있기 때문입니다.
이 제품은 다음과 같이 널리 사용되는 기술을 사용하여 제작되었습니다.
Tailwind CSS: tailwindcss.com
Flowbite: flowbite.com
휴고 gohugo.io
웹팩 webpack.js.org
Flowbite 관리 대시보드
자바스크립트 프레임워크
백엔드 프레임워크
Flowbite로 제작
Tailwind CSS 유틸리티 클래스
예시 페이지 15개
고급 구성요소
Flowbite 문서
작업흐름
목차
데모 페이지
빠른 시작
파일 구조
브라우저 지원
자원
보고 문제
기술 지원 또는 질문
라이선스
유용한 링크
저자
이 저장소를 복제하거나 ZIP 파일을 다운로드하세요.
Node.js와 NPM이 설치되어 있는지 확인하세요.
package.json
파일에서 프로젝트 종속성을 설치합니다.
npm install
다음 명령을 실행하여 localhost:1313
에 로컬 서버를 만듭니다.
npm run start
다음을 실행하여 프로젝트를 빌드하고 public/
폴더 내에서 배포 파일을 가져올 수도 있습니다.
npm run build
기본 HUGO 구성을 선택하여 프로젝트를 Vercel에 즉시 업로드할 수 있지만 React.js, Vue, Nuxt.js, Next.js 또는 백엔드 프레임워크인지 여부에 관계없이 자체 기술 스택에 따라 레이아웃을 복사할 수도 있습니다. 자신의 기술 스택 내부에 있는 이 프로젝트에서.
다음은 Flowbite 및 Tailwind CSS와 호환되는 기술 및 가이드 목록입니다.
멋진 오픈 소스 커뮤니티는 또한 React, Vue, Svelte 및 Angular를 위한 다음과 같은 독립 실행형 라이브러리를 구축하고 현재 유지 관리하고 있습니다.
Flowbite 반응 라이브러리
Flowbite Vue 라이브러리
Flowbite Svelte 라이브러리
Flowbite 각도 라이브러리
우리는 또한 다음 프런트엔드 프레임워크 및 라이브러리에 대한 통합 가이드를 작성했습니다.
React 가이드를 사용한 Flowbite
Next.js 가이드를 사용한 Flowbite
Vue 가이드가 포함된 Flowbite
Nuxt.js 가이드를 사용한 Flowbite
Svelte 가이드가 있는 Flowbite
Flowbite는 바닐라 JavaScript를 사용하기 때문에 대부분의 백엔드 프레임워크와 훌륭하게 통합됩니다.
Laravel과 함께 Flowbite 사용하기
Ruby on Rails 7에서 Flowbite 사용하기
Django에서 Flowbite 사용하기
플라스크와 함께 Flowbite 사용하기
다운로드 내에서 다음 디렉터리와 파일을 찾을 수 있습니다.
Flowbite Admin Dashboard . ├── LICENSE ├── README.md ├── config.yml ├── content ├── data ├── layouts ├── node_modules ├── package-lock.json ├── package.json ├── postcss.config.js ├── resources ├── src ├── static ├── tailwind.config.js ├── webpack.config.js └── yarn.lock
현재 우리는 공식적으로 다음 브라우저의 마지막 두 버전을 지원하는 것을 목표로 하고 있습니다.
실시간 미리보기: https://flowbite-admin-dashboard.vercel.app/
Flowbite 문서: https://flowbite.com/docs/getting-started/introduction/
Tailwind CSS 문서: https://tailwindcss.com/
라이센스 계약: https://flowbite.com/docs/getting-started/license/
문제: Github 문제 페이지
우리는 GitHub Issues를 Flowbite 관리 대시보드의 공식 버그 추적기로 사용합니다. 다음은 문제를 보고하려는 사용자를 위한 몇 가지 조언입니다.
최신 버전의 Flowbite Admin Dashboard를 사용하고 있는지 확인하세요. GitHub 릴리스 페이지의 대시보드에서 CHANGELOG를 확인하세요.
문제에 대해 재현 가능한 단계를 제공하면 문제를 해결하는 데 걸리는 시간이 단축됩니다.
일부 문제는 브라우저별로 다를 수 있으므로 문제가 발생한 브라우저를 지정하면 도움이 될 수 있습니다.
질문이 있거나 제품 통합에 도움이 필요한 경우 문제를 열지 말고 당사에 문의하십시오.
저작권 2019-2023 Bergside Inc. (https://flowbite.com)
MIT 라이선스에 따른 오픈 소스
Flowbite 라이브러리 - Tailwind CSS로 구축된 오픈 소스 구성요소
Flowbite Figma - Figma용으로 구축된 디자인 시스템
Flowbite Blocks - 웹사이트 및 애플리케이션용 빌딩 섹션
Flowbite Pro - 후자 세 가지 오픈 소스 버전의 대규모 컬렉션
졸탄 쇼기에니
로버트 타니슬라프