Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/itsdevcoffee/react-dashboard
https://github.com/itsdevcoffee/react-dashboard
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/itsdevcoffee/react-dashboard
- Owner: itsdevcoffee
- Created: 2016-02-03T00:16:18.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2016-02-03T00:47:30.000Z (almost 9 years ago)
- Last Synced: 2024-04-18T10:14:46.181Z (8 months ago)
- Language: JavaScript
- Size: 5.18 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Dashboard Module
So I decided to go with a different approach and make one component that can be one of the 4 styles if specified. I also separated out the grid system so you can define it on the components props.
###Different Box Types
- boxType="plain"
- boxType="cover"
- boxType="topBar"
- boxType="bottomBar"
Now depending on what box type you pick you have to use different(but similar) props:
---
#### boxType="plain"
- boxTitle="20"
- boxSubtitle="New Followers added this month"
- span="4" (For how many columns you want it to span in the layout)
---
#### boxType="cover"
- boxTitle="18°"
- boxSubtitle="Texas"
- boxBackground="#FF8A00"
- span="12"
---
#### boxType="topBar"
- boxTitle="New visitors"
- boxSubtitle="1.5k"
- boxBarBackground="#0096D0"
- span="12"
---
#### boxType="bottomBar"
Defined an array of objects and pass it into boxInfo
```
var bottomBarArray1 = [
{"title": 15080, "subtitle": "Shots Views"},
{"title": 12000, "subtitle": "Likes"},
{"title": 5100, "subtitle": "Comments"}
];
```
- boxInfo={bottomBarArray1}
- boxBarBackground="#484D4D"
- boxBackground="#0096D0"
- span="12"
---
#### Final Version:
---
#### Mobile Version:
