Wishlist Count
Un enlace a la página de la wishlist con cuántos elementos hay guardados, para la cabecera. Como el contador del carrito, el número nunca viaja en el HTML, así que es seguro detrás de una caché de página, y toma el mismo tamaño, línea y color que los iconos del carrito y de la búsqueda que tiene al lado.
Sus opciones
Props
| Prop | Tipo | Por defecto | Qué hace |
|---|---|---|---|
| Accessible name | texto | Wishlist | Lo leen los lectores de pantalla; cuando ya sabe cuántos hay, dice «Wishlist: 3 items». |
| Icon | imagen | el icono de fábrica | Cualquier SVG, de la biblioteca de medios o pegado como URI data:. Sus colores se cambian por el del icono, así que sigue a la paleta. |
| Link | texto | {options.fefav.url} | La página de la wishlist elegida en Fancy Etch → Wishlist. Sin ella no hay adónde ir. |
| Hide badge when empty | sí / no | on | Un cero en una cabecera es ruido. El número sigue en el nombre accesible del enlace en cualquier caso. |
| Badge position | elección: after, before, over | after | Sobre el icono es lo que pide una cabecera compacta: el enlace mide lo mismo que el corazón. |
| Colors → Icon | texto | currentColor | |
| Colors → Badge background | texto | var(--fe-woo-accent, #1f2937) | |
| Colors → Badge text | texto | var(--fe-woo-accent-color, #ffffff) | |
| Size → Icon size | texto | var(--fe-woo-icon-size, 1.5rem) |
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 | var(--fe-woo-icon-size, 1.5rem) | El corazón. En el contador lee --fe-woo-icon-size, compartida con los iconos del carrito y de la búsqueda. |
--fe-fav-stroke | var(--fe-woo-icon-stroke, 2) | Lo grueso de la línea del corazón. Lee --fe-woo-icon-stroke, compartida con los iconos del carrito y de la búsqueda. |
--fe-fav-hover | color-mix(in srgb, var(--fe-woo-accent, #111827) 12%, transparent) | El tinte de detrás al pasar el puntero, el mismo que en los iconos del carrito y de la búsqueda. |
--fe-fav-control-radius | var(--fe-woo-control-radius, 0.63rem) | Las esquinas de ese tinte. |
--fe-fav-color | var(--fe-woo-color, #111827) | El corazón, y su etiqueta, mientras no hay nada guardado. |
--fe-fav-badge-bg | var(--fe-woo-accent, #1f2937) | El círculo pequeño que lleva el número. |
--fe-fav-badge-color | var(--fe-woo-accent-color, #ffffff) | El número. |
--fe-fav-badge-size | 1.25rem | Lo grande que es ese círculo. |
--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. |