Playing With CodePen slideVars
摘要
CodePen推出了名为slideVars的原生工具，用于在演示中动态调整CSS变量。用户只需导入并调用该工具，它便会自动检测CSS中的变量，并在界面右上角生成一个控制面板。该工具支持手动配置输入类型、数值范围、默认值、单位类型及作用域，并兼容各类CSS数值单位。用户也可通过自定义元素调整面板位置。
Super cool new CodePen feature alert! You’ve probably seen a bunch of “interactive” demos that let you changed values on the fly from a UI panel embedded directly in the demo. Jhey’s demos come immediately to mind, like this one:
CodePen Embed FallbackThat’s a tool called TweakPane doing the work. There’s another one called Knobs by Yair Even Or that Adam Argyle often uses:
CodePen Embed FallbackI’ve often faked it with either the Checkbox Hack or a sprinkle of JavaScript when I’m demoing a very specific concept:
CodePen Embed FallbackOK, enough examples because CodePen has a homegrown tool of its own called slideVars. All you have to do is import it and call it in the JavaScript panel:
import { slideVars } from "@codepen/slidevars";
slideVars.init();You can import it into a project off CodePen if you’re so inclined.
That two-liner does a lot of lifting. It auto-detects CSS variables in your CSS and builds the panel for you, absolutely-positioned in the top-right corner:
CodePen Embed FallbackIt looks like you have to declare your variables on the :root element with default usage. I tried scoping them directly to the element and it was a no-go. It’s possible with a manual configuration, though.
Pretty cool, right? You can manually configure the input type, a value range, a default value, unit type, and yes, a scope that targets the element where the variables are defined. As far as units go, it supports all kinds of CSS numeric units. That includes unit-less values, though the documentation doesn’t explicitly say it. Just leave the unit property as an empty string ("").
I guess the only thing I’d like is to tell slideVars exactly what increments to use when manually configuring things. For example, unit-less values simply increment in integers, even if you define the default value as a decimal:
CodePen Embed FallbackIt works in default mode, however:
CodePen Embed FallbackThere’s a way to place the slideVars wherever you want by slapping a custom element where you want it in the HTML. It’s auto-placed at the bottom of the HTML <body> by default.
<slide-vars>
<p>Custom Label!</p>
</slide-vars>Or CSS it by selecting the custom element:
CodePen Embed FallbackSo much fun!
CodePen Embed FallbackPlaying With CodePen slideVars originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.
转载信息
评论 (0)
暂无评论，来留下第一条评论吧