ERSS para Angular

ERSS para Angular es un framework de CSS diseñado específicamente para aplicaciones Angular. Proporciona una colección de componentes y estilos reutilizables que mejoran la apariencia visual y la experiencia de usuario de tus proyectos Angular. ten en cuenta mantener la libreria actualizada ya que estare subiendo modificaciones y bugfixing periodicamente.

Características

• Integración sencilla con proyectos Angular.
• Diseño responsive que se adapta a diferentes tamaños de pantalla y dispositivos basandose en un sistema de grillas amigable y especifico.
• Componentes Angular listos para usar para elementos de interfaz comunes.
• Estilos personalizables mediante etiquetas y propiedades de los componentes Angular.
• Compatibilidad con navegadores web.

Instalación

Para instalar ERSS para Angular, sigue estos pasos:

1. Instala el paquete a través de NPM:

npm install erss

2. Importa los módulos de ERSS que se desea utilizar en tu módulo Angular (en este ejemplo se importo el componente de los botones):

import { NgModule } from '@angular/core';
import { ErssModule } from 'erss';

@NgModule({
  imports: [
    // Otros imports...
    ErssModule
  ],
  //...
})
export class AppModule { }

3. importamos el archivo erss-style.scss en el angular.json

"build": {
.....
    "options": {
    .....
      "styles": [
        "node_modules/erss/assets/css/erss-style.scss",
        "src/styles.scss"
      ],
    }
}

4. Utiliza los componentes y estilos de ERSS en tus plantillas Angular:

<erss-btn>Hola, ERSS!</erss-btn>

4. Personaliza los estilos y comportamiento de los componentes mediante propiedades de entrada o clases CSS.

Uso

ERSStyling para Angular proporciona una variedad de componentes y estilos que puedes utilizar en tus plantillas Angular. Aquí tienes un ejemplo de cómo usar el componente erss-btn:

<erss-btn
  [variant]="'default'"
  large
  filled
  (click)="handleClick()"
>
  Haz clic
</erss-btn>

En este ejemplo, establecemos el tipo en 'primary' y el tamaño en 'large' para el botón. También enlazamos el evento de clic al método handleClick().

uso de efecto

🎨 Animaciones disponibles para <erss-badge>

| Nombre | Animación | Uso recomendado | |--------------|------------------------------------|--------------------------------| | bounce | Rebote | General | | fade-up | Aparece desde abajo | Sutil, elegante | | shake | Movimiento nervioso lateral | Alerta | | flip | Voltea en eje Y | Visualmente llamativo | | zoom-in | Aparece haciendo zoom | Clásico y directo | | slide-right| Se desliza desde la derecha | Ligero y moderno | | pop | Golpe visual rápido | Impacto breve | | pulse | Late suavemente (loop infinito) | Notificación pasiva | | swing | Oscila como campanita | Llamativo, divertido |

✅ Cómo usar una animación

<erss-badge [value]="7" animation="shake" color="primary">
  <i class="fa fa-envelope"></i>
</erss-badge>

## Licencia

Este proyecto está bajo la [Licencia MIT](LICENSE).

---

Esta libreria esta elavorado por una persona, cualquier consejo u opciones de mejoras son mas que bienvenidos, para mas informacion accede a la pagina ya anteriormente mencionada.