Windster-Tailwind CSS 관리 대시보드 인터페이스[MIT 라이센스]

8102 단어 tailwindcssshowdevopensourcewebdev

Windster - 순풍 CSS 대시보드



Windster는 무료 소스를 제공하는 Tailwind CSS 관리 대시보드 레이아웃으로 응답성 사이드바 레이아웃, 검증 페이지, 도표, 사용자, 제품 페이지와 수백 개의 Flowbite library 기반의Tailwind CSS 구성 요소, 예를 들어 단추, 하단 목록, 네비게이션 표시줄, 날짜 선택기 등을 갖추고 있다.

순풍 CSS로 구성


이 프로젝트의 페이지는 Tailwind CS의 유틸리티 클래스로만 구성되어 있으며, Windster를 계속 사용할 수 있습니다. 다른 Tailwind CSS 프로젝트를 사용하는 것과 같이 표준적인 Post CSS 설정 방법과 추천하는 제거 클래스를 사용하기 때문입니다.

Flowbite의 성분


윈스터는 버튼, 경보, 레이아웃, 드롭다운 메뉴, 내비게이션 표시줄 등을 포함한 open source Tailwind CSS components from Flowbite도 사용했다.이 구성 요소들은 Tailwind CSS 유틸리티 클래스를 사용하기 때문에 프로젝트에 추가 CSS를 포함할 필요가 없습니다.

예제 페이지


Windster의 오픈 소스 버전에는 마스터 대시보드 레이아웃, 로그인 페이지, 등록 페이지, 사용자 페이지와 제품 페이지 등 5개의 응용 프로그램 UI 예제 페이지가 있으며 CRUD 작업의 모듈도 포함되어 있습니다.

우과 정적 사이트 생성기


HUGO static site generator 시스템을 사용하여 HTML 템플릿을 구축하고 제품 또는 사용자 페이지와 같은 특정 페이지의 데이터 소스로 JSON 파일을 사용하기로 결정했습니다.물론 HTML 템플릿과 Webpack/POST CSS 프로필을 추출하여 기술 스택에 맞게 만들 수 있습니다.

웹 패키지 모듈 바인더


Windster는 Webpack을 사용하여 자산을 묶고 변화를 관찰하며 HUGO와 Post CSS의 컴파일 조작을 연결시킨다.필요에 따라 패키지 구성 파일을 사용자 정의할 수 있습니다.우리는 또한 CSS 축소 기능을 포함할 때 생산 건설을 포함한다.

작업흐름


이 프로젝트에서는 다음 기술 스택을 사용합니다.
  • Tailwind CSS-유틸리티 우선 CSS 프레임워크tailwindcss.com)
  • Flowbite-순풍 CSS용 구성 요소 라이브러리flowbite.com
  • 우과-정적 사이트 생성기gohugo.io
  • 패키지 - 모듈 바인딩기webpack.js.org

    • 카탈로그

  • Demo
  • Quick Start
  • Documentation
  • Folder Structure
  • Resources
  • Upgrade to PRO
  • Reporting Issues
  • Technical Support or Questions
  • Licensing
  • Useful Links

    • 데모


    계기판
    사용자


    생산품
    로그인


    등기부
    구성 요소

  • Live Preview
  • Download from Themesberg

    • 빠른 시작

  • Themesberg에서 이 저장소를 다운로드하거나 복제
  • 다운로드 항목의 zip
  • 및 Node.js가 설치되어 있는지 확인합니다.
  • 프로젝트 종속성 설치를 위해 다음 명령을 실행합니다.
    • npm install
  • 개발 서버를 실행합니다.
    • npm run start

    우과 건설 프로젝트


    최종 프로젝트 파일을 생성하려면 다음 명령을 실행합니다.
    npm run build
    이 파일은 .build/ 폴더에서 사용할 수 있습니다.

    문서


    Windster는 우선Tailwind CS를 기반으로 하는 프로젝트이지만, Flowbite를 사용하여 더 많은 구성 요소를 지원하고, HUGO는 정적 HTML 파일과 자산 귀속에 사용되는 웹 패키지를 생성합니다.

  • (주요 CSS 프레임워크)

  • Tailwind CSS(순풍 CSS 구성 요소)

  • Flowbite(정적 사이트 생성기)

  • HUGO(모듈 패키지)

    • 웹 패키지 폴더 구조


    다운로드 컨텐트에서 다음 디렉토리와 파일을 찾을 수 있습니다.
    Windster Tailwind CSS Dashboard
.
├── LICENSE.md
├── README.md
├── _gh_pages
├── config.yml
├── content
├── data
├── layouts
├── node_modules
├── package-lock.json
├── package.json
├── postcss.config.js
├── resources
├── src
├── static
├── syntax.css
├── tailwind.config.js
├── temp
└── webpack.config.js

    리소스

  • 현장 프레젠테이션:
  • 다운로드: https://demo.themesberg.com/windster/
  • 라이센스 계약: https://themesberg.com/product/tailwind-css/dashboard-windster
  • 브래킷: https://themesberg.com/licensing
  • 질문: https://themesberg.com/contact

    • 질문 페이지 Professional로 업그레이드


    Windster를 사용하고 페이지 수를 늘리고 더 높은 레이아웃, 판넬 페이지, 메일 프로그램, 4배 이상의 페이지를 방문하려면 보고 Windster Pro 보십시오.

    두 버전 간의 차이 문제 보고


    GitHub 문제를 Windster의 공식 버그 추적기로 사용합니다.다음은 문제를 보고하려는 사용자에 대한 권장 사항입니다.
  • Windster의 최신 버전을 사용하고 있는지 확인합니다.
  • 문제를 재현할 수 있는 단계를 제공하여 복구 시간을 단축합니다.
  • 일부 문제는 브라우저에 특정될 수 있기 때문에 어떤 브라우저에서 발생하는 문제를 지정하는 것이 도움이 될 수 있습니다.

    • 기술 지원 또는 문제


    문제가 있거나 통합에 도움이 필요한 경우 문제를 여는 것이 아니라

    연락처 허가하다

  • 판권 소유 2021 Themesberg(Crafty 드워프 유한책임회사)
    • Themesberghttps://themesberg.com(마성이공대학 허가증)

    라이선스 유용한 링크

  • Tailwind CSS themes
    • js 코드 혼동 방지ast 사용
    [FLUTTER] StatefulWidget()

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage