Componentes reutilizables

Button + Input

Pagina dedicada a probar variantes de los componentes compartidos.

Comunes

Primary Secondary Danger Danger secondary Cancel

Disabled

Primary Secondary Danger Danger secondary Cancel

Una letra

A B C D E

Toasts

Trigger Info Trigger Success Trigger Danger

Toasts Persistentes (No se van)

Info Persistente Success Persistente Danger Persistente

Modal

Demo del modal global con servicio, host y devolucion de resultado.

Abrir confirm modal Abrir confirm delete Abrir modal bloqueado Abrir modal ancho Abrir simple modal
{{ lastModalResult }}

Icon Buttons

Botones de icono pequenos con color base #666666, deshabilitados con #A0A0A0 y estados hover/active con color de marca (a excepcion de trash que usa danger).

Disabled
Normal
Active / Hover

Cart Icons

Icono de carrito con badge opcional indicando cantidad.

Disabled
Normal
Active / Hover
Limpiar archivo

Paginator

Componente shared para navegar por paginas con primera, anterior, siguiente y ultima.

Form Stepper

Stepper vertical reutilizable. Cada paso maneja sus propios botones de navegacion. No se puede avanzar si el paso no es valido.

Siguiente
Simular validez del paso: @if (testStep2Valid) { Valido } @else { Invalido — Siguiente bloqueado }
Volver Siguiente

Nombre: {{ user }}

Email: {{ email }}

Presupuesto: {{ amount }}

Volver Confirmar

Carrito mock

Demo visual aislada del carrito con scroll a partir del cuarto item.

@if (!cartVisible) { Volver a mostrar carrito }
@if (cartVisible) {
}
Tenant Configuration

Configuracion Tenant

Logo del Header
@if (tenant()?.header_logo) { Header Logo } @else {
Sin Logo de Header
}
Logo del Footer
@if (tenant()?.footer_logo) { Footer Logo } @else {
Sin Logo de Footer
}

Colores de Marca

Primario {{ tenant()?.primary_color || 'Default' }}
Secundario {{ tenant()?.secondary_color || 'Default' }}
Danger {{ tenant()?.danger_color || 'Default' }}
Success {{ tenant()?.success_color || 'Default' }}
Header BG {{ tenant()?.header_bg_color || 'Default' }}
Footer BG {{ tenant()?.footer_bg_color || 'Default' }}
Reusable Component

Tarjetas de Producto (ProductCard)

Las tarjetas se adaptan al tamano del contenedor padre. A continuacion se presentan dentro de una grilla de Bootstrap.

@for (product of testProducts; track product.title) {
}
@for (product of testProducts; track product.title) {
}