Wishlist Notice
Quitar algo en la página de la wishlist se lleva su tarjeta y ofrece Deshacer en un aviso flotante. Coloca un Wishlist Notice en cualquier parte de esa página para darle tus colores, tus palabras y su posición: se queda escondido hasta que hace falta. Las páginas sin uno enseñan el aviso con las palabras de Fancy Etch → Texts → Wishlist.
Sus opciones
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Message | texto | %s was removed from your wishlist. | %s es donde va el nombre de lo que se quitó. Sin él, el mensaje dice lo mismo para todo. |
| Undo label | texto | Undo | |
| Close label | texto | Dismiss | Lo leen los lectores de pantalla en el botón de cerrar, que sólo enseña una cruz. |
| Position | elección: bottom, top, middle | bottom | Arriba va bien en una tienda con algo fijo abajo: un chat, un aviso de cookies. En medio tapa la página. |
| Alignment | elección: center, start, end | center | |
| Colors → Background | texto | var(--fe-woo-surface, #ffffff) | |
| Colors → Text | texto | var(--fe-woo-color, #111827) | |
| Colors → Border | texto | var(--fe-woo-border, #e5e7eb) | |
| Colors → Button background | texto | color-mix(in srgb, var(--fe-fav-toast-color, #111827) 7%, transparent) | Un tinte del propio color del texto del aviso, para que se vea sobre cualquier fondo. |
| Colors → Button hover | texto | var(--fe-woo-accent-soft, color-mix(in srgb, var(--fe-woo-accent, #111827) 14%, transparent)) | |
| Corner radius | texto | var(--fe-woo-radius, 0.75rem) |
Variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-fav-toast-bg | var(--fe-woo-surface, #ffffff) | El fondo del aviso. |
--fe-fav-toast-color | var(--fe-woo-color, #111827) | Su texto, y la base del tinte de sus botones. |
--fe-fav-toast-border | var(--fe-woo-border, #e5e7eb) | Su borde. |
--fe-fav-toast-radius | var(--fe-woo-radius, 0.75rem) | Sus esquinas. Lee el radio de superficie, no el de control. |
--fe-fav-toast-button-bg | color-mix(in srgb, var(--fe-fav-toast-color, #111827) 7%, transparent) | Los botones Deshacer y cerrar: un tinte del color del texto, para que se vean sobre cualquier fondo. |
--fe-fav-toast-hover | var(--fe-woo-accent-soft, color-mix(in srgb, var(--fe-woo-accent, #111827) 14%, transparent)) | Esos botones al pasar el puntero. |