Skip to main content

Formularios

El sistema de diseño de Alpura proporciona clases específicas para estandarizar el comportamiento y la visualización de los formularios en Angular.

Clase .alp-form​

Esta clase debe aplicarse directamente a la etiqueta <form> que utiliza [formGroup]. Proporciona el espaciado y la alineación base para los mat-form-field dentro de un layout de rejilla (grid).

<form [formGroup]="demoForm" class="row alp-form">
  <!-- Campos del formulario -->
</form>

Slide Toggle Personalizado​

Contamos con clases para modificar el comportamiento visual del componente mat-slide-toggle de Angular Material para alinearlo al branding de Alpura.

Clase .alp-slide-toggle (Label Interno)​

Esta clase permite mostrar un label interno que cambia de estado automáticamente mediante CSS (ej. ON/OFF), permitiendo un diseño más compacto.

<mat-slide-toggle formControlName="notifications" class="alp-slide-toggle">
</mat-slide-toggle>

Clase .alp-slide-toggle-no-icon​

Por defecto, los toggles de Material pueden mostrar iconos dentro del círculo. Esta clase los oculta para mantener un diseño más limpio y corporativo.

<mat-slide-toggle formControlName="notifications" class="alp-slide-toggle-no-icon">
  Notificaciones
</mat-slide-toggle>