Abanico

Menú que se despliega en abanico, con opciones escalonadas y animación de resorte. Acepta enlaces y botones.

Vista previa en vivo

Instalación

1. Instala el paquete

npm i furin

2. Impórtalo

import { Abanico } from "furin";

También con pnpm add furin, yarn add furin o bun add furin. Cada componente trae su CSS y lo importa por ti.

Prop	Tipo	Por defecto	Descripción
items	AbanicoItem[]	"5 opciones de ejemplo"	Opciones del menú: cada una es un enlace (href) o un botón (onSelect).
etiqueta	string	"Menú"	Texto del botón central; también es el nombre accesible del menú.
apertura	number	150	Ángulo total que abre el abanico, en grados.
radio	number	170	Distancia en px del botón central a las opciones.
direccion	"arriba" \| "abajo" \| "izquierda" \| "derecha"	"arriba"	Hacia dónde se despliega el abanico.
papel	string	"#FFFFFF"	Color del papel del abanico.
varilla	string	"#E8452C"	Color de las varillas y del borde del papel.
boton	string	"#E8452C"	Color del botón central y del resaltado de la opción activa.
colorTexto	string	"#111111"	Color del texto de las opciones.
abiertoInicial	boolean	false	Si es true, el abanico nace abierto (se despliega al montarse).
alCambiar	(abierto: boolean) => void	undefined	Se llama cada vez que el menú se abre o se cierra.
className	string	""	Clase CSS extra para el contenedor.
style	CSSProperties	"{}"	Estilos en línea del contenedor.