Ubinafsishaji · Needless UI

Kila kijenzi kina haiba unayoweza kuibadilisha: springi inayoendesha mwendo wake, kitufe kinavyofanya chini ya kidole chako, jinsi vidirisha na menyu vinavyowasili, umbo na ukubwa wa pembe zake, na nafasi kinayochukua. Kila kimoja ni attribute moja kwa kila kitu kilicho ndani ya kipengele, au input moja kwa kijenzi kimoja.

Attribute moja, tawi zima

Weka attribute za data-nui-* kwenye <body> kwa programu nzima, au kwenye kipengele chochote kwa sehemu moja tu. Iliyo karibu zaidi ndiyo hushinda, kwa hivyo unaweza kuziweka moja ndani ya nyingine. Zinaweka custom properties za CSS pekee, kwa hivyo zinafanya kazi vivyo hivyo na framework yoyote, au bila 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>

Kijenzi kimoja

Katika Angular, nuiButton, nuiDialog na nuiMenu hupokea thamani hizo hizo kama input. Input usizoweka hufuata attribute zinazozizunguka.

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>

Springi zinazokusanywa kuwa CSS

Mwendo ni fizikia ya springi: ukakamavu, ufifishaji na masi badala ya muda na mkunjo. Kikusanyaji cha token hutatua kila springi na kuiandika katika CSS kama muda wa kutulia pamoja na easing ya linear(), hivyo huendeshwa kwenye compositor bila JavaScript. Springi sita huja kama token, kuanzia --nui-spring-snappy hadi --nui-spring-mechanical, na --nui-motion hushikilia ile inayotumika.

Springi nyingine yoyote iko umbali wa input moja tu. Angular huikusanya wakati wa utekelezaji kwa hesabu zilezile, na springTransition() hukupa CSS kwa ajili ya vipengele vyako mwenyewe.

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}`;

Chochote katikati

Preset ni njia za mkato tu. Kwa chochote kingine, weka custom properties mwenyewe: transform yoyote kwa --nui-press na --nui-enter, na namba yoyote kwa --nui-radius-scale na --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;
}

Ufikivu

Mfumo unapoomba mwendo mdogo, springi hugeuka kuwa badiliko la papo hapo, na athari za kubonyeza na za kuingia huacha kusogea. Msongamano haushushi kamwe kidhibiti chini ya eneo la kubofya la 24px linalotakiwa na WCAG 2.2, na hakuna preset inayogusa rangi, kwa hivyo kila ukaguzi wa utofautishaji bado ni halali. Vivinjari visivyo na corner-shape huchora kila pembe kwa mviringo.