React Adminlte Dash

React implementation of AdminLTE themed dashboard http://zksailor534.github.io/react-ad…

Based off of AdminLTE. Static hosted demo on GitHub Pages.

Todo (Path to 1.0.0)

  •  Universal/Isomorphic component
  •  Right sidebar
  •  Footer
  •  Content formatting
  •  Generic Navbar dropdowns
  •  Messaging Navbar dropdown
  •  Notifications Navbar dropdown
  •  Tasks Navbar dropdown
  •  Top-nav formatting option
  •  Boxed formatting option

Installation

npm install --save react-adminlte-dash

Usage

This module is in development, usage is subject to change. Not all components are fully functional.

This module uses Styled Components, so all CSS styling is included when the module is called. However, in order for the dashboard to use the entire available screen height, the parent container components must be set to height: 100%. This component sets the html & body styles, the user must set the app container.

In CSS:

#app {
  min-height: 100vh;
}

In ES6:


import { Dashboard, Header, Sidebar } from 'react-adminlte-dash';

const nav = () => ([
  
]);

const sb = () => ([
  
    
  
]);

const App = ({ children }) => (
  
    {children}
  
);

In order to create themed child components (not wrapped in navbarChildren, sidebarChildren, or footerChildren), use the withTheme wrapper provided by styled-components. This will provide the theme object to the child component. See src/styles/variables.js for the available variables. Documentation for these variables is TBD.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares