¡Recordatorio de nuevas funciones geniales de CodePen! Probablemente haya visto un montón de demostraciones “interactivas” que le permiten cambiar dinámicamente los valores desde los paneles de la interfaz de usuario integrados directamente en la demostración. Demostración de Jhey Inmediatamente me viene a la mente algo como esto:
Esa herramienta se llama Panel de ajuste Haz el trabajo. Hay otro que se llama Perilla pasar a través son pares o Eso Adam Argyle Utilizado con frecuencia:
A menudo lo finjo de cualquiera de las siguientes maneras Hackear casilla de verificación O cuando esté demostrando un concepto muy específico, agregue algo de JavaScript:
Bien, suficientes ejemplos, porque CodePen tiene una herramienta que desarrolló llamada variable de diapositiva. Todo lo que tienes que hacer es importarlo y llamarlo en el panel de JavaScript:
import { slideVars } from "@codepen/slidevars";
slideVars.init();Si lo desea, puede importarlo a su proyecto en CodePen.
Esas dos líneas pueden marcar una gran diferencia. Detecta automáticamente las variables CSS en el CSS y crea el panel para usted, absolutamente en la esquina superior derecha:
Parece que tienes que declarar tus variables en :root Elemento con uso predeterminado. Lo intenté Alcancelos directamente a los elementos Esto no funcionará. Sin embargo, esto se puede lograr mediante la configuración manual.
Genial, ¿verdad? Puede configurar manualmente el tipo de entrada, el rango de valores, el valor predeterminado, el tipo de unidad y el rango para el elemento en el que se define la variable. En términos de unidades, soporta varios unidades numéricas CSS. Esto incluye valores sin unidades, aunque la documentación no lo dice explícitamente. solo quédate unit El atributo es una cadena vacía ("").
Supongo que lo único que quiero es decirle a slideVars exactamente qué incrementos usar al configurarlo manualmente. Por ejemplo, los valores sin unidades simplemente se incrementan en números enteros, incluso si define el valor predeterminado como decimal:
Pero funciona en modo predeterminado:
Hay una manera de colocar SlideVars donde quieras, simplemente coloca el elemento personalizado donde quieras en el HTML. Se coloca automáticamente en la parte inferior del HTML. <body> Por defecto.
<slide-vars>
<p>Custom Label!</p>
</slide-vars>O use CSS seleccionando un elemento personalizado:
¡Qué divertido!
