# ug-layout

> An extensible and performant layout management framework.

Latest version **4.4.2** (published 2021-03-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install ug-layout
pnpm add ug-layout
yarn add ug-layout
bun add ug-layout
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.4.2 |
| Published | 2021-03-01 |
| First published | 2017-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | steelsojka@gmail.com |
| Maintainers | steelsojka |

## Links

- npm: https://www.npmjs.com/package/ug-layout
- Repository: https://github.com/steelsojka/ug-layout
- Homepage: https://github.com/steelsojka/ug-layout#readme
- Issues: https://github.com/steelsojka/ug-layout/issues
- npm.io page: https://npm.io/package/ug-layout

## Dependencies (6)

- [rxjs](https://npm.io/package/rxjs.md) ^6.0.0
- [mindi](https://npm.io/package/mindi.md) ^2.7.0
- [tslib](https://npm.io/package/tslib.md) ^1.6.0
- [snabbdom](https://npm.io/package/snabbdom.md) ~0.6.3
- [rx-decorators](https://npm.io/package/rx-decorators.md) ^1.2.1
- [reflect-metadata](https://npm.io/package/reflect-metadata.md) ^0.1.9

## Recent versions

- 4.4.2 (latest) — 2021-03-01
- 2.0.2 (beta) — 2017-05-04
- 4.4.1 — 2019-06-09
- 4.4.0 — 2019-06-09
- 4.3.1 — 2019-04-03
- 4.1.1 — 2019-04-03
- 4.3.0 — 2019-04-02
- 4.2.6 — 2019-02-04
- 4.2.5 — 2018-11-19
- 4.2.4 — 2018-11-19
- 4.2.3 — 2018-09-10
- 4.2.2 — 2018-06-14
- 4.2.1 — 2018-06-13
- 4.2.0 — 2018-04-11
- 4.1.0 — 2018-01-30
- … 22 more at https://npm.io/package/ug-layout/versions

## README

UgLayout
========

**Ug**h Free **Layout** Management.

UgLayout is a perfomant, highly extensible framework for making configureable layouts with components.

- [Documentation](https://steelsojka.github.io/ug-layout/)

Concepts
--------

ugLayout is a tree of **Renderable** objects. A row is a renderable object and so are all items belonging to that row. ugLayout comes with the built in Renderables:

- Stack (Tabbable container)
- Row
- Column
- Layout (A scoped container)
- View (Creates components)

Install
-------

`npm install --save ug-layout`

Basic Useage
------------

```typescript
import { RootLayout, Layout, View } from 'ug-layout';

// My component to use.
class MyComponent {
  ugOnInit(container) {
    container.mountHTML('<div>Hello World!!</div>');
  }
}

// The configuration for the layout (tree of Renderables)
const configuration = RootLayout.configure({
  child: Layout.configure({
    child: View.configure({ useClass: MyComponent })
  })
});

// Creates the root alyout instance.
const layout = RootLayout.create({
  container: document.body
});

// Load the configuration
layout.load(configuration);
```

The example above will render the layout into the container element. This example is the most BASIC example. Please resort to the manual for more complex scenarios.

---
_Source: https://npm.io/package/ug-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._