airframe react
1.0.0
참고 버전 HTML/CSS는 여기에서 확인할 수 있습니다: https://github.com/0wczar/airframe
모든 스마트폰, 태블릿 또는 데스크톱에서 잘 작동하는 고품질 대시보드/관리/분석 템플릿입니다 . MIT 라이선스로 오픈 소스로 제공됩니다.
미니멀한 디자인과 혁신적인 Light UI를 갖춘 Airframe Dashboard를 사용하면 뛰어난 UI로 놀랍고 강력한 애플리케이션을 구축할 수 있습니다. 자세한 단계별 문서를 통해 대규모 애플리케이션에 맞게 완벽하게 설계되었습니다.
이 Airframe 프로젝트는 일반적인 Webpack 기반 React 앱이며, React Router도 맞춤형 Reactstrap과 함께 포함되어 있습니다. 이 프로젝트에는 최신 종속성이 거의 없으며 정기적으로 업데이트됩니다. 이 프로젝트는 SSR을 지원하지 않습니다. 필요한 경우 NextJs 기반 버전을 사용하세요.
Airframe Dashboard 에는 수많은 조합과 변형에 사용할 수 있는 거대한 구성 요소 모음이 있습니다. CRM , CMS , 관리 패널 , 관리 대시보드 , 분석 등과 같은 모든 유형의 사용자 정의 웹 애플리케이션에서 사용할 수 있습니다.
토마스 오우차르치크:
개발 환경을 실행하기 전에 로컬 컴퓨터에 NodeJ(>= 10.0.0)가 설치되어 있어야 합니다.
npm install 실행하세요. 추출된 디렉터리에 .npmrc 라는 파일이 있는지 확인하세요. 이러한 파일은 일반적으로 Unix 기반 시스템에 숨겨져 있습니다.
개발 환경을 시작하려면 콘솔에 npm start 입력하세요. 그러면 핫 리로딩이 활성화된 개발 서버가 시작됩니다.
프로덕션 빌드 유형 npm run build:prod . 프로세스가 완료된 후 /dist/ 디렉터리에서 출력을 복사할 수 있습니다. 출력 파일은 축소되어 프로덕션 환경에서 사용할 수 있습니다.
Webpack 구성 파일을 조정하여 특정 요구 사항에 맞게 빌드를 사용자 정의할 수 있습니다. 해당 파일은 /build 디렉터리에서 찾을 수 있습니다. 자세한 내용은 WebPack 설명서를 확인하세요.
프로젝트 프로젝트 구조에 대한 몇 가지 관심 사항:
app/components - 사용자 정의 React 구성 요소가 여기에 있어야 합니다.app/styles - 여기에 추가된 스타일은 CSS 모듈로 처리되지 않으므로 모든 전역 클래스 또는 라이브러리 스타일이 여기에 있어야 합니다.app/layout - 자체적으로 페이지 콘텐츠를 호스팅하는 AppLayout 구성 요소를 여기에서 찾을 수 있습니다. 추가 사이드바와 탐색바는 ./components/ 하위 디렉터리에 배치되어야 합니다.app/colors.js - 대시보드에서 정의된 모든 색상이 포함된 개체를 내보냅니다. JS 기반 구성요소(예: 차트)의 스타일을 지정하는 데 유용합니다.app/routes - PageComponents는 여기에서 정의되어야 하며 index.js 를 통해 가져와야 합니다. 이에 대한 자세한 내용은 나중에 설명합니다. 경로 구성 요소는 /routes/ 디렉터리 내의 별도 디렉터리에 배치되어야 합니다. 다음으로 /routes/index.js 파일을 열고 구성 요소를 연결해야 합니다. 이 작업은 두 가지 방법으로 수행할 수 있습니다.
정적으로 가져온 페이지는 다른 모든 콘텐츠와 함께 PageLoad에 즉시 로드됩니다. 해당 페이지로 이동할 때 추가 로드는 없지만 초기 앱 로드 시간 도 길어집니다. 정적으로 가져온 페이지를 추가하려면 다음과 같이 수행해야 합니다.
// Import the default component
import SomePage from './SomePage' ;
// ...
export const RoutedContent = ( ) => {
return (
< Switch >
{ /* ... */ }
{ /* Define the route for a specific path */ }
< Route path = "/some-page" exact component = { SomePage } />
{ /* ... */ }
</ Switch >
) ;
} 동적으로 가져온 페이지는 필요할 때만 로드됩니다. 이렇게 하면 초기 페이지 로드 크기가 줄어들고 앱 로드 속도가 빨라집니다. 이를 달성하기 위해 React.Suspense 사용할 수 있습니다. 예:
// Create a Lazy Loaded Page Component Import
const SomeAsyncPage = React . lazy ( ( ) => import ( './SomeAsyncPage' ) ) ;
// ...
export const RoutedContent = ( ) => {
return (
< Switch >
{ /* ... */ }
{ /*
Define the route and wrap the component in a React.Suspense loader.
The fallback prop might contain a component which will be displayed
when the page is loading.
*/ }
< Route path = "/some-async-page" >
< React . Suspense fallback = { < PageLoader /> } >
< SomeAsyncPage />
</ React . Suspense >
</ Route >
</ Switch >
) ;
} 때로는 Navbar 또는 Sidebar에 추가 콘텐츠를 표시하고 싶을 수도 있습니다. 이렇게 하려면 사용자 정의된 Navbar/Sidebar 구성 요소를 정의하고 이를 특정 경로에 연결해야 합니다. 예:
import { SidebarAlternative } from './../layout/SidebarAlternative' ;
import { NavbarAlternative } from './../layout/NavbarAlternative' ;
// ...
export const RoutedNavbars = ( ) => (
< Switch >
{ /* Other Navbars: */ }
< Route
component = { NavbarAlternative }
path = "/some-custom-navbar-route"
/>
{ /* Default Navbar: */ }
< Route
component = { DefaultNavbar }
/>
</ Switch >
) ;
export const RoutedSidebars = ( ) => (
< Switch >
{ /* Other Sidebars: */ }
< Route
component = { SidebarAlternative }
path = "/some-custom-sidebar-route"
/>
{ /* Default Sidebar: */ }
< Route
component = { DefaultSidebar }
/>
</ Switch >
) ; <Layout> 구성요소를 래핑해야 하는 <ThemeProvider> 구성요소에 initialStyle 및 initialColor 제공하여 사이드바 및 탐색바의 색상 구성표를 설정할 수 있습니다.
가능한 initialStyle 값:
lightdarkcolor 가능한 initialColor 값:
primarysuccessinfowarningdangerindigopurplepinkyellow 구성 요소의 ThemeConsumer 사용하여 런타임 시 색 구성표를 변경할 수 있습니다. 예:
// ...
import { ThemeContext } from './../components' ;
// ...
const ThemeSwitcher = ( ) => (
< ThemeConsumer >
( { onChangeTheme } ) = > (
< React . Fragment >
< Button onClick = { ( ) => onThemeChange ( { style : 'light' } ) } >
Switch to Light
</ Button >
< Button onClick = { ( ) => onThemeChange ( { style : 'dark' } ) } >
Switch to Dark
</ Button >
</ React . Fragment >
)
</ ThemeConsumer >
) ; ThemeConsumer 에서 제공하는 옵션:
이 대시보드에 사용된 플러그인:
