Snackbar

Paquetes: @tiendana/utils @tiendana/web-foundation

Sistema de notificaciones con cola automática, animaciones suaves y múltiples expresiones.

Características

✅ Cola automática - Máximo 3 snackbars visibles, resto en cola
✅ Stacking visual - Escalado y sombras para profundidad
✅ 13 expresiones - Iconos faciales personalizados
✅ Auto-dismiss - Duración configurable o permanente
✅ CTA buttons - Botones de acción con callbacks
✅ Variante accent - Fondo --color-green-neon con texto oscuro

Demos Visuales

Snackbar Básico

CSS/HTML

Cargando demo...

Ver código

Flutter

Cargando demo...

Ver código

Con CTA Button

CSS/HTML

Cargando demo...

Ver código

Flutter

Cargando demo...

Ver código

Variante Accent

CSS/HTML

Cargando demo...

Ver código

Flutter

Cargando demo...

Ver código

Explorador de Expresiones

CSS/HTML

Cargando demo...

Ver código

Flutter

Personalizar Expresiones

En Flutter, las expresiones se configuran con assets propios o usando iconos de Material Icons.

Props / API

CSS/HTML - Angular

openSnackbar(options)

Parámetro	Tipo	Default	Descripción
msj	string	required	Mensaje a mostrar
iconExpression	string	'done_light'	Nombre de la expresión/ícono
duration	number	4000	Duración en ms (0 = no auto-dismiss)
showClose	boolean	true	Mostrar botón cerrar
accent	boolean	false	Usar variante accent
ctaText	string	undefined	Texto del botón de acción
ctaCallback	function	undefined	Callback del botón de acción

CSS Classes

Clase	Descripción
.snackbar	Contenedor base: posición fija centrada abajo (bottom: 24px), fondo --snackbar-bg (por defecto --color-forrest), z-index: var(--z-index-snackbar) (2000)
.snackbar--accent	Variante accent: fondo --color-green-neon y texto --color-dark-forrest
.snackbar--show-text	Estado que expande el snackbar y revela mensaje, CTA y botón cerrar
.snackbar--hide	Estado de salida: colapsa el snackbar y lo desplaza fuera de pantalla
.snackbar__expression	Imagen de expresión (40x40px) con animación de entrada
.snackbar__content	Contenedor del mensaje y el CTA: columna en móvil, fila desde 768px
.snackbar__message	Texto del mensaje (una línea con elipsis)
.snackbar__cta	Botón de acción (CTA); se combina con .bttn
.snackbar__spacer	Separador vertical entre el contenido y el botón cerrar
.snackbar__close	Botón de cerrar

Propiedades CSS personalizadas

Propiedad	Descripción
--snackbar-bg	Color de fondo; si no se define usa --color-forrest
--snackbar-scale	Escala del snackbar (1 por defecto); openSnackbar la reduce en los apilados
--snackbar-bottom	Posición inferior final de la animación de entrada (24px por defecto)

Apilado

openSnackbar asigna en línea bottom, --snackbar-bottom, z-index (desde 9000) y --snackbar-scale a cada snackbar visible. Si montas el markup a mano, esas propiedades quedan a tu cargo.

Flutter

TdnSnackbar

Métodos estáticos para mostrar snackbars:

TdnSnackbar()

Parámetro	Tipo	Default	Descripción
context	BuildContext	required	Contexto de la aplicación
message	String	required	Mensaje a mostrar
actionLabel	String?	null	Texto del botón de acción
onAction	VoidCallback?	null	Callback del botón de acción
duration	Duration	Duration(seconds: 4)	Duración de visualización

TdnSnackbar.success()

Snackbar de éxito con estilo verde.

Parámetro	Tipo	Default	Descripción
context	BuildContext	required	Contexto de la aplicación
message	String	required	Mensaje a mostrar
duration	Duration	Duration(seconds: 4)	Duración de visualización

TdnSnackbar.info()

Snackbar informativo con estilo accent.

Parámetro	Tipo	Default	Descripción
context	BuildContext	required	Contexto de la aplicación
message	String	required	Mensaje a mostrar
duration	Duration	Duration(seconds: 4)	Duración de visualización

---

Uso Rápido

// Importar función
import { openSnackbar } from '@tiendana/utils';

// Básico
openSnackbar({
  msj: 'Operación completada'
});

// Con opciones
openSnackbar({
  msj: 'Guardado exitoso',
  iconExpression: 'done_light',
  duration: 4000,
  showClose: true
});

// Con CTA
openSnackbar({
  msj: 'Archivo listo',
  ctaText: 'Descargar',
  ctaCallback: () => { /* acción */ },
  duration: 0  // No auto-dismiss
});

// Variante accent
openSnackbar({
  msj: 'Notificación especial',
  accent: true,
  iconExpression: 'smile_dark'
});

Expresiones Disponibles

Expresión	Tema	Uso Recomendado
done_light / done_dark	Success	Operaciones exitosas
congrat_light / congrat_forrest / congrat_dark	Celebration	Logros, completados
error_light / error_dark	Error	Errores, fallos
error_green_neon_light / error_green_neon_dark	Warning	Advertencias importantes
smile_light / smile_dark	Positive	Mensajes positivos
play_light / play_dark	Action	Inicios, reproducciones

Documentación Detallada

• Función JavaScript: Utilities - openSnackbar

Ver También

• Utilities - openSnackbar - Documentación completa de la función
• Utilities - SVG - Iconos utilizados en snackbars
• Foundations - Colors - Paleta de colores