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 、管理パネル、管理ダッシュボード、分析など、あらゆる種類のカスタム Web アプリケーションで使用できます。
トマシュ・オフチャルチク:
開発環境を実行する前に、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/ subdir に配置する必要があります。app/colors.js - ダッシュボードで定義されたすべての色を含むオブジェクトをエクスポートします。 JS ベースのコンポーネント (グラフなど) のスタイルを設定するのに役立ちます。app/routes - PageComponents をここで定義し、 index.js経由でインポートする必要があります。詳細については後ほど説明します。ルート コンポーネントは、 /routes/ディレクトリ内の別のディレクトリに配置する必要があります。次に、 /routes/index.jsファイルを開いてコンポーネントをアタッチする必要があります。これは 2 つの異なる方法で行うことができます。
静的にインポートされたページは、他のすべてのコンテンツとともに 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 コンポーネントを定義し、それを特定のルートにアタッチする必要があります。例：
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によって提供されるオプション:
このダッシュボードで使用されているプラグイン:
