@delrio/layout3d v1.0.2

Layout 2d and 3d to Build on Angular

You can to see a demo https://3dlayout.vercel.app/products/1 Bug report to: thefactory.software@gmail.com

Versions

Getting Started

Step 1: Install @delrio/layout3d

NPM:

npm install --save @delrio/layout3d

Step 2: Import the Layout3dModule module:

import { Layout3dModule } from '@delrio/layout3d';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [Layout3dModule.forRoot({
      apiKey: 'HERE-YOUR-API-KEY'
}), FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3 (Optional): Configuration Module

import { Layout3dModule } from '@delrio/layout3d';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    Layout3dModule.forRoot({
      apiKey: 'HERE-YOUR-API-KEY',
      textLoading: 'Loaaaad',
      textLoadingWithAnimation: true,
      backgroundColor2dDefault: {
        backgroundColor2d: 'red',
        backgroundFocusColor2d: 'blue',
        textColor: 'white',
        textColorFocus: 'white'
      },
      backgroundColor3dDefault: {
        backgroundColorX3d: 'green',
        backgroundColorY3d: 'red',
        backgroundFocusColorX3d: 'red',
        backgroundFocusColorY3d: 'red'
      },
      enableFocus: true
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Usage

Define options in your consuming component:

import { Component, OnInit } from '@angular/core';
import { BaseModel } from '@delrio/layout3d';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  baseModel: BaseModel;

  ngOnInit(): void {
    this.initBaseModel();
  }

  initBaseModel(): void {
    this.baseModel = {
      columns: 12,
      backgroundColor: 'grey',
      mode: '3d',
      rows: 12,
      sections: [{
        backgroundColor: 'red',
        columnPosition: {
          start: 1,
          end: 10
        },
        rowPosition: {
          start: 1,
          end: 5
        },
        frame: {
          alignment: 'horizontal',
          columns: 1,
          rows: 2,
          items: [
            {
              metadata: [{
                boxType: {
                  size: 'large',
                  type: 'square'
                },
                data: {
                  firstName: 'Juan',
                  lastName: 'Perez'
                }
              }]
            }
          ]
        }
      }],
      height: 1000,
      width: 1000
    }
  }
}

In template use d-layout3d component with your options

<d-layout3d [baseModel]="baseModel" (boxHandler)="boxHandler($event)"></d-layout3d>

API

INPUTS

OUTPUTS