Next Perpendicular Moonlanding

    worko-ng-grid
    TypeScript icon, indicating that this package has built-in type declarations

    12.0.2 • Public • Published

    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
    

    Keywords

    none

    Install

    npm i worko-ng-grid

    DownloadsWeekly Downloads

    69

    Version

    12.0.2

    License

    none

    Unpacked Size

    109 kB

    Total Files

    23

    Last publish

    Collaborators

    • myriamrr
    • eetxaniz
    • inigoh
    • nereagomez
    • igornietogarrote
    • ikerztipot
    • gorka1
    • jabiinfante