This package has been deprecated

Author message:

Package no longer supported. Contact [e-mail] for more info.

angular-monoris

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>

Property Name	Value Type	Example
flow	Flow: {'y' | 'x'}	<monoris flow="x" height="100%">
spacing	String: px	<monoris spacing="21px">
adapt	Boolean	<monoris adapt>
factoring	Factor: [x, y]	<monoris [factoring]="[2, 3]">
focus	Area: [x, width, y, height]	<monoris [focus]="[.4, .2, 0, 1]">
overflow	Overflow: [{'scroll' | 'hidden' | 'fade' | 'drag' | 'dragIn'}]	<monoris [overflow]="['scroll', 'dragIn']">
class	String: class-list	<monoris class="flower">
width	String: CSS-width
height	String: CSS-height
minWidth	String: CSS-min-width
minHeight	String: CSS-min-height

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>

Property Name	Value Type	Example
size	Size: [width, height]	<rectangle [size]="[1, .5]">
size (absolute)	String: px	<rectangle size="200px">
background	String: CSS-background	<rectangle background="url(yellow-flower.jpg)">
padding	String: CSS-padding

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>