Ocean Grid

Para la implementación de la libreria Ocean Grid, es necesario agregar la CDN de estilos CSS.

 <link rel="stylesheet" href="https://www.ocean-grid.xyz/version/v4.0.0/css/all.css" >

Instalación

 $ npm install ocean-grid

módulos

Con Ocean Grid implementara los siguientes módulos:

• OceanGridDatePickerModule Permite agregar un selector de fecha en un input.
• OceanGridColorPickerModule Permite agregar un selector de color en un input.
• OceanGridEditorModule Permite agregar un texto enriquecido.
• OceanGridCarouselModule Permite agregar un carousel de items.
• OceanGridSliderModule Permite agregar un slider de items.
• OceanGridTableModule Permite agregar una tabla.

OceanGridDatePickerModule

Para hacer uso de este módulo, se agrega la directiva ogDatePicker en un componente input. Se puede configurar el módulo con lo siguiente:

• value Es valor que tiene el input, tiene que ser un formato valido, en caso no se declare el valor sera la fecha actual.
• lang Es el idioma con el que visualizara el selector de fecha, los idiomas validos son: en ingles y es español, en caso no se declare tendra el valor en.
• format Es el formato en que se visualizara el valor, en caso no se declare tendra un formato MM/DD/YYYY, los formatos validos son: Mes Dia Año: MM/DD/YYYY, MM-DD-YYYY, MM.DD.YYYY, MM DD YYYY Dia Mes Año: DD/MM/YYYY, DD-MM-YYYY, DD.MM.YYYY, DD MM YYYY Año Mes Día: YYYY/MM/DD, YYYY-MM-DD, YYYY.MM.DD, YYYY MM DD Año Día Mes: YYYY/DD/MM, YYYY-DD-MM, YYYY.DD.MM, YYYY DD MM

Código html para su implementación

<input ogDatePicker value="15-11-2020" format="DD/MM/YYYY">

<input ogDatePicker formControlName="fecha" format="YYYY-MM-DD" lang="es" >

OceanGridColorPickerModule

Para hacer uso de este módulo, se agrega la directiva ogColorPicker en un componente input. Se puede configurar el módulo con lo siguiente:

• format Indica el formato de salida del color, los datos validos son: rgb,hex, en caso no se declare, su valor es hex.

Código html para su implementación

<input ogColorPicker value="#0f5">

<input ogColorPicker value="#611E5F">

<input ogColorPicker value="rgb(255,0,0)" format="rgb">

<input ogColorPicker value="rgba(255,0,255,.5)" format="rgb">

OceanGridEditorModule

Para hacer uso de este módulo, se agrega la directiva ogEditor en un componente textarea. Para determinar el alto de la sección del texto, esto se implementa con la propiedad rows del textarea, en caso no se determina su valor o el valor es cero(0) el alto será de acuerdo el contenido.

Código HTML para su implementación

<textarea ogEditor></textarea>

<textarea ogEditor formControlName="description" rows="6"></textarea>

OceanGridCarouselModule

La implementación del módulo OceanGridCarouselModule permite agregar un slider de items. Se puede configurar con lo siguiente:

• items Son las opciones que tendra el slide.
• time El intervalo de tiempo que tiene el slide, en caso no se declare, su valor es 5000.
• fade Es el efecto del slide, en caso no se declare, su valor el true y el efecto del slide sera swipe.
• indicators Es para indicar si se desea visualizar los indicadores del slide, en caso no se declare, su valor es true.
• controls Es para indicar si desea visualizar los controles del slide, en caso no se declare, su valor es true.

Código html

<og-carousel [items]="items" [fade]="false" [indicators]="true" [controls]="true" [time]="6000">
  <ng-template ogTemplate="item" let-item="item">
    ...
  </ng-template>
</og-carousel>

OceanGridSliderModule

La implementación del módulo OceanGridSliderModule permite agregar un slider de items. Se puede configurar con lo siguiente:

• items Son las opciones que tendra el carousel.
• time El intervalo de tiempo que tiene el carousel, en caso no se declare, su valor es 5000.
• controlVertical Es la alineación vertical del control, las alineaciones validas son: top middle bottom, en caso no se declare, su valor es bottom.
• controlHorizontal Es la alineación horizontal del control, las alineaciones validas son: start center end, en caso no se declare, su valor es center.
• gap Es el espacio entre cada opcion del carousel, en caso no se declare, su valor es 24.
• responsive Es para indicar los diferentes tamaños de las opciones del slider para que se adapte a un dispositivos, en caso no se declare, su valor es lo siguiente:

responsive:any[] = [
    { screen: 1920, item: 5 },
    { screen: 1440, item: 4 },
    { screen: 1200, item: 3 },
    { screen: 960, item: 2 },
    { screen: 770, item: 1 }
]

Código html

<og-slider [items]="items" controlVertical="top" controlHorizontal="start">
  <ng-template ogTemplate="item" let-item="item">
    ...
  </ng-template>
</og-slider>

OceanGridTableModule

La implementación del módulo OceanGridTableModule permite agregar una tabla. Se puede agregar datos a tabla mediante lo siguiente:

• dataset Son los datos de la tabla.
• datatable Permite la implementación de un buscador, selector de número de filas y paginador de datos de la tabla, en caso no se declare, su valor es false
• striped Es para agregar un color de fondo a las filas de la tabla, es un dato boleano, en caso no se declare, su valor es false.
• fill Es un dato boleano que permite agregar color del fondo a la fila al pasar el mouse, en caso no se declare, su valor es false
• grid Permite agregar border a la tabla, el dato que recibe es boleano, en caso no se declare, su valor es false

<og-table [dataset]="people" [datatable]="true">
  <ng-template ogTemplate="head">
    <tr>
        <th>Codigo</th>
        <th>Nombre</th>
        <th>Correo</th>
    </tr>
  </ng-template>
  <ng-template ogTemplate="body" let-person="item">
    <tr>
        <td>{{ person.id }}</td>
        <td>{{ person.name }}</td>
        <td>{{ person.email }}</td>
    </tr>
  </ng-template>
</og-table>

• ogTemplate="head" Es el template para el head de la tabla.
• ogTemplate="body" Es el template para el body de la tabla .
• let-person es el nombre que se asigna a cada fila del item, ej: let-person.