ev-ui
Version:
An ui library,some awesome components.
218 lines (193 loc) • 5.5 kB
Markdown
Some Components are available now as below.
[](https://ev-ui.github.io "ev-ui")
`npm install --save ev-ui`
first include your code in the `EvUI` component
```jsx
import {EvUI} from 'ev-ui'
render(){
return(
<EvUI>
your code
</EvUI>
)
}
```
1. `Dialog`:
* usage
 just show the content:
```jsx
Dialog.show(Comp)
```
  or show comp with props:
```js
import {Dialog} from 'ev-ui'
import {Comp} from 'comp.js'
const props={
content:Comp, //Component or string ,required
mainBlur:false,// the background where filter blur if
k1:{}, // any other props
k2:{}
}
Dialog.show(props)
```
* screenshot
2. `ContextMenu`:
* usage
```js
import {ContextMenu,Menu,Item} from 'ev-ui'
export default class Demo extends React.Component{
/**
* first disable the default contextmenu
*/
componentDidMount(){
window.oncontextmenu=(e)=>{
e.preventDefault()
}
/**
* then bind the function to the node's onContextMenu event.
*/
onContextMenu(e){
let menu=new Menu()
.add(new MenuItem('新建',()=>{})
.add(new MenuItem('A',()=>{}))
.add(new MenuItem('B',()=>{}))
.add(new MenuItem('C',()=>{}))
)
.add(new MenuItem('编辑',()=>{}))
.add(new MenuItem('复制',()=>{}))
.add(new MenuItem('剪切',()=>{}))
// .add(new MenuItem('剪切',()=>{})).type('disabled') // the menuItem will be disabled(gray color and do nothing when clicked)
.add(new MenuItem('粘贴',()=>{}))
.add(new MenuItem('删除',()=>{}).type('remove'))
menu.notEmpty() && ContextMenu.show({menu,left:e.pageX,top:e.pageY})
}
render(){
return(
<div onContextMenu={this.onContextMenu.bind(this)}>demo</div>
)
}
}
```
* screenshot
3. `Confirm`:
* usage
```js
import {Confirm} from 'ev-ui'
Confirm.show(()=>{
//called when you click confirm
},()=>{
// called when you click cancel
})
```
* screenshot
4. `ActionTag`:
* usage
```js
import {ActionTag} from 'ev-ui'
//here use the Icon of the antd for demo,you can use others for example FontAwesome...
import {Icon} from 'antd'
render(){
return(
<div style={{display:flex,flexDirection:row,alignItems:center}}>
<ActionTag
iconField={<Icon type='plus'/>}
textField='Create'
onClick={()=>{}}
/>
{/* set the type*/}
<ActionTag
iconField={<Icon type='delete'/>}
textField='Remove'
type='danger'
onClick={()=>{}}
/>
{/* or set the size*/}
<ActionTag
iconField={<Icon type='edit'/>}
textField='Edit'
size='large'
onClick={()=>{}}
/>
</div>
)
}
```
* screenshot
5. `Flow`:
* usage
```js
import {Flow} from 'ev-ui'
const data=[
{
id:'0',
name:'Flow0',
tasks:[
{point:0,name:'Task0',parent:[],children:[1]},
{point:1,name:'Task1',parent:[0],children:[2,3]},
{point:2,name:'Task2',parent:[1],children:[4]},
{point:3,name:'Task3',parent:[1],children:[4]},
{point:4,name:'Task4',parent:[2,3],children:[]},
]
},
{
id:'1',
name:'Flow1',
tasks:[
{point:0,name:'Task0',parent:[],children:[1]},
{point:1,name:'Task1',parent:[0],children:[2]},
{point:2,name:'Task2',parent:[1],children:[3]},
{point:3,name:'Task3',parent:[2],children:[4]},
{point:4,name:'Task4',parent:[3],children:[]},
]
}
]
export default class Process extends React.Component{
state={
processes:data,
selectedProcess:{}
}
onTaskChange(tasks){
//update the tasks
}
onCreate(){
//create process
}
render(){
return(
<div className='left-nav'>
{/* show the processes list */}
</div>
<div className='content'>
<Flow tasks={this.state.selectedProcess.tasks}
onChange={this.onTasksChange.bind(this)}
onFlowCreate={this.onCreate.bind(this)}
selectedProcess={this.state.selectedProcess || {}}/>
</div>
)
}
}
```
* screenshot
6. `Loading`
* usage
```js
import {Loading} from 'ev-ui'
// show Loading.
Loading.show()
// hide Loading
Loading.hide()
```
The document will be added later.