カスタマイズ · Needless UI

どのコンポーネントにも、変更できる個性があります。動きを決めるスプリング、指で押したときのボタンの反応、ダイアログやメニューの登場のしかた、角の形と大きさ、そして占めるスペースの広さです。いずれも、要素内のすべてには属性1つで、1つのコンポーネントには入力1つで指定できます。

属性1つでサブツリー全体に

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>

1つのコンポーネントに

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 まで6種類のスプリングがトークンとして用意されており、使用中のスプリングは --nui-motion が保持します。

ほかのスプリングも、入力1つで使えます。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 に対応していないブラウザーでは、角はすべて丸く描画されます。