flowbite astro admin dashboard
1.0.0
이 프로젝트는 Flowbite의 구성 요소로 구축되었으며 차트, 테이블, 위젯, CRUD 레이아웃, 모달, 서랍 등을 갖춘 유틸리티 우선 Tailwind CSS 프레임워크를 기반으로 구축된 무료 오픈 소스 UI 관리 대시보드 템플릿입니다.
이 관리 대시보드는 Tailwind CSS 및 Flowbite를 포함한 오픈 소스 영역의 최신 UI/UX 개발 기술을 사용하여 프로젝트용 애플리케이션 구축을 빠르게 시작하는 데 도움이 됩니다.
| 계기반 | 스택 레이아웃 | 제품(CRUD) |
|---|---|---|
| 사용자(CRUD) | 설정 | 가격 페이지 |
|---|---|---|
| 로그인 페이지 | 등록 페이지 | 비밀번호 재설정 |
|---|---|---|
| 비밀번호를 잊으셨나요? | 프로필 잠금 | 유지보수 페이지 |
|---|---|---|
| 404 찾을 수 없음 | 500 서버 오류 | 운동장 |
|---|---|---|
탐색 모음, 모달, 서랍 및 도구 설명과 같은 대화형 구성 요소는 모두 Flowbite라는 인기 있는 오픈 소스 구성 요소 라이브러리를 기반으로 하며, 이를 통해 완전한 기능을 갖춘 관리 대시보드 내에서 보다 복잡한 페이지 및 위젯 세트를 생성하여 이러한 요소를 사용할 수 있습니다. 주형.
모든 페이지, 위젯 및 구성 요소는 Tailwind CSS의 유틸리티 우선 클래스만을 기반으로 하며 템플릿 경로를 기반으로 모든 클래스를 자동으로 제거하여 최신 v3.x 기술과 호환됩니다.
차트 위젯, 테이블, 날짜 선택기 및 통계로 가득 찬 대시보드 홈페이지의 두 가지 다른 레이아웃을 포함하는 15개의 고급 예제 페이지로 시작하고 제품, 사용자, 설정 페이지, 로그인 및 등록을 위한 인증 페이지, 심지어는 2개의 CRUD 레이아웃 페이지도 포함합니다. 사용자 정의 404 및 500 오류 페이지.
이 관리 대시보드에는 Flowbite뿐만 아니라 Tailwind CSS 클래스에 맞게 맞춤화되고 Flowbite 디자인 시스템을 기반으로 설계된 ApexCharts와 같은 다른 타사 라이브러리의 많은 고급 구성 요소가 포함되어 있습니다.
이 프로젝트를 사용하려면 이 대시보드를 구축하는 데 사용한 구성 요소 라이브러리도 연구하는 것이 좋습니다. 해당 라이브러리의 더 많은 구성 요소를 사용하여 여기에 이미 코딩한 예제를 향상시킬 수 있기 때문입니다.
이 제품은 다음과 같이 널리 사용되는 기술을 사용하여 제작되었습니다.
package.json 파일에서 프로젝트 종속성을 설치합니다. pnpm install
# or
npm install
# or
yarnPNPM은 설명을 위해 선택한 패키지 관리자이지만 원하는 것을 사용할 수 있습니다.
localhost:2121 에서 Astro 로컬 개발 서버를 시작합니다. pnpm run dev 다음을 실행하여 프로젝트를 빌드하고 dist/ 폴더 내에서 배포 파일을 가져올 수도 있습니다.
pnpm run build그런 다음 로컬 웹 서버를 사용하여 생성된 빌드를 미리 볼 수 있습니다.
pnpm run preview배포의 경우 대상을 연결할 수 있는 GitHub 워크플로를 참조하세요(GitHub 페이지에 대해 사전 구성됨). docs.astro.build/en/guides/deploy를 참조하세요.
웹사이트는 정적 배포용으로 구성되어 있지만 ./astro.config.mjs 에서 output: "server" 주석을 제거하면 서버측 렌더링 으로 전환할 수 있습니다.
이 저장소를 복제하면 다음과 같은 단순화된 구조를 볼 수 있습니다.
?
├── ? data
│ └── ** / * .json # Satic data sources for REST etc.
│
└── src
│
├── ? app
│ └── ** / * .astro # Application-wide components
│
├── ? assets
│ └── ** / * .{svg,…} # Transformable assets
│
├── ? components
│ └── ** / * .astro # Simple, atomic UI elements
│
├── lib
│ └── ** / * .ts # Utilities (Databases, APIs…)
│
├── ? modules
│ └── ** / * .astro # Complex views made of elements
│
├── ? pages
│ ├── ** / * .astro # File-based client routes
│ │
│ └── api
│ └── [...entities].ts # Catch-all endpoint for CRUD ops.
│
├── services
│ └── * .ts # Server-side CRUD operations
│
└── ? types
└── * .ts # Data entities typings
빠른 온보딩 과 개발자 경험을 위해 노력을 기울였습니다.
이 프로젝트는 TypeScript, Astro, Tailwind 및 VS Code를 광범위하게 지원합니다.
이는 합리적인 기본값, 약간의 의견, 그리고 함께 잘 작동할 수 있는 몇 가지 요령으로 구성됩니다.
astro-eslint-parser + eslint-plugin-astroprettier-plugin-astro 기능( astro 와 번들로 제공)자신의 필요에 맞게 해당 설정을 해킹해 보세요.
현재 우리는 공식적으로 다음 브라우저의 마지막 두 버전을 지원하는 것을 목표로 하고 있습니다.
실시간 미리보기: https://themesberg.github.io/flowbite-astro-admin-dashboard/
Flowbite 문서: https://flowbite.com/docs/getting-started/introduction/
Tailwind CSS 문서: https://tailwindcss.com/
라이센스 계약: https://flowbite.com/docs/getting-started/license/
문제: Github 문제 페이지
Flowbite 및 Tailwind CSS와 호환되는 기술 및 가이드 목록은 다음과 같습니다.
멋진 오픈 소스 커뮤니티는 또한 React, Vue, Svelte 및 Angular를 위한 다음과 같은 독립 실행형 라이브러리를 구축하고 현재 유지 관리하고 있습니다.
우리는 또한 다음 프런트엔드 프레임워크 및 라이브러리에 대한 통합 가이드를 작성했습니다.
Flowbite는 바닐라 JavaScript를 사용하기 때문에 대부분의 백엔드 프레임워크와 훌륭하게 통합됩니다.
우리는 GitHub Issues를 Flowbite 관리 대시보드의 공식 버그 추적기로 사용합니다. 다음은 문제를 보고하려는 사용자를 위한 몇 가지 조언입니다.
질문이 있거나 제품 통합에 도움이 필요한 경우 문제를 열지 말고 당사에 문의하십시오.
