es6-react-admin-lte
v3.1.0
Published
An AdminLTE Template made to use as React components.
Downloads
150
Readme
AdminLTE with ES6 & React
Welcome to yet another project using the AdminLTE template! This version makes some of the template into a bunch of ReactJS components.
Install it
It is as easy as getting hooked up with any other NPM package! Just open your project in your favourite Node.js-fluent terminal and type:
npm install es6-react-admin-lteYou are certainly welcome to add your preferred package installation parameters, like --save, of course; and then all that is left to do at this point is bask in the glory of npm's timeless install process!
Using it in your project
NOTE:
For this first iteration of documentation, I'm going to be using ES6 syntax, and JSX formatted components. You might have to wait a bit for another documentation update if you don't use these. Hang in there though, and sorry for the neglect!
Importing to your .js
import { YourDesiredComponent } from 'es6-react-admin-lte';OR importing directly to your .html
<!-- The necessary JS is in the project's ./dist/js directory -->
<script src="{project}/node_modules/es6-react-admin-lte/dist/js/es6-react-admin-lte.min.js"></script>Using your components
Documentation on the components exists in the docs directory of the project, but the formats will usually look like this:
<YourDesiredComponent
stringProp="Some string value"
nonStringProp={500}
boolPropIsTrue
>
{/* child components and content */}
</YourDesiredComponent>Using in your .html
NOTE: Check out the index.html file as an example of this stuff in action.
You'll want to import your desired dependencies to your file. For example:
<!-- The necessary CSS is in the project's ./dist/css directory --> <link rel="stylesheet" href="{project}/node_modules/es6-react-admin-lte/dist/css/es6-react-admin-lte.min.css" /> <!-- Import your desired JS files as well --> <script src="./react.js"></script> <!-- NOTE: We don't provide you with JS and CSS from... React, jQuery, Bootstrap, Font Awesome, jVectorMap, (for the Map Chart) etc. Pull them into your project as needed -->You'll want to prepare your
<body>for your desired AdminLTE theming and layout with the appropriate classes:<body class="skin-blue sidebar-mini"></body>AdminLTE's built-in color themes include:
skin-blue,skin-purple,skin-yellow,skin-green,skin-red,skin-black,skin-black-lightAdminLTE's layout themes include:
fixed,layout-boxed,layout-top-nav,sidebar-collapse,sidebar-mini
You'll want to add an element to import your template to. Usually a
<div>does the trick.<div id="project-goes-here"></div> <script src="./project-file-that-attaches-there.js"></script>
Components you may enjoy to use
As we develop && document stuff, items on this list will be linked appropriately. Consider this a table of contents && rough progress indicator of done || !done.
- If item is italicized, it is currently subject to change.
- If item is not linked, it has no documentation or is not created.
- If item is Linked, it created and has some documentation, regardless of stability.
Basic Layout Helpers
- Theme
- Wrapper
- HeaderBar
- NavSidebar
- NavSidebarMenu
- NavSidebarUserPanel
- NavSidebarSearch
- ContentWrapper
- ControlsMenu
- Footer
Utilities
Text
Forms
Charts
Social feed stuff
Tables
Etc.