worko-ng-grid

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