Toast de etiqueta de equipaje
Una etiqueta de maleta cuelga de su cordón y se balancea como un péndulo; al pasar el ratón la empujas y vuelve a oscilar.
Ajustes
Código
<div class="uvq09-tag"><i class="rl" aria-hidden="true"></i><button type="button" class="fire">Mostrar de nuevo</button><div class="tt" role="status"><span class="st" aria-hidden="true"></span><div class="tg"><i class="eye" aria-hidden="true"></i><span class="rt" aria-hidden="true"><b>MAD</b><i>✈</i><b>LIS</b></span><b class="tx">Tu maleta está en la cinta 7</b><small>Vuelo TP 1027 · ha llegado a las 14:05</small><span class="ft"><i class="bc" aria-hidden="true"></i><button type="button" class="ok">Ya la tengo</button></span></div></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Toasts
Ver todos: ToastsDónde usarlo
Los avisos de recogida de equipaje merecen algo mejor que una franja gris. Este toast cuelga de una barra una etiqueta de maleta con cordón y ojal, códigos de aeropuerto en letra gruesa y código de barras, y unas líneas de JavaScript calculan un péndulo amortiguado para que entre balanceándose y se quede quieta. Al pasar el puntero o pulsar las flechas, recibe un empujón.
El color principal es la franja y el botón, y el secundario el cordón. Ajusta la rigidez y el amortiguamiento en el script para una etiqueta más pesada o más ligera; con movimiento reducido queda colgada sin moverse. Va bien en apps de viaje, aerolíneas y guardarropas.