Kustomisasi · Needless UI

Saben komponen nduweni watak sing bisa panjenengan owahi: pegas sing dienggo obah, apa sing ditindakake tombol ing sangisore driji, kepriye dialog lan menu teka, wangun lan ukuran pojoke, sarta sepira akehe papan sing dienggo. Saben-saben iku siji attribute kanggo kabeh sing ana ing njero sawijining elemen, utawa siji input kanggo siji komponen.

Siji attribute, sak pang wutuh

Pasang attribute data-nui-* ing <body> kanggo kabeh aplikasi, utawa ing elemen apa wae kanggo sabagean wae. Sing paling cedhak sing menang, mula attribute-attribute iki bisa disusun. Attribute iki mung nyetel CSS custom property, dadi lakune padha wae karo framework apa wae, utawa tanpa framework.

customize.html

<body data-nui-motion="bouncy" data-nui-corners="squircle">
  <!-- Everything here bounces and has squircle corners… -->
  <main data-nui-press="squish" data-nui-density="compact">
    <!-- …buttons in here squish, and controls are compact… -->
  </main>
  <aside data-nui-motion="none" data-nui-radius="none">
    <!-- …and nothing in here moves or has rounded corners. -->
  </aside>
</body>

Siji komponen

Ing Angular, nuiButton, nuiDialog lan nuiMenu nampa nilai sing padha minangka input. Input sing ora panjenengan setel bakal ngetutake attribute ing sakubenge.

customize-inputs.html

<button nuiButton press="rubber" motion="elastic">Boing</button>

<dialog nuiDialog [(open)]="editing" enter="flip" corners="squircle">…</dialog>

<button nuiButton [nuiMenuTrigger]="actions">Actions</button>
<div nuiMenu #actions="ngMenu" enter="unfold" motion="mechanical">…</div>

Pegas, dikompilasi dadi CSS

Obah iku fisika pegas: kekakuan, redaman lan massa, dudu durasi lan kurva. Compiler token ngrampungake persamaan saben pegas lan nulis menyang CSS minangka wektu sing dibutuhake nganti anteng sarta easing linear(), dadi lakune ana ing compositor tanpa JavaScript. Enem pegas kalebu minangka token, saka --nui-spring-snappy nganti --nui-spring-mechanical, lan --nui-motion nyimpen pegas sing lagi dienggo.

Pegas liyane apa wae mung butuh siji input. Angular ngompilasi pegas kasebut nalika runtime nganggo solver sing padha, lan springTransition() menehi CSS kanggo elemen panjenengan dhewe.

customize-spring.ts

import { springTransition } from '@needless-ui/angular';

// In a template, any spring is an input:
// <button nuiButton [spring]="{ stiffness: 900, damping: 12 }">Save</button>

// Anywhere else, compile it yourself:
const wobbly = springTransition({ stiffness: 120, damping: 4, mass: 1.2 });
// '4152ms linear(0, 0.014 0.41%, …, 1)'

const card = document.querySelector<HTMLElement>('.card')!;
card.style.transition = `transform ${wobbly}`;

Apa wae ing antarane

Preset iku mung trabasan. Kanggo liyane, setel dhewe custom property-ne: transform apa wae kanggo --nui-press lan --nui-enter, angka apa wae kanggo --nui-radius-scale lan --nui-density.

customize.css

.checkout {
  --nui-motion: var(--nui-spring-jelly);
  --nui-press: scale(0.92) rotate(-2deg);
  --nui-enter: translateY(100%);
  --nui-radius-scale: 1.5;
  --nui-density: 1.1;
}

Aksesibilitas

Yen sistem nyuwun obah sing luwih sithik, pegas dadi owah-owahan sanalika, lan efek pencetan sarta animasi mlebu mandheg obah. Kapadhetan ora tau ndadekake kontrol luwih cilik tinimbang ukuran target 24px saka WCAG 2.2, lan ora ana preset sing ndemek werna, dadi saben pamriksan kontras tetep laku. Browser tanpa corner-shape nggambar saben pojok bunder.