https://github.com/ud-ud/layout
Generate UI given a set of configuration and render it in HTML ,SVG or CANVAS
https://github.com/ud-ud/layout
Last synced: 23 days ago
JSON representation
Generate UI given a set of configuration and render it in HTML ,SVG or CANVAS
- Host: GitHub
- URL: https://github.com/ud-ud/layout
- Owner: UD-UD
- License: mit
- Created: 2018-04-22T05:09:56.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-10-04T18:31:31.000Z (over 6 years ago)
- Last Synced: 2025-02-16T07:17:52.859Z (3 months ago)
- Language: JavaScript
- Size: 293 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Layout
Creates a html layout from a given configuration
### Prerequisites
```
node
```
### Installing
Clone the repository and run the following command
```
npm install
```
After the installation all necessary library will be ready for you to directly start your developement
## Build you app
```
npm run build
```
## Running the tests
```
npm run test
```
## Show Test Coverage
```
npm run cover
```
## Usage
```
const {
Layout,
DummyComponent
} = layout
const width = 600
const height = 600
const skeletonType = 'html'
const component1 = new DummyComponent(10, {
width: width / 2,
height: width / 2
})
const component2 = new DummyComponent(10, {
width: width / 2,
height: width / 2
})
const component3 = new DummyComponent(10, {
width: width / 2,
height: width / 2
})
const component4 = new DummyComponent(10, {
width: width / 2,
height: width / 2
})
const layoutDefinition = {
host: null,
cut: 'v',
ratioWeight: 1,
lanes: [{
host: null,
cut: 'h',
ratioWeight: 1,
preferred: true,
lanes: [
{
host: component1,
cut: null,
ratioWeight: 1,
preferred: true,
lanes: []
},
{
host: component2,
cut: null,
ratioWeight: 1,
lanes: []
}
]
},
{
host: null,
cut: 'h',
ratioWeight: 1,
lanes: [
{
host: component3,
cut: null,
ratioWeight: 1,
lanes: []
},
{
host: component4,
cut: null,
ratioWeight: 1,
preferred: true,
lanes: []
}
]
}
]
}
const renderAt = 'board'
const fancyGridLayout = new Layout({
renderAt,
layoutDefinition,
width,
height,
skeletonType
})
fancyGridLayout.compute()
// draw all components
component1.draw()
component2.draw()
component3.draw()
component4.draw()
```