커스터마이징 · Needless UI

모든 컴포넌트에는 바꿀 수 있는 개성이 있습니다. 움직임을 결정하는 스프링, 손가락으로 눌렀을 때 버튼의 반응, 다이얼로그와 메뉴가 등장하는 방식, 모서리의 모양과 크기, 그리고 차지하는 공간입니다. 각각 속성 하나로 요소 안의 모든 것에, 또는 입력 하나로 컴포넌트 하나에 적용할 수 있습니다.

속성 하나로 하위 트리 전체에

data-nui-* 속성을 <body>에 지정하면 앱 전체에, 다른 요소에 지정하면 그 부분에만 적용됩니다. 가장 가까운 속성이 우선하므로 중첩할 수 있습니다. 이 속성들은 CSS 사용자 지정 속성만 설정하므로 어떤 프레임워크에서든, 프레임워크 없이도 똑같이 동작합니다.

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>

컴포넌트 하나에

Angular에서는 nuiButton, nuiDialog, nuiMenu가 같은 값을 입력으로 받습니다. 설정하지 않은 입력은 주변 속성을 따릅니다.

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>

CSS로 컴파일되는 스프링

모션은 스프링 물리로 정의합니다. 지속 시간과 곡선 대신 강성, 감쇠, 질량을 사용합니다. 토큰 컴파일러가 각 스프링의 방정식을 풀어 멈출 때까지 걸리는 시간과 linear() 이징으로 CSS에 기록하므로, JavaScript 없이 컴포지터에서 실행됩니다. --nui-spring-snappy부터 --nui-spring-mechanical까지 여섯 가지 스프링이 토큰으로 제공되며, 사용 중인 스프링은 --nui-motion에 담깁니다.

다른 스프링도 입력 하나면 됩니다. Angular가 같은 솔버로 런타임에 컴파일하며, springTransition()을 사용하면 직접 만든 요소에 쓸 CSS를 얻을 수 있습니다.

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

그 사이의 모든 값

프리셋은 지름길일 뿐입니다. 그 밖의 값은 사용자 지정 속성을 직접 설정하면 됩니다. --nui-press와 --nui-enter에는 어떤 transform이든, --nui-radius-scale과 --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;
}

접근성

시스템에서 동작 줄이기를 요청하면 스프링은 즉시 끝나고, 누르기와 등장 효과도 움직이지 않습니다. 밀도를 어떻게 설정해도 컨트롤이 WCAG 2.2의 타깃 크기인 24px보다 작아지지 않으며, 어떤 프리셋도 색상을 건드리지 않으므로 모든 명도 대비 검사가 그대로 유효합니다. corner-shape를 지원하지 않는 브라우저에서는 모든 모서리가 둥글게 그려집니다.