windmill dashboard nextjs typescript 다운로드 windmill dashboard nextjs typescript 소스 코드 다운로드

windmill dashboard nextjs typescript

AI 소스 코드

1.0.0

다운로드

Windmill Dashboard Next.js TypeScript

@estevanmaito의 원래 프로젝트를 참조하십시오

다른 기고자의 도움으로 :

@Neutralboy의 TypeScript 버전
@Aldhanekaa의 Nextjs 버전

라이브를 본다

이것은 템플릿이 아닙니다. 이것은 React 위에 구축 된 완전한 응용 프로그램으로, 모든 작은 세부 사항을 처리하여 데이터를 가져와 공급하기 만하면됩니다.

접근성은 내 프로젝트에서 우선 순위이며, 당신도 당신에게 있어야한다고 생각합니다. 그래서 이것은 실제 스크린 리더, 포커스 트랩 및 키보드 내비게이션을 어디에서나 사용할 수 있습니다.

? 특징

? 통과 액세스 가능한 (스크린 리더를 사용하여 개발)
? 다크 테마 활성화 (테마를 기반으로 다른 이미지로드)
? 다중 (맞춤형) 구성 요소
⚡ 코드 분할
테일 윈드 CSS
풍차 반응 UI
영웅
Chart.js

문서

일반 구성 요소

Windmill Dashboard React는 Windmill React UI 위에 구축되었습니다. 모든 작은 구성 요소에 대한 문서를 찾을 수 있습니다.

보일러 플레이트 예제

모든 구성 요소와 컨테이너는 폴더 예에 저장됩니다

라우팅

기본 리디렉션 변경 / 또는 File Next.config.js에서 홈을 누르면 home 누르십시오.

  async redirects ( ) {
    return [
      {
        source : '/' ,
        destination : '/example/login' ,
        permanent : false ,
      } ,
    ]
  }

사이드 바 경로

사이드 바 메뉴를 구성하려면 파일 (loutes/sidebar.tsx)을 참조하십시오.

이것들은 사이드 바에 표시되는 경로입니다. 그들은 세 가지 속성을 기대합니다.

path : 목적지;
name : 표시 될 이름;
icon : 항목을 설명하는 아이콘

페이지 옵션과 같이 드롭 다운으로 사용되는 항목은 path 필요하지 않지만 path 와 name 있는 객체 routes 을 기대합니다.

 // sidebar.js
{
  path : '/example/tables' ,
  icon : 'TablesIcon' ,
  name : 'Tables' ,
} ,
{
  icon : 'PagesIcon' , // <-- this is used as a submenu, so no path
  name : 'Pages' ,
  routes : [
    // submenu
    {
      path : '/example/login' ,
      name : 'Login' , // <-- these don't have icons
    } ,
    {
      path : '/example/create-account' ,
      name : 'Create account' ,
    } ,