Current Version: 2.0.0
Welcome to yet another project using the AdminLTE template! This version makes some of the template into a bunch of ReactJS components.
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-lte
You 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!
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!
import { YourDesiredComponent } from 'es6-react-admin-lte';
<!-- 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>
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>
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-light -
AdminLTE'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>
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.
- Theme
- Wrapper
- HeaderBar
- NavSidebar
- NavSidebarMenu
- NavSidebarUserPanel
- NavSidebarSearch
- ContentWrapper
- ControlsMenu
- Footer
This section is hopefully one that gets updated from time to time the more important update notifications. This is a step in progress!
- 2017-09-21: Version 2.0.0 Update
- Breaking remake the DataTable component.
- We no longer rely on react-bootstrap-table
- Check out the component's documentation for a rundown of using the new version of the component.
- The DataTableButton component is no longer a thing. It was mostly sort of pointless.
- Breaking remake the DataTable component.