Nancy's Preferred Machete

    This package has been deprecated

    Author message:

    Package no longer supported. Contact support@npmjs.com for more info.

    angular-monoris
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published

    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>

    Install

    npm i angular-monoris

    DownloadsWeekly Downloads

    0

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    1.96 MB

    Total Files

    71

    Last publish

    Collaborators

    • npm