# ev-ui > An ui library,some awesome components. Latest version **0.4.2** (published 2018-07-26) · MIT license · 0 weekly downloads ## Install ```sh npm install ev-ui pnpm add ev-ui yarn add ev-ui bun add ev-ui ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.4.2 | | Published | 2018-07-26 | | First published | 2017-07-18 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 1.4 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | evolify | | Maintainers | evolify | | Keywords | ui, react, components, evolify, ev-ui, js, javascript | ## Links - npm: https://www.npmjs.com/package/ev-ui - Repository: https://github.com/ev-ui/ev-ui - Homepage: https://github.com/ev-ui/ev-ui#readme - Issues: https://github.com/ev-ui/ev-ui/issues - npm.io page: https://npm.io/package/ev-ui ## Dependencies (5) - [antd](https://npm.io/package/antd.md) ^2.13.11 - [react](https://npm.io/package/react.md) ^15.6.2 - [react-dom](https://npm.io/package/react-dom.md) ^15.6.2 - [dom-to-image](https://npm.io/package/dom-to-image.md) ^2.5.2 - [styled-components](https://npm.io/package/styled-components.md) ^1.4.6 ## Alternatives - [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads - [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads - [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads - [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads - [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads ## Recent versions - 0.4.2 (latest) — 2018-07-26 - 0.4.1 — 2018-07-24 - 0.4.0 — 2018-07-23 - 0.3.6 — 2018-04-02 - 0.3.5 — 2018-03-19 - 0.3.4 — 2018-03-19 - 0.3.3 — 2018-03-19 - 0.3.2 — 2018-02-06 - 0.3.1 — 2018-02-01 - 0.3.0 — 2018-02-01 - 0.2.9 — 2018-01-19 - 0.2.8 — 2018-01-13 - 0.2.7 — 2017-11-24 - 0.2.6 — 2017-11-24 - 0.2.5 — 2017-09-28 - … 15 more at https://npm.io/package/ev-ui/versions ## README # ev-ui ## An ui library , some awesome components. Some Components are available now as below. [Home](https://ev-ui.github.io "ev-ui") ### preview ![Home](https://github.com/ev-ui/ev-ui/raw/dev/res/1.jpg) ![Demo](https://github.com/ev-ui/ev-ui/raw/dev/res/2.jpg) ### install `npm install --save ev-ui` ### usage first include your code in the `EvUI` component ```jsx import {EvUI} from 'ev-ui' render(){ return( your code ) } ``` 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 ![login](https://github.com/ev-ui/ev-ui/raw/dev/res/6.jpg) ![create](https://github.com/ev-ui/ev-ui/raw/dev/res/7.jpg) 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(
demo
) } } ``` * screenshot ![ContextMenu](https://github.com/ev-ui/ev-ui/raw/dev/res/3.jpg) 3. `Confirm`: * usage ```js import {Confirm} from 'ev-ui' Confirm.show(()=>{ //called when you click confirm },()=>{ // called when you click cancel }) ``` * screenshot ![Confirm](https://github.com/ev-ui/ev-ui/raw/dev/res/8.jpg) 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(
} textField='Create' onClick={()=>{}} /> {/* set the type*/} } textField='Remove' type='danger' onClick={()=>{}} /> {/* or set the size*/} } textField='Edit' size='large' onClick={()=>{}} />
) } ``` * screenshot ![ActionTag](https://github.com/ev-ui/ev-ui/raw/dev/res/5.jpg) 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(
{/* show the processes list */}
) } } ``` * screenshot ![Flow](https://github.com/ev-ui/ev-ui/raw/dev/res/4.jpg) 6. `Loading` * usage ```js import {Loading} from 'ev-ui' // show Loading. Loading.show() // hide Loading Loading.hide() ``` The document will be added later. --- _Source: https://npm.io/package/ev-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._