Librería de componentes

Instalación

Para realizar la instalación de la librería se deben seguir los siguientes pasos

1. Instalar la librería con el siguiente comando npm:

   npm install claro-superapp-components

2. Posteriormente, agregar en la primera linea del archivo app.acss del MP:

   @import "claro-superapp-components/app.acss";

Uso de componentes

Se esta trabajando en una tabla de componentes a futuro, se pueden ver ejemplos del uso de componentes en la ruta (ejecutar MP)

/pages/

ó puede ver las implementaciones de los componentes en la ruta:

/components

Estilos Personalizados

Se puede hacer uso de clases para generar componentes personalizados que no se encuentren en la librería sin tener que reescribir constantemente estilos de acss en cada MP, también permite unificar estilos entre MPs

Fuentes

Puede consultar desde el archivo app.acss o desde la siguiente tabla:

|Familia|Tamaño|Weight|Clase acss|Clase genérica| |------|------|-------|----------|----------| |AMX|22px|bold|cn-h1|h1| |AMX|20px|bold|cn-h2|h2| |AMX|18px|bold|cn-h3|h3| |AMX|16px|bold|cn-h4|h4| |AMX|14px|bold|cn-h5|h5| |Roboto|14px|underline|cn-text-link|text-link| |Roboto|14px|normal|cn-text-p|text-p| |Roboto|14px|bold|cn-text-bold|text-bold| |Roboto|16px|bold|cn-text-bold-number|text-bold-number|

En caso de requerir un tamaño de letra diferente, se puede hacer uso de las siguientes clases:

|Tamaño|Clase genérica| |------|--------------| |9px|text-9px| |10px|text-10px| |11px|text-11px| |12px|text-12px| |13px|text-13px| |14px|text-14px| |15px|text-15px| |16px|text-16px| |17px|text-17px| |18px|text-18px| |19px|text-19px| |20px|text-20px| |21px|text-21px| |22px|text-22px| |23px|text-23px| |24px|text-24px| |25px|text-25px|

Paddings

Se puede hacer uso de las siguientes clases para generar paddings:

Nota: Los paddings se generan en base a 8px

Nota: Se mantienen las clases antiguas por compatibilidad, se sugiere usar las clases genéricas en desarrollos nuevos

Padding general (en todas las direcciones)

|Clase antigua|Clase genérica|Padding| |-------------|--------------|-------| |cn-p-1|p-1|8px| |cn-p-2|p-2|16px| |cn-p-3|p-3|24px| |cn-p-4|p-4|32px| |-|p-5|40px| |-|p-6|48px|

Padding horizontal (en el eje X)

|Clase antigua|Clase genérica|Padding| |-------------|--------------|-------| |cn-px-1|px-1|8px| |cn-px-2|px-2|16px| |cn-px-3|px-3|24px| |cn-px-4|px-4|32px| |-|px-5|40px| |-|px-6|48px|

Padding vertical (en el eje Y)

|Clase antigua|Clase genérica|Padding| |-------------|--------------|-------| |cn-py-1|py-1|8px| |cn-py-2|py-2|16px| |cn-py-3|py-3|24px| |cn-py-4|py-4|32px| |-|py-5|40px| |-|py-6|48px|

Padding top

|Clase antigua|Clase genérica|Padding| |-------------|--------------|-------| |cn-pt-1|pt-1|8px| |cn-pt-2|pt-2|16px| |cn-pt-3|pt-3|24px| |cn-pt-4|pt-4|32px| |-|pt-5|40px| |-|pt-6|48px|

Padding bottom

|Clase antigua|Clase genérica|Padding| |-------------|--------------|-------| |cn-pb-1|pb-1|8px| |cn-pb-2|pb-2|16px| |cn-pb-3|pb-3|24px| |cn-pb-4|pb-4|32px| |-|pb-5|40px| |-|pb-6|48px|

Padding left

|Clase antigua|Clase genérica|Padding| |-------------|--------------|-------| |cn-pl-1|pl-1|8px| |cn-pl-2|pl-2|16px| |cn-pl-3|pl-3|24px| |cn-pl-4|pl-4|32px| |-|pl-5|40px| |-|pl-6|48px|

Padding right

|Clase antigua|Clase genérica|Padding| |-------------|--------------|-------| |cn-pr-1|pr-1|8px| |cn-pr-2|pr-2|16px| |cn-pr-3|pr-3|24px| |cn-pr-4|pr-4|32px| |-|pr-5|40px| |-|pr-6|48px|

Margenes

Se puede hacer uso de las siguientes clases para generar margenes:

Padding general (en todas las direcciones)

|Clase antigua|Clase genérica|Margin| |-------------|--------------|------| |cn-m-1|m-4px|4px| |cn-m-2|m-1|8px| |cn-m-3|m-12px|12px| |cn-m-4|m-2|16px| |cn-m-6|m-3|24px| |-|m-4|32px| |-|m-5|40px| |-|m-6|48px|