Worko Angular Grid

Install

npm install --save worko-ng-grid

Usage

Importa WorkoNgGridModule en la declaración de tu módulo:

import { WorkoNgGridModule } from 'worko-ng-grid';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    WorkoNgGridModule
  ],
  exports: [
    ...
  ]
})
export class YourModule { }

Componente wrapper fluid

Wrapper fluid es un contenedor que crece dentro de su elemento padre. Tendrá un padding horizontal definido en la variable --safe-area.

Ejemplos

<w-wrapper-fluid>
  ...
</w-wrapper-fluid>

Componente wrapper centered

Wrapper centered es un contenedor centrado que cambiará su anchura dependiendo de la anchura del navegador y los breakpoints definidos.

Ejemplos

<w-wrapper-centered>
  ...
</w-wrapper-centered>

| Breakpoint | Wrapper fluid | Wrapper centered | |--------------------------------|---------------|------------------| | xs (screen < 576px) | 100% | 100% | | sm (557px <= screen < 768px) | 100% | 540px | | md (768px <= screen < 992px) | 100% | 720px | | lg (992px <= screen < 1200px) | 100% | 960px | | xl (1200px <= screen < 1500px) | 100% | 1140px | | xxl (screen < 1500px) | 100% | 1440px |

Row

Componente para agrupar y distribuir columnas

Ejemplos

<w-row [wrap]="true">
...
</w-row>

Col

Componente para la distribución de contenido dividido en columnas.

Ejemplos

<w-row>
  <w-col [xs]="6" [md]="4" [mdOffset]="2"></w-col>
  <w-col [xs]="6" [md]="4"></w-col>
</w-row>

Atributos

| Atributo | Descripción | |-----------|------------------------------------------------------------------------------------------ | xs | Número de columnas de anchura en el breakpoint xs | | xsOffset | Número de columnas de separación en el breakpoint xs | | xsTotal | Total sobre el que aplicar la anchura y separación en el breakpoint xs (default: 12) | | sm | Número de columnas de anchura en el breakpoint sm | | smOffset | Número de columnas de separación en el breakpoint sm | | smTotal | Total sobre el que aplicar la anchura y separación en el breakpoint sm (default: 12) | | md | Número de columnas de anchura en el breakpoint md | | mdOffset | Número de columnas de separación en el breakpoint md | | mdTotal | Total sobre el que aplicar la anchura y separación en el breakpoint md (default: 12) | | lg | Número de columnas de anchura en el breakpoint lg | | lgOffset | Número de columnas de separación en el breakpoint lg | | lgTotal | Total sobre el que aplicar la anchura y separación en el breakpoint lg (default: 12) | | xl | Número de columnas de anchura en el breakpoint xl | | xlOffset | Número de columnas de separación en el breakpoint xl | | xlTotal | Total sobre el que aplicar la anchura y separación en el breakpoint xl (default: 12) | | xxl | Número de columnas de anchura en el breakpoint xxl | | xxlOffset | Número de columnas de separación en el breakpoint xxl | | xxlTotal | Total sobre el que aplicar la anchura y separación en el breakpoint xxl (default: 12) |

Desarrollo de la librería

Para el desarrollar y compilar la librería:

 npm run build:worko-ng-grid 

Para publicar una nueva versión:

cd dist/worko-ng-grid
npm publish