Wishlist Button
El corazón. En la plantilla de un producto o de una entrada guarda esa página; dentro de un bucle de Etch, cada elemento. Es un botón de verdad que dice si está guardado con el corazón y su estado pulsado —«Save Canvas Sneaker, botón de alternancia, pulsado»— y no cambiando sus palabras.
Cualquiera de los dos corazones puede ser un SVG propio, la etiqueta puede verse siempre o flotar al pasar el puntero, y al pulsarlo hace una pequeña animación — nunca para quien pide a su sistema menos movimiento.
Sus opciones
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Label | texto | Save | Sale junto al corazón cuando el botón lleva texto, y siempre es el principio de su nombre accesible —«Save Canvas Sneaker»—. No cambia al pulsarlo: si está guardado lo dicen el corazón y el estado pulsado, no un cambio de palabras. |
| Display | elección: icon, both, text | icon | Sólo el icono es lo que pide una tarjeta; con la etiqueta, se lee mejor en la ficha de un producto. |
| Label shows | elección: always, hover | always | Con «Icon and label». Al pasar el puntero, flota junto al icono como un tooltip —también con el teclado, y Escape la esconde— y el botón conserva el tamaño del icono. |
| Label side | elección: end, start | end | |
| Icons → Icon | imagen | el icono de fábrica | |
| Icons → Saved icon | imagen | el icono de fábrica | |
| Animate | sí / no | on | Un pequeño salto al guardar y un encogimiento al quitar, sólo cuando alguien lo pulsa. Nunca para quien pide a su sistema menos movimiento. |
| Item | texto | {this.id} | Lo que se guarda. En la ficha de un producto o en una entrada es esa página; dentro de un bucle de Etch cuyo elemento se llama «this», cada elemento. Sólo hay que atarlo a mano en un bucle con otro nombre. |
| Item type | texto | {this.type} | Su tipo de contenido, que es lo que permite contar la lista por tipos. |
| Item name | texto | {this.title} | Lo leen los lectores de pantalla después de la etiqueta, para que veinte corazones en una rejilla sean veinte botones distintos y no veinte «Save». |
| Colors → Heart | texto | var(--fe-woo-color, #111827) | |
| Colors → Saved | texto | var(--fe-woo-accent, #111827) | |
| Colors → Floating label background | texto | var(--fe-woo-surface, #ffffff) | |
| Colors → Floating label text | texto | var(--fe-woo-color, #111827) | |
| Size → Heart size | texto | 1.25rem | |
| Size → Button size | texto | var(--fe-woo-control-size, 2.75rem) |
Variables propias
| Variable | Por defecto | Qué controla |
|---|---|---|
--fe-fav-size | var(--fe-woo-control-size, 2.75rem) | Lo grande que es el botón: el objetivo que tiene que acertar un dedo. Lee --fe-woo-control-size. |
--fe-fav-icon-size | 1.25rem | El corazón. En el contador lee --fe-woo-icon-size, compartida con los iconos del carrito y de la búsqueda. |
--fe-fav-color | var(--fe-woo-color, #111827) | El corazón, y su etiqueta, mientras no hay nada guardado. |
--fe-fav-active | var(--fe-woo-accent, #111827) | El corazón una vez guardado. |
--fe-fav-gap | 0.5rem | El espacio entre el corazón y su etiqueta, o su insignia. |
--fe-fav-focus-ring | var(--fe-woo-focus-ring, #2563eb) | El anillo que dibuja el foco del teclado. |
--fe-fav-tip-bg | var(--fe-woo-surface, #ffffff) | El fondo de la etiqueta flotante. |
--fe-fav-tip-color | var(--fe-woo-color, #111827) | El texto de la etiqueta flotante. |
--fe-fav-tip-border | var(--fe-woo-border, #e5e7eb) | El borde de la etiqueta flotante. |