Referência
API e eventos
Unslop.register, Unslop.init, os utilitários U e os eventos u:change e u:apply.
window.Unslop
O único global. Tudo do sistema se registra nele e é montado pelo atributo data-u.
| Função | O que faz |
|---|---|
Unslop.register(nome, mount) | mount(el, props, U) monta e pode devolver { update(props), destroy() }. Registrar depois do carregamento já monta o que estiver na página. |
Unslop.init(raiz) | Procura data-u ainda não montados dentro de raiz (padrão: a página). |
el._u | O que o mount devolveu, como el._u.value no 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>
Utilitários U
| Utilitário | O que faz |
|---|---|
U.fmt(n, opções) | Número em pt-BR com Intl.NumberFormat. |
U.count(de, até, cb, ms) | Conta de um valor a outro (900ms). Devolve o cancelador. |
U.anim(ms, quadro) | Interpola de 0 a 1 com saída suave. Devolve o cancelador. |
U.svg(tag, atributos, pai) | Cria elemento svg. |
U.color(i) | Cor da série: U.color(0) é var(--c1). |
U.resize(el, cb) | Observa o tamanho, um aviso por quadro. Devolve o desligador. |
U.emit(el, nome, detail) | Dispara u:nome, que sobe pela página. |
U.reduced | true quando o sistema pede movimento reduzido. U.count e U.anim já respeitam. |
U.icon(nome) | Svg de ícone do sistema: chevron-down, chevron-left, chevron-right, chevrons-up-down, arrow-left, arrow-right, check, search, plus. |