README
smpladminui
SimpleAdmin UI - React Components Library
This is a set of simple UI components that can help you build simple Admin interface with a basic functionality.
Install
npm install --save-dev smpladminui
Usage
import React, { Component } from "react";
import { ButtonComponent as Button } from "smpladminui";
class Example extends Component {
render() {
return <Button />;
}
}
You can import all the components into your application using the following lines:
import React, { Component } from "react";
import {
ButtonComponent as Button,
LayoutComponent as Layout,
PageComponent as Page,
DropmenuComponent as Dropmenu,
CardComponent as Card,
ListComponent as List,
PopupComponent as Popup,
IconComponent as Icon,
WrapperComponent as Wrapper
} from "smpladminui";
class Example extends Component {
render() {
return <Button />;
}
}
Below you can see a list of all the components along with their props.
Button
This component is a simple styled button which can render in few different styles depending on the props and handling onClick event upon itself.
Usage
import React, { Component } from "react";
import { ButtonComponent as Button } from "smpladminui";
class Example extends Component {
render() {
return <Button label={"No Action"} danger />;
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
style |
object | {} |
Style object to be passed to the rendered button |
label |
string | "Button" | This is the label on the button. Note: in case there are children passed to this component, they will be rendered instead. |
disabled |
boolean,function or string | none | Renders the button as disabled |
primary |
boolean, any | false | Renders the button as primary |
danger |
boolean, any | false | Renders the button as danger |
processing |
boolean, any | false | Renders the button as processing (with a spinning icon) |
onClick |
function | none | Handler for the onClick event of the button |
Toggle
This component is a simple styled toggle which can render a toggle knob in few different styles depending on the props and handling onToggle event upon itself.
Usage
import React, { Component } from "react";
import { ToggleComponent as Toggle } from "smpladminui";
class Example extends Component {
render() {
return <Toggle label={"No Action"} danger value={this.state.toggleValue} onToggle={(value) => this.setState({toggleValue})}/>;
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
style |
object | {} |
Style object to be passed to the rendered button |
label |
string | Empty | This is the label on the toggle. Note: in case there are children passed to this component, they will be rendered instead. |
disabled |
boolean,function or string | none | Renders the button as disabled |
primary |
boolean, any | false | Renders the button as primary |
danger |
boolean, any | false | Renders the button as danger |
processing |
boolean, any | false | Renders the button as processing (with a spinning icon) |
onToggle |
function | none | Handler for the onToggle event of the component. Returns the value of the toggle (true/false) |
Card
This component is a simple styled card with header, body and footer. It can be rendered in different variations depending on the props passed to it.
Usage
import React, { Component } from "react";
import { CardComponent as Card } from "smpladminui";
class Example extends Component {
render() {
return (
<Card>
<h1>UX Science progress experiment.</h1>
</Card>
);
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
style |
object | {} |
The style object that will be passed to the rendered card |
type |
string | "children" | Sets the style of the card. Options are:
|
fileType |
string | "video_mp4" | The filetype that will be used in case the type is set to file . All the options are:
|
imageUrl |
string | "" | The URL of the image which should be rendered in case the type is set to image |
disabled |
boolean,function or string | none | Renders the button as disabled |
primary |
boolean, any | false | Renders the button as primary |
danger |
boolean, any | false | Renders the button as danger |
processing |
boolean, any | false | Renders the button as processing (with a spinning icon) |
header |
boolean, string, object | <React.Fragment>Sample Card Header</React.Fragment> |
The contents of the header element of the card |
footer |
boolean, string, object | *several buttons and a text | The contents of the footer element of the card |
Dropmenu
This component is a three dots icon which shows a list of options upon hover.
Usage
import React, { Component } from "react";
import { DropmenuComponent as Dropmenu } from "smpladminui";
class Example extends Component {
render() {
return <Dropmenu style={{ float: "right" }} />;
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
style |
object | {} |
The style object that will be passed to the rendered element |
disabled |
boolean,function or string | none | Renders the button as disabled |
primary |
boolean, any | false | Renders the button as primary |
danger |
boolean, any | false | Renders the button as danger |
processing |
boolean, any | false | Renders the button as processing (with a spinning icon) |
options |
array of objects | [{option1},{option2}] |
A list of options for the menu. Each object must have the following properties:
|
Icon
This component is a three dots icon which shows a list of options upon hover.
Usage
import React, { Component } from "react";
import { IconComponent as Icon } from "smpladminui";
class Example extends Component {
render() {
return <Icon type={"listtype_list"} variant={"grey"} />;
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
style |
object | {} |
The style object that will be passed to the rendered element |
disabled |
boolean,function or string | none | Renders the icon as disabled |
primary |
boolean, any | false | Renders the icon as primary (not yet implemented) |
danger |
boolean, any | false | Renders the button as danger (not yet implemented) |
processing |
boolean, any | false | Renders the button as processing (with a spinning icon) (not yet implemented) |
type |
string | "settings" | Sets the type of the icon. Options are:
|
variant |
string | "grey" | Sets the color of the icon. Options are:
|
onClick |
function | none | Handler for the onClick event of the icon |
Layout
This component is layout component useful for building the main interface of the admin system. It has sidebar with options, header with labels and footer.
Usage
import React, { Component } from "react";
import { LayoutComponent as Layout } from "smpladminui";
class Example extends Component {
render() {
return (
<Layout progress={0}>
<Page>
<Wrapper>
This is my page
<h1>Title 1 / H1</h1>
<h2>Title 2 / H2</h2>
<h3>Title 3 / H3</h3>
<h4>Title 4 / H4</h4>
<h5>Title 5 / H5</h5>
<h6>Title 6 / H6</h6>
</Wrapper>
</Page>
</Layout>
);
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
leftLabel |
string | "left Label" | The smaller label on the top of the sidebar |
leftSublabel |
string | "Left Sublabel" | The bigger label on the top of the sidebar |
centerLabel |
string | "Please login to the system first" | The label on the header of the layout |
centerSublabel |
string | "Total of 1,567,234 hits this month" | The sublevel on the header of the layout |
centerRightIcon |
Icon component | <Icon type={"logout"} variant={"grey"} /> |
The Icon on the top right corner of the header |
centerRightText |
string | "Martin D." | The text displayed next to the top right icon on the header |
progress |
number | null | Sets the percentage of the progress bar in the header. Values could be 0 - 100. Note: If this is set to null the progress bar will not be displayed |
sidebarElements |
array of objects | some default options | An array of objects each of them with the following properties:
|
Note: Everything that is placed as children inside this component will be rendered inside the body of the layout.
List
This component is a list having header, list of elements and footer. It is useful to represent data in a list format.
Usage
import React, { Component } from "react";
import { ListComponent as List } from "smpladminui";
class Example extends Component {
render() {
return <List />;
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
style |
object | {} |
The style object that will be passed to the rendered element |
header |
array of strings | ["Name", "Structure", "Updated on", "Actions"] | Sets the header elements (column names) of the list |
footer |
object | React.Fragment with several buttons inside |
Sets the footer of the list. Could be any element you decide. |
list |
array of arrays | [ "UX Science progress experiment with a very very long name that goes on one line for a long line", "Root / All Static Pages", "15 Dec 12:45", |
Each element of this array should be an array with the same number of elements like the header elements. Each element will be placed in the proper column. |
Page
This component is a simple wrapper representing a page in our layout. It has a label and content (children).
Usage
import React, { Component } from "react";
import { PageComponent as Page } from "smpladminui";
class Example extends Component {
render() {
return <Page label={"Page label"}>This is my page</Page>;
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
style |
object | {} |
The style object that will be passed to the rendered element |
label |
string | "Page Label" | The label of the page displayed at the top |
stickyHeader |
boolean | false | Whether the label should stay sticky to the top when scrolling |
Popup
This component is a popup element with header (with close button), hint line, body and footer.
Often used when there is a need to enter data or display a message to the user.
Usage
import React, { Component } from "react";
import { PopupComponent as Popup } from "smpladminui";
class Example extends Component {
render() {
return (
<Popup
visible={this.state.popupVisible}
onClose={this.togglePopupVisible}
footer={
<React.Fragment>
<div style={{ width: "100%", textAlign: "left" }}>
<Button style={{ float: "right" }} danger>
delete
</Button>
<Button
style={{ float: "right" }}
onClick={this.togglePopupVisible}
>
close
</Button>
Updated on
<br />
15 Dec 2017
</div>
</React.Fragment>
}
hint={"This is the hint of the popup"}
>
Body of the popup
</Popup>
);
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
style |
object | {} |
The style object that will be passed to the rendered element |
label |
string | "Popup Label" | The label of the popup displayed at the top. Note: You can use any element here like placing an icon before the label. |
hint |
string | null | Any text that you want to be displayed as a hint on top of the popup. If the value is null the hint will not be displayed |
type |
string | "normal" | Sets the style of the popup. Options are:
|
time |
number | 0 | If set (in seconds) will autoclose the popup in the set number of seconds |
footer |
object | React.Fragment with two buttons and a text |
Sets the footer element of the popup. If set to null it will not be displayed |
onClose |
function | none | Event handler for the close function of the popup |
Wrapper
This component is a simple wrapper component apllying some default styles to the elements inside it like labels, text boxes, titles, buttons etc.
Usage
import React, { Component } from "react";
import { WrapperComponent as Wrapper } from "smpladminui";
class Example extends Component {
render() {
return (
<Wrapper>
<label>
This is label
<input type="text" placeholder="Project name" />
</label>
This is inside a wrapper
<br />
Don't have an account? Register one <a href="register.html">here</a>
.
<hr size="1" noshade="noshade" />
<h1>Title 1 / H1</h1>
<h2>Title 2 / H2</h2>
<h3>Title 3 / H3</h3>
<h4>Title 4 / H4</h4>
<h5>Title 5 / H5</h5>
<h6>Title 6 / H6</h6>
<button>My Button</button>
</Wrapper>
);
}
}
Props
Prop name | Type | Default | Description |
---|---|---|---|
style |
object | {} |
The style object that will be passed to the rendered element |
Thoughts
This is work in progress and we will continue working on this simple collection of elements. If you want to participate in it, please do not hesitate to get involved.
License
MIT © marDonchev