Reference
API and events
Unslop.register, Unslop.init, the U utilities and the u:change and u:apply events.
window.Unslop
The only global. Everything in the system registers on it and is mounted through the data-u attribute.
| Function | What it does |
|---|---|
Unslop.register(nome, mount) | mount(el, props, U) mounts and may return { update(props), destroy() }. Registering after load mounts whatever is already on the page. |
Unslop.init(raiz) | Looks for data-u elements not yet mounted inside root (default: the page). |
el._u | What the mount returned, like el._u.value on the slider. |
Unslop.register("contador", (el, props, U) => {
const stop = U.count(0, props.to || 100, (v) => (el.textContent = U.fmt(Math.round(v))));
return { destroy: stop };
});<span data-u="contador" data-u-props='{"to":2180}'></span>U utilities
| Utility | What it does |
|---|---|
U.fmt(n, options) | Number in pt-BR with Intl.NumberFormat. |
U.count(from, to, cb, ms) | Counts from one value to another (900ms). Returns the canceler. |
U.anim(ms, quadro) | Interpolates from 0 to 1 with a soft ease-out. Returns the canceler. |
U.svg(tag, atributos, pai) | Creates an svg element. |
U.color(i) | Series color: U.color(0) is var(--c1). |
U.resize(el, cb) | Watches the size, one notice per frame. Returns the unsubscriber. |
U.emit(el, nome, detail) | Fires u:nome, which bubbles up the page. |
U.reduced | true when the OS asks for reduced motion. U.count and U.anim already respect it. |
U.icon(nome) | System icon svg: chevron-down, chevron-left, chevron-right, chevrons-up-down, arrow-left, arrow-right, check, search, plus. |