Code Monkey home page Code Monkey logo

react-adminlte-dash's Introduction

npm build status bitHound Score

react-adminlte-dash

React.js components for AdminLTE themed dashboard.

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 = () => ([
  <Header.Item href="/some/link" key="1" />
]);

const sb = () => ([
  <Sidebar.Menu header="NAVIGATION" key="1">
    <Sidebar.Menu.Item title="Home" href="/" />
  </Sidebar.Menu>
]);

const App = ({ children }) => (
  <Dashboard
    navbarChildren={nav()}
    sidebarChildren={sb()}
    theme="skin-blue"
  >
    {children}
  </Dashboard>
);

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.

Included Components

Dashboard

Main component for theme. Handles theming, layout options, and tracks state. Provides a default empty header and sidebar.

Property Type Description Default
children node Any React child components to be rendered in content fields n/a
navbarChildren node Any React child components to be rendered in the Header's navbar n/a
sidebarChildren node Any React child components to be rendered in the Sidebar n/a
footerChildren node Any React child components to be rendered in the Footer n/a
theme string Choice of AdminLTE skin themes: skin-blue, skin-black, skin-purple, skin-green, skin-red, skin-yellow, skin-blue-light, skin-black-light, skin-purple-light, skin-green-light, skin-red-light, skin-yellow-light skin-blue
initialCollapse bool Determines initial state of sidebar: collapsed (true) or expanded (false) false
sidebarMini bool Determines whether sidebar collapses to mini size (true) or off-screen (false) true
fixed bool Determines whether the Header is fixed false
logoOnClick func Function to be called on logo click, overrides logoHref n/a
logoHref string Link target for Logo, overridden by logoOnClick '/'
logoLg element A single React component to be rendered when logo is in large state <span><b>Admin</b>LTE</span>
logoSm element A single React component to be rendered when logo is in small state <span><b>A</b>LT</span>

Header

Header component which can be used independently of Dashboard (TBD). Wrapper for any top-based navigation components. Provides the following subcomponents:

  • Header.Item
  • Header.User
Property Type Description Default
children node Any React child components to be rendered n/a
fixed bool Determines whether the Header is fixed false
logoOnClick func Function to be called on logo click, overrides logoHref n/a
logoHref string Link target for Logo, overridden by logoOnClick '/'
logoLg element A single React component to be rendered when logo is in large state <span><b>Admin</b>LTE</span>
logoSm element A single React component to be rendered when logo is in small state <span><b>A</b>LT</span>
sidebarMini bool Determines whether sidebar collapses to mini size (true) or off-screen (false) false
sidebarCollapse bool Determines whether sidebar is in a collapsed state false
sidebarToggle func (Required) function passed to sidebar toggle component to handle sidebar collapse state n/a

Header.Item

Header navbar menu item component. Renders links with images in header.

Property Type Description Default
title string Item title to be displayed n/a
onClick func Function to be called on item click n/a
link string Link target for logo component, overridden by onClick n/a
image string Path to image object, overrides iconClass n/a
iconClass string Class names to use for icon (libraries not included), n/a

Header.UserMenu

Header user menu component. Renders user menu dropdown component in header bar.

Property Type Description Default
name string User Name n/a
image string Path to user image object n/a
profileAction func Function to perform on selection of Profile button, button only displayed if action provided n/a
signOutAction func Function to perform on selection of Sign Out button, button only displayed if action provided n/a

Sidebar

Sidebar component which can be used independently of Dashboard (TBD). Wrapper for any sidebar navigation components. Provides the following subcomponents:

  • Sidebar.Menu
  • Sidebar.UserPanel
  • Sidebar.Search
Property Type Description Default
children node Any React child components to be rendered n/a
fixed bool Determines whether the Header is fixed false
sidebarMini bool Determines whether sidebar collapses to mini size (true) or off-screen (false) false
sidebarCollapse bool Determines whether sidebar is in a collapsed state false

Sidebar.Menu

Sidebar navigation menu component. Wrapper for SidebarMenuItem components, which are provided as subcomponent:

  • Sidebar.Menu.Item
Property Type Description Default
children node Any React child components to be rendered n/a
header string Header title for navigation component none

Sidebar.Menu.Item

Sidebar navigation menu item component. Renders as link or dropdown menu. Can be nested in itself to provided nested dropdown menus.

<Sidebar.Menu.Item title="Level 1">
  <Sidebar.Menu.Item title="Level 2">
    <Sidebar.Menu.Item title="Level 3" />
  </Sidebar.Menu.Item>
</Sidebar.Menu.Item>
Property Type Description Default
children node Any React child components to be rendered n/a
title string Title for component none
active bool Determines if item is considered active false
href string Link target for component, unused if onClick or children provided null
onClick func Action for component, unused if children provided, overrides href null
icon object Expects a className key which accepts a string describing any font-awesome icon (i.e. fa-th) and/or a color key which accepts any Bootstrap style type (i.e. danger) or CSS color string (hex, name, or rgb) { className: 'fa-circle-o' }
labels [objects] Array of objects, each requires a React key string, a type key which accepts a string describing any Bootstrap style type (i.e. danger) and a text key of any string to display n/a

Sidebar.Search

Sidebar search component.

Property Type Description Default
name string Initial value displayed in search field ''
placeholder string Initial value displayed in search field 'Search...'
onClick func Function to call on search submit, provided with value prop v => alert(Searching for ${v})

Sidebar.UserPanel

Sidebar user component.

Property Type Description Default
name string User name n/a
image string String providing source path for user image n/a
online bool User status: online = true, offline = false false
href string Target for user status link n/a

License

react-adminlte-dash is available under MIT. See LICENSE for more details.

react-adminlte-dash's People

Contributors

zksailor534 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-adminlte-dash's Issues

how to include font-awesome in pages which are not using the adminlte

I was thinking about it and wanted to know if you have some better way to do it.
Lets say i have a login page which is not using the adminlte dashboard, and because of that the font-aweomse is not loaded (i think it is loaded in main.css), so the quesiton how to load font-awesome only in page which are not using the dashboard.

i don't want to load it anyway and might fave conflicts in the dashboard pages.

and good practice?

font-awesome icon and title not shown on navbar Header.Item

Any clue on why icon and title is not shown ? The link is working correctly though. Using latest.

const nav = (d) => ([
  <Header.Item href={ `https://github.com/a/a` }
    iconClass="fa fa-calculator"
    key="1"
    title="Github" />,
  <Header.UserMenu name="User" signOutAction={ () => d(logout()) } key="2" />,
]);

also noticing footerChildren={ Footer } is not outputting footer. Everything else is rendering fine.

developer_tools_-_http___localhost_3500_calculator_and_lift_debt_solutions_and_index_js_ _lift-app

Component Swap Out

Is there away to swap the child component with another component if a link is clicked on the side bar?

using LINK functionality in the Sidebar.Menu.Item

is there a way we can use react routers LINK component instead of href?
i like the look of sidbar.menu.item but doing a href call seems to refresh the whole page but if I use link it only replaces the main component which is much nicer.

thanks for your any guidance!

Is the AdminLTE styles/skins configurable in your project for future AdminLTE updates?

Hi zksailor, first of all the (successful) attempt you have made in integrating AdminLTE theme with react project is really cool. And i think even performance and changing themes wise i'd love to use it in my react-boilerplate project. But I was just wondering if say tomorrow some new updates come out in AdminLTE, will I be able to apply those changes easily in my project (your setup i.e.), and if yes which are the files or folders I should focus on fetching the changes from and applying them in your setup. I hope my question makes sense and is clear to you as well.

Possible to insert a footer?

Hi there again just wondering if there is a away to embedded a footer at the same level as the header. I tried to insert a footer in between Dashboard tags and its inserting it one level down...

Thanks in advance

SSR + customization + typing

Hi all,

I made a fork with some improvement.
I use this project on my PWA based on Next.js and typescript.
I made some modification to make it work with server side rendering and I add typing.
I also add props to enable developer to use their own icon library.
Are you interested on a PR?

toggling programmatically

Is there a way to toggle programmatically in the event you want to place the toggle button elsewhere

no-print

is there an easy way to target your dashboard to make classnames include no-print so that just the content-wrapper is printable?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.