Better Components

npm install @marcosrodriguez/better-components

¿Por qué Better Components?

Fácil

Aprende a usar componentes ya hechos en minutos.

Documentación

Documentación y principales aportadores hispanos dispuestos a ayudar.

Código abierto

Crea, modifica, y aporta tus ideas.

Instalación

Librería compilada

Ejecute en su proyecto Angular el siguiente comando

npm install @marcosrodriguez/better-components

Esto instalará la última versión disponible del proyecto.

Código Fuente

Crea o usa un proyecto Angular

Clona el proyecto en una nueva carpeta dentro del proyecto, llamala projects

Añade el siguiente script en el archivo package.json

"start-library": "npm link ./projects/better-components && ng serve -o"

Ahora puedes ejecutar el siguiente comando para cargar la librería y el proyecto

npm run start-library

Alertas

Alerta Simple

<bc-simple-alert>

Mostrará una alerta con un botón, útil para dar una indicación al usuario

Parametros

[title] Indica el titulo que tendrá la alerta[message] Indica el mensaje que tendrá la alerta[buttonText] Indica el mensaje que tendrá el botón[dark] Indica si se aplica el estilo oscuro a la alerta(event) Indica el evento que tendrá el botón al pulsarse

Alerta con opciones

<bc-opcional-alert>

Mostrará una alerta con dos botones, útil para dar aceptar/cancelar una acción

Parametros

[title] Indica el titulo que tendrá la alerta[message] Indica el mensaje que tendrá la alerta[firstButton] Indica el mensaje que tendrá el botón 1[secondButton] Indica el mensaje que tendrá el botón 2[dark] Indica si se aplica el estilo oscuro a la alerta(firstEvent) Indica el evento que tendrá el botón 1 al pulsarse (secondEvent) Indica el evento que tendrá el botón 2 al pulsarse

Consejos

Crea una variable en tus componentes de tipo boolean, así podrás controlar la visibilidad de las alertas, por defecto las alertas aparecen y se superponen a la mayoría de elementos.

Tarjetas

Tarjeta Simple

<bc-simple-card>

Mostrará una tarjeta simple.

Parametros

[title] Indica el titulo que tendrá la tarjeta[text] Indica el mensaje que tendrá la tarjeta[dark] Indica si se aplica el estilo oscuro a la tarjeta

Default Title

Default card subtitle

Tarjeta

<bc-card>

Mostrará una tarjeta con una imagen

Parametros

[title] Indica el titulo que tendrá la tarjeta[text] Indica el mensaje que tendrá la tarjeta[src] URL de la imagen a poner[dark] Indica si se aplica el estilo oscuro a la tarjeta

Default Title

Default card subtitle

Iconos

Icono de ayuda

<bc-icon-helper>

Un icono con forma de ? que muestra un mensaje al pulsarse.

Parametros

[message] Indica el mensaje que tendrá el icono al pulsarse

Icono de aviso

<bc-icon-warning>

Un icono con forma de ⚠ que muestra un mensaje al pulsarse.

Parametros

[message] Indica el mensaje que tendrá el icono al pulsarse

⚠

Tablas

Icono de ayuda

<bc-simple-table>

Tabla simple e interactiva que permite mostrar conjuntos de datos básicos.

Parámetros

[tableData] Objeto con los datos y columnas que se quiere mostrar(rowClicked) Evento que emite al pulsar una fila[dark] Indica si se aplica el estilo oscuro a la alerta

Nombre	Año de lanzamiento	Aprendido
Java	1995	✓
C	1972	✕
Go	2009	✓

Tabla

<bc-table>

Tabla con buscador e interactiva que permite mostrar conjuntos de datos.

Parámetros

[tableData] Objeto con los datos y columnas que se quiere mostrar(rowClicked) Evento que emite al pulsar una fila[dark] Indica si se aplica el estilo oscuro a la alerta


Nombre	Año de lanzamiento	Aprendido
Java	1995	✓
C	1972	✕
Go	2009	✓

Lineas de tiempo

Linea de tiempo vertical [Experimental]

<bc-vertical-timeline>

Linea del tiempo para mostrar eventos simples de manera descendente.

Parámetros

[timelineData] Objeto con los datos y columnas que se quiere mostrar

Ejemplos

Ejemplo 1: Tablas

1. Sintaxis de la interfaz BCTableData


  export interface BCTableData {
    colsName: Map;
    rowData: any[];
  }

2. Implementación de la interfaz



  export class YourComponent {

  lenguages: any[] = [
    { name: "Java", year: 1995, learned: true },
    { name: "C", year: 1972, learned: false },
    { name: "Go", year: 2009, learned: true },
  ]

  data: BCTableData = {
    colsName: new Map([
      ['name', 'Nombre'],
      ['year', 'Año de lanzamiento'],
      ['learned', 'Aprendido']
    ]),
    rowData: this.lenguages
  };

  showAlert(lenguage: any) {
    alert(lenguage.name)
  }
}

3. Implementación en el HTML


    <bc-simple-table [tableData]="data" (rowClicked)="showAlert($event)"/><bc-simple-table>


Nombre	Año de lanzamiento	Aprendido
Java	1995	✓
C	1972	✕
Go	2009	✓