Keɓancewa · Needless UI

Kowane component yana da hali da za ku iya canzawa: spring ɗin da yake motsi da shi, abin da maɓalli ke yi a ƙarƙashin yatsanku, yadda dialogs da menus ke bayyana, siffa da girman kusurwoyinsu, da yawan sararin da suke ɗauka. Kowanne daga cikinsu attribute ɗaya ne ga duk abin da ke cikin element, ko input ɗaya ga component guda.

Attribute ɗaya ga dukan reshe

Ku sa attributes na data-nui-* a kan <body> don dukan manhajar, ko a kan kowane element don wani sashe nata kawai. Mafi kusa ne ke rinjaye, don haka ana iya sa su a cikin juna. CSS custom properties kawai suke saitawa, don haka suna aiki iri ɗaya da kowane framework, ko ba tare da framework ba.

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>

Component ɗaya

A Angular, nuiButton, nuiDialog da nuiMenu suna karɓar waɗannan ƙimomin a matsayin inputs. Inputs ɗin da ba ku saita ba suna bin attributes da ke kewaye da su.

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>

Springs da ake mayarwa CSS

Motsi a nan physics ne na spring: tauri, rage girgiza da nauyi, maimakon tsawon lokaci da lanƙwasa. Compiler na tokens yana warware kowane spring, kuma yana rubuta shi a CSS a matsayin lokacin da yake ɗauka kafin ya tsaya da kuma easing na linear(), don haka yana aiki a kan compositor ba tare da JavaScript ba. Springs shida suna zuwa a matsayin tokens, daga --nui-spring-snappy zuwa --nui-spring-mechanical, kuma --nui-motion yana riƙe da wanda ake amfani da shi.

Duk wani spring kuma input ɗaya kawai yake buƙata. Angular yana mayar da shi CSS a lokacin aiki da mai warware lissafi iri ɗaya, kuma springTransition() yana ba ku CSS ɗin don elements ɗinku.

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

Duk abin da ke tsakani

Presets gajerun hanyoyi ne kawai. Don duk wani abu dabam, ku saita custom properties da kanku: kowane transform ga --nui-press da --nui-enter, da kowace lamba ga --nui-radius-scale da --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;
}

Sauƙin amfani ga kowa

Idan tsarin ya nemi rage motsi, springs suna zama nan take, kuma tasirin dannawa da shigowa suna daina motsi. Saitin sarari ba ya taɓa sa wani control ya yi ƙasa da girman wurin taɓawa na pixels 24 na WCAG 2.2, kuma babu preset da ke taɓa launuka, don haka duk gwajin bambancin launi yana nan daram. Burauzoji marasa corner-shape suna zana kowace kusurwa a zagaye.