angular-monoris v0.1.3

Monoris

This is a small library enabling you to generate a grid based on nothing but the defined child sizes, and the overall code structure.
You can find the Demo on GitHub Pages.

Requirements

Monoris requires Angular 6.

QuickStart

Inside Angular

In console

$ npm install angular-monoris

In Module

//...
import { MonorisModule } from 'angular-monoris';

@NgModule({
    imports: [/* ... */ MonorisModule]
    // ...

In Template

<monoris>
    <rectangle [size]="[0.5, 0.5]"> NUMBER ONE </rectangle>
    <rectangle [size]="[0.5, 0.5]"> NUMBER TWO </rectangle>
    <rectangle [size]="'200px'"> THREE IS STATIC </rectangle>
    <rectangle *ngFor="let color of ['#8AF', '#8BF', '#8CF', '#8DF', '#8EF', '#8FF', '#8FE', '#8FD', '#8FC', '#8FB']" [size]="[0.2, 0.3]" [background]="color"></rectangle>
</monoris>

On a vertical grid (default), the rectangle's size is a fraction of the provided width. <rectangle [size]="[1, 1]"></rectangle> is a square that fills the entire width.

Properties

Monoris

    <monoris [prop]="val">
        <rectangle></rectangle>
        ...
    </monoris>

flow

The flow describes the building up direction.
Note: On flow="x" the height must be set.
Default: 'y'

spacing

The spacing describes the rectangle-inter-space.

adapt

On <monoris adapt height="100%"> a <rectangle [size]="[1, 1]"> will fill the container, containing the monoris-element.
Default: false

factoring

The factor will be applied to the child-rectangle dimensions. This can be useful in conjunction with the DevicePipe.
Note: if a rectangle's size is exceeding the maximum 1, the size will be shrunk down while preserving the ratio. E.g. factoring="10" and size=".5, 1" results in size = 1, 2

focus

The described Area is related to the view-box of the monoris-element. Use the DevMonorisVisualisationComponent to visualize the result.
Note: If the focus is set, the monoris-element must be the scroll-container. That means that on flow="y" the height must be set.

overflow

Option 'drag' and 'dragIn': Apply the class-name "mo-drag-spot" to an element that acts as the rectangle's non-reactive background element.
Default: 'scroll'

class

The first given class will be passed suffixed to each direct-child-rectangle. This can be useful on nested monoris.
.flower is passed as .flower-rect.

Rectangle

    <rectangle [prop]="val"> ... </rectangle>

size

On flow="y" and ratio="1/1", both values are fractures of the provided width.
If an absolute size is provided, the value describes the flow-parallel dimension. The flow-orthogonal dimension is set to 1 (the whole length).
Default: .1, .1

background

The default CSS background-size is set to 'cover'.

Tools

DevicePipe

The DevicePipe can be used to conditionally assign values to properties, based on the passed media-queries.

<monoris [factoring]="10 | Device:'mobile'" minWidth="['1200px', '700px'] | Device:'w<1200':'mobile'">

For multiple queries, an array of values in the same order must be provided.
The media-queries can be of two types:

• static: 'mobile' | 'desktop'
• listener: e.g. 'w > 100' | 'h > 100', where w = window-width and h = window-height

DevMonorisVisualisationComponent

The DevMonorisVisualisationComponent displays the focus-area as shaded zone over the monoris-element.

In Module

//...
import { MonorisModule, DevMonorisModule } from 'angular-monoris';

@NgModule({
    imports: [/* ... */ MonorisModule, DevMonorisModule]
    // ...

In Template

    <dev-monoris-focus-visualisation [monoris]="alpha"></dev-monoris-focus-visualisation>
    <monoris #alpha [focus]="[0, .5, 0, 1]">
        ...
    </monoris>