npm i react-virtual-dom
prop | type | description |
---|---|---|
layout | json | this json will convert to html |
property | type | default | description |
---|---|---|---|
row | array | optional | child divs (Which will placed horizontally) |
column | array | optional | child divs (Which will placed vertically) |
html | html/jsx | optional | html content of node. |
gap | number | optional | will generate gap space between childs. |
align | string 'v' or 'h' or 'vh' | optional | align content in center horizontally and/or vertically. |
attrs | object | optional | node attributes. |
childsAttrs | object | optional | an object that defines childs attributes. |
childsAttrs | function | optional | a function that get each direct child object and direct each child index as parameter and returns child attributes. |
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
render(){
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
row:[ //see here
{html:'a',flex:1,attrs:{className:'panel'}},
{html:'b',flex:1,attrs:{className:'panel'}},
{html:'c',flex:1,attrs:{className:'panel'}},
]
}}
/>
)
}
}
render(){
return (
<div class="r-layout-parent container" data-id="a0.4737824055943596" style="flex-direction: row; flex: 1 1 0%;">
<div class="r-layout-item panel" data-id="a0.32910683900978577" style="flex: 1 1 0%;">
a
</div>
<div class="r-layout-gap" draggable="false" style="width: 12px;"></div>
<div class="r-layout-item panel" data-id="a0.42573192806826876" style="flex: 1 1 0%;">
b
</div>
<div class="r-layout-gap" draggable="false" style="width: 12px;"></div>
<div class="r-layout-item panel" data-id="a0.6251698251428581" style="flex: 1 1 0%;">
c
</div>
</div>
)
}
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
render(){
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
column:[ // see here
{html:'a',flex:1,attrs:{className:'panel'}},
{html:'b',flex:1,attrs:{className:'panel'}},
{html:'c',flex:1,attrs:{className:'panel'}},
]
}}
/>
)
}
}
<div class="r-layout-parent container" data-id="a0.16193452121795082" style="flex-direction: column; flex: 1 1 0%;">
<div class="r-layout-item panel" data-id="a0.7349682553750092" style="flex: 1 1 0%;">
a
</div>
<div class="r-layout-gap" draggable="false" style="height: 12px;"></div>
<div class="r-layout-item panel" data-id="a0.2587051202578894" style="flex: 1 1 0%;">
b
</div>
<div class="r-layout-gap" draggable="false" style="height: 12px;"></div>
<div class="r-layout-item panel" data-id="a0.4623202720076629" style="flex: 1 1 0%;">
c
</div>
</div>
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
render(){
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
childsAttrs:{className:'panel'},//see here
row:[
{html:'a',flex:1},
{html:'b',flex:1},
{html:'c',flex:1},
]
}}
/>
)
}
}
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
render(){
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
childsAttrs:{className:'panel'},//see here
childsProps:{flex:1},//see here
row:[
{html:'a'},
{html:'b'},
{html:'c'},
]
}}
/>
)
}
}
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
render(){
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
childsAttrs:{className:'panel'},
row:[
{html:'a',size:48},//see here
{html:'b',flex:1},
{html:'c',flex:1},
]
}}
/>
)
}
}
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
render(){
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
childsAttrs:{className:'panel'},
row:[
{html:'a',flex:2},//see here
{html:'b',flex:1},
{html:'c',flex:1},
]
}}
/>
)
}
}
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
render(){
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
childsAttrs:{className:'panel'},
row:[
{html:'abcdefg'},//see here
{html:'b',flex:1},
{html:'c',flex:1},
]
}}
/>
)
}
}
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
render(){
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
row:[
{
gap:12,
flex:1,
childsAttrs:{className:'panel'},
column:[
{html:'a1',flex:1},
{html:'a2',flex:1},
{html:'a3',flex:1},
]
},
{
flex:1,
attrs:{className:'panel'},
html:'b'
},
{
gap:12,
flex:1,
childsAttrs:{className:'panel'},
column:[
{html:'c1',flex:1},
{html:'c2',flex:1},
{html:'c3',flex:1},
]
},
]
}}
/>
)
}
}
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
state = {size1:100};
render(){
let {size1} = this.state;
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
row:[
{
gap:12,
size:size1, // see here
onResize:(value)=>this.setState({size1:value}), //see here
childsAttrs:{className:'panel'},
column:[
{html:'a1',flex:1},
{html:'a2',flex:1},
{html:'a3',flex:1},
]
},
{
attrs:{className:'panel'},
flex:1,
html:'b',
},
{
childsAttrs:{className:'panel'},
flex:1,
gap:12,
column:[
{html:'c1',flex:1},
{html:'c2',flex:1},
{html:'c3',flex:1},
]
},
]
}}
/>
)
}
}
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
render(){
return (
<ReactVirtualDom
layout={{
gap:12,
attrs:{className:'container'},
row:[
{
gap:12,
flex:1,
childsAttrs:{className:'panel'},
column:[
{html:'a1',flex:1},
{html:'a2',flex:1,show:false},//see here . show type function
{html:'a3',flex:1},
]
},
{html:'b',flex:1,attrs:{className:'panel'}},
{
gap:12,
flex:1,
childsAttrs:{className:'panel'},
column:[
{html:'c1',flex:1},
{html:'c2',flex:1,show:false}, // see here . show type boolean
{html:'c3',flex:1},
]
},
]
}}
/>
)
}
}
import React,{Component} from "react";
import ReactVirtualDom from 'react-virtual-dom';
import './style.css'
export default class app extends Component {
state = {
list1:[
{title:'item1'},
{title:'item2'},
{title:'item3'},
{title:'item4'},
{title:'item5'},
{title:'item6'},
{title:'item7'},
{title:'item8'},
{title:'item9'},
{title:'item10'},
{title:'item11'},
{title:'item12'},
{title:'item13'},
{title:'item14'},
{title:'item15'},
{title:'item16'},
{title:'item17'},
{title:'item18'},
{title:'item19'},
],
list2:[]
}
getList(listName){
return {
gap:0,attrs:{className:'panel',},
column:this.state[listName].map((o,index)=>{
return {
html:o.title,size:36,
attrs:{
className:'item',
onClick:()=>{
let currentList = this.state[listName];
let otherList = this.state[listName === 'list1'?'list2':'list1'];
otherList.push(o);
currentList.splice(index,1);
this.setState({[listName]:currentList});
}
}
}
})
}
}
render(){
return (
<ReactVirtualDom
layout={{
attrs:{className:'container',style:{padding:12,boxSizing:'border-box'}},
column:[
{
size:72,
childsAttrs:{className:'panel'},
row:[
{html:'a'},
{html:'b'},
{html:'c'},
]
},
{
row:[
this.getList('list1'),
this.getList('list2'),
]
}
]
}}
/>
)
}
}