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

Accordion

Accordion reutilizable basado en las clases globales de Bootstrap. Por defecto mantiene un solo item abierto.

Elegí el producto, seleccioná sus variantes y agregalo al carrito. Desde allí podés revisar el pedido y continuar al checkout. Los medios de pago dependen de la configuración de cada tienda y se muestran durante el checkout. Este contenido no puede abrirse.

Variante múltiple y flush

La tienda informa los métodos y costos de envío disponibles para cada pedido. Las condiciones de cambio y devolución son definidas por cada comercio.

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

Main Carousel

Carrusel panorámico compuesto únicamente por imágenes, con autoslide e indicadores.

Reusable Component

Carousel de productos

El carousel controla únicamente el desplazamiento. Cada ítem se define externamente con un template y en este ejemplo renderiza productos con imágenes mockeadas.

ITEM {{ product.id }}
Reusable Component

Tarjetas de Producto (Column With Image)

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) {
}
Reusable Component

Mapa de ubicaciones

Prueba de Leaflet con múltiples puntos, encuadre automático y acceso a indicaciones.

Reusable Component

Tarjetas de Producto (Row Layout)

Diseño horizontal que ocupa el 100% del ancho disponible.

Reusable Component

Tarjetas de Producto (Vertical With Cart Layout)

Diseño vertical con selector de cantidad y acciones de compra y carrito.

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