evermut v1.9.4-beta1
Evermut
Install and use components
$ npm install --save evermut
# or
$ yarn add evermut
A working version looks like:
import React from 'react'
import ReactDOM from 'react-dom'
import { Logo } from 'evermut'
ReactDOM.render(
<Logo src={<source_path>} />,
document.getElementById('root')
)
Components
BackButton
name
Type: string
Default: Back
Basic structure: Back to somewhere
goBack
Type: func
, required
Basic structure: () => {}
BreadCrumbs
loading
Type: bool
Default: false
Basic structure: true
or false
disable
Type: bool
Default: false
Basic structure: true
or false
crumbs
Type: array
, required
Basic structure:
{
crumb: `string` or `array`, # required
route: `string` or `object`, # required
}
Basic structure of crumb
if
- string
crumb: `string`, # required
- object
crumb: [
{
name: `string`, # required ,
id: `string` or `number`, # required
},
...
]
Basic structure of route
if
- string
route: `string`, # required
- object
route: {
name: `string`, # required ,
id: `string` or `number`, # required
}
onClick
Type: func
, required
Basic structure: () => {}
CircularProgressBar
size
Type: number
, required
Basic structure: 999
strokeWidth
Type: number
, required
Basic structure: 999
strokeColor
Type: string
, required
Basic structure: #525F7F
secondaryStrokeColor
Type: string
, required
Basic structure: #99a5c2
percentage
Type: bool
Default: false
Basic structure: true
or false
step
Type: object
, required
Basic structure:
{
current: `number`, # required
count: `number`, # required
}
Example:
{
current: 2,
count: 10
}
ExtendedMenuItem
loading
Type: bool
Default: false
Basic structure: true
or false
details
Type: object
, required
Basic structure:
{
id: `string` or `number`, # required
title: `string`, # required
description: `string`,
tags: `array`,
actions: `array`, # required
menu: `object of objects 'list' and 'onClick'`
}
Example:
{
id: 1,
title: "Here Is Your Title",
description: "Here Is Your Description",
tags: ['some', 'tags', ...],
actions: [
<StateAction actions={['running']} onClick={this.click} tooltip />,
'waiting',
...
],
menu: {
list: [
{name: 'Something', link: '/some'},
...
],
onClick: () => {}
}
}
HorizontalMenu
primaryMenu
Type: array
, required
Basic structure:
[
{
name: 'Name',
icon: 'icon-name', # based on ui-box, not required
props: {
href: '#',
target: '_blanket',
onSelect: () => {}, # not required
...style # style props based on ui-box
}
},
...
]
secondaryMenu
Type: array
Default: []
Basic structure: Same as primaryMenu
selectedColor
Type: string
Default: #f5f6f7
Basic structure: #f5f6f7
logo
Type: elementType
Default: none
Basic structure:
listLogo
Type: elementType
Default: none
Basic structure:
LeftSideList
list
Type: array
, required
Basic structure:
[
{
name: 'Sam',
id: '123',
... # anything that is neccessary
},
...
]
selected
Type: number
or string
, required
Basic struncture: 123
loading
Type: bool
Default: false
Basic structure: true
or false
header
Type: function
Default: none
Basic structure: () => {} # some function that will return a view
body
Type: function
Default: none
Basic structure: () => {} # some function that will return a view
footer
Type: function
Default: none
Basic structure: () => {} # some function that will return a view
selectItem
Type: function
Default: none
Basic structure: () => {}
backButtonName
Type: string
Default: Back
Basic structure: Back to somewhere
backButtonClick
Type: function
Default: none
Basic structure: () => {}
selectedColor
Type: string
Default: #f5f6f7
Basic structure: #f5f6f7
defaultBackground
Type: string
Default: white
Basic structure: white
backButtonStyle
Type: object
Default: {}
Basic structure: { margin: 10 }
itemStyle
Type: object
Default: {}
Basic structure: { margin: 10 }
containerStyle
Type: object
Default: {}
Basic structure: { margin: 10 }
Loader
style
Type: object
# based on ui-box, not required
Default: {}
height
Type: string
Default: 100vh
you can add other styles regarding the Loader container other than height
property
Login
logo
Type: string
Default: null
Basic structure: "./logo.svg"
rounded
Type: bool
Default: false
Basic structure: true
or false
buttonName
Type: string
Default: 'Login'
title
Type: string
Default: ''
login
Type: func
, required
Basic structure: () => {}
Logo
loading
Type: bool
Default: false
Basic structure: true
or false
src
Type: string
, required
Basic structure: "./logo.svg"
style
Type: object
Default:
# based on ui-box, not required
{
height: 60,
transform: 'rotate(-45deg) translateX(1px)'
}
Pagination
loading
Type: bool
Default: false
Basic structure: true
or false
count
Type: number
, required
Basic structure: 999
limit
Type: number
Default: 10
Basic structure: 999
pageIndex
Type: number
Default: 1
Basic structure: 999
onClick
Type: func
, required
Basic structure: () => {}
ResponsiveMenu
loading
Type: bool
Default: false
Basic structure: true
or false
isHorizontal
Type: bool
Default: false
Basic structure: true
or false
stickBottom
Type: bool
Default: false
Basic structure: true
or false
primaryMenuSticky
Type: array
, required
Basic structure:
[
{
logo: <Component />,
props: {
href: '#',
target: '_blanket',
onSelect: () => {}, # not required
...style # style props based on ui-box
}
},
# or
{
name: 'Name',
icon: 'icon-name', # based on ui-box, not required
props: {
href: '#',
target: '_blanket',
onSelect: () => {}, # not required
...style # style props based on ui-box
}
},
...
]
secondaryMenuSticky
Type: array
Default: []
Basic structure: Same as primaryMenuSticky
primaryMenuHorizontal
Type: array
, required
Basic structure:
[
{
name: 'Name',
icon: 'icon-name', # based on ui-box, not required
props: {
href: '#',
target: '_blanket',
onSelect: () => {}, # not required
...style # style props based on ui-box
}
},
...
]
secondaryMenuHorizontal
Type: array
Default: []
Basic structure: Same as primaryMenuHorizontal
selectedColorSticky
Type: string
Default: #f5f6f7
Basic structure: #f5f6f7
selectedColorHorizontal
Type: string
Default: #f5f6f7
Basic structure: #f5f6f7
logo
Type: elementType
Default: none
Basic structure:
listLogo
Type: elementType
Default: none
Basic structure:
stickyStyle
Type: object
Basic structure: { margin: 10 }
horizontalStyle
Type: object
Basic structure: { margin: 10 }
ResponsiveSideSheet
isFullWidth
Type: bool
Default: false
Basic structure: true
or false
component
Type: elementType
, required
Basic structure: () => {} # function that will return a view
onClose
Type: func
, required
Basic structure: () => {}
isOpen
Type: bool
, required
Basic structure: true
or false
closeButtonStyle
Type: object
, required
Default: {}
Basic structure: { margin: 10 }
StateAction
loading
Type: bool
Default: false
Basic structure: true
or false
actions
Type: array
, required
Possible values: 'running'
, 'waiting'
, 'warning'
, 'stopped'
Basic structure: ['running']
onClick
Type: func
, required
Basic structure: () => {}
tooltip
Type: bool
Default: false
Basic structure: true
or false
Stepper
loading
Type: bool
Default: false
Basic structure: true
or false
show
Type: bool
Default: false
Basic structure: true
or false
steps
Type: array
, required
Basic structure:
[
{
link: {
name: `string`,
path: `string`
},
component: <Component />,
func: `func`,
},
...
]
Examples:
[
{
link: {
name: 'Sme name',
path: '#name'
},
component: 'Name Component',
func: this.nameFunction
},
...
]
func
Type: func
, required
Basic structure: () => {}
StickyMenu
loading
Type: bool
Default: false
Basic structure: true
or false
primaryMenu
Type: array
, required
Basic structure:
[
{
logo: <Component />,
props: {
href: '#',
target: '_blanket',
onSelect: () => {}, # not required
...style # style props based on ui-box
}
},
# or
{
name: 'Name',
icon: 'icon-name', # based on ui-box, not required
props: {
href: '#',
target: '_blanket',
onSelect: () => {}, # not required
...style # style props based on ui-box
}
},
...
]
secondaryMenu
Type: array
Default: []
Basic structure: Same as primaryMenu
stickBottom
Type: bool
Default: false
Basic structure: true
or false
TabContentView # Coming Soon
tabs
Type: array
, required
Basic structure:
[
{
name: 'Some menu item',
link: '/some-menu-item-link'
}
...
]
Table
loading
Type: bool
Default: false
Basic structure: true
or false
headerNames
Type: array
Default: []
Example:
[
{name: 'Owner', icon: 'arrow-up', func: (item) => this.sort(item)},
{name: 'Containers', helper: 'min/max'},
{name: 'Id'},
...
]
list
Type: array
, required
Example:
[
{
"id": itemId,
"visibleId": itemId, # please note that if you need the ID to be visible in the table you need to pass it with different property name, as word 'id' is reserved
"name": "itemName",
...
},
...
]
pagination
Type: object
Look at Pagination
component for details
search
Type: function
, required
Basic structure: () => {}
onClick
Type: function
, required
Basic structure: () => {}
TableWithSingle
basis
Type: number
Default: 300
rows
Type: array
, required
Example:
[
{
id: 1,
title: "Here Is Your Title",
description: "Here Is Your Description",
tags: ['some', 'tags', ...],
actions: [
<StateAction actions={['running']} onClick={this.click} />,
'waiting',
...
],
menu: {
list: [
{name: 'Something', link: '/some'},
...
],
onClick: () => {}
}
},
...
]
loading
Type: bool
Default: false
Basic structure: true
or false
listItem
Type: elementType
, required
singleComponent # Coming soon
ToggleMenu
loading
Type: bool
Default: false
Basic structure: true
or false
menuList
Type: array
, required
Basic structure:
[
{
name: 'Component name',
component: <Component />
},
...
]
onClick
Type: func
, required
Basic structure: () => {}
ToggleMenu
loading
Type: bool
Default: false
Basic structure: true
or false
disabledColor
Type: string
Default: #edf0f2
Basic structure: #edf0f2
defaultBackground
Type: string
Default: white
Basic structure: white
buttonColor
Type: string
Default: #1070ca
Basic structure: #1070ca
buttonName
Type: string
Default: Choose file
Basic structure: Any other button name
acceptedFileTypes
Type: array
Default: []
Basic structure: [ '.tar', '.jpg' ]
onChange
Type: function
, required
Basic structure: () => {}
Development
yarn build
ornpm run build
transpiles the JavaScript files for production usage
License
Evermut is released under the MIT license.
Copyright © 2019 mutable.io
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago