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.
Monoris requires Angular 6.
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.
<monoris [prop]="val">
<rectangle></rectangle>
...
</monoris>
Property Name | Value Type | Example |
---|---|---|
flow | Flow: {'y' | 'x'} |
|
spacing | String: px |
|
adapt | Boolean |
|
factoring | Factor: [x, y] |
|
focus | Area: [x, width, y, height] |
|
overflow | Overflow: [{'scroll' | 'hidden' | 'fade' | 'drag' | 'dragIn'}] |
|
class | String: class-list |
|
width | String: CSS-width | |
height | String: CSS-height | |
minWidth | String: CSS-min-width | |
minHeight | String: CSS-min-height |
The flow describes the building up direction.
Note: On flow="x" the height must be set.
Default: 'y'
The spacing describes the rectangle-inter-space.
On <monoris adapt height="100%">
a <rectangle [size]="[1, 1]">
will fill the container, containing the monoris-element.
Default: false
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]
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.
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'
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 [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 |
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]
The default CSS background-size is set to 'cover'.
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
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>