Quiet UI
Web Components
今回は9月にリリースされたQuiet UIを紹介します。
注意: 当時公開されていたのですが、数ヶ月後に全て非公開になってしまったので、リンクが死んでいる状態です。
Quiet UIとは #
Quiet UIとは、Web ComponentsベースのUIコンポーネントライブラリです。
同じくWeb ComponentsベースのコンポーネントライブラリであるWeb Awesomeと同じ作者が作っているものです。しかし、安定したコンポーネントを提供しようとしているWeb Awesomeとは対象的に、作者の趣味・興味・新しいアイディアを色々取り入れたものになっています。ElementInternalsによるフォーム検証やPopover APIなど、まだNewly Availableな機能がPolyfillとともに利用されているようです。下に紹介するブログ記事でも紹介があるように、color-mix()とOKLCHを用いたカラーパレットの生成なども行われています。
つまり、新しい機能やアイディアを試す研究室・遊び場のような形になっており、良さそうなものはWeb Awesome側に採用されたりすることもあるようです。
次のセクションでも紹介するように、ユニークなコンポーネントたちが開発されており、他のUIコンポーネントライブラリではあまり見ないような、“playground”という単語が適しているライブラリになっています。
ユニークなコンポーネントたち #
- コンポーネントの説明
- 実装で面白いところあれば
- アクセシビリティの観点
Comparison #
ChromaticなどVRTの差分表示で見るようなUIです。 ドラッグ可能なバーを左右に移動させることで、左右の画像の表示割合を操作することができます。
コードはここです https://github.com/quietui/quiet/blob/next/src/components/comparison/comparison.ts
ドキュメントの最下部にAPIが書かれています。
startとendのslotに、左右に表示するDOMを入れるようになっていたり、draggingなどのcustom stateが定義されていたり、dividerやhandleなどのCSS partsが提供されていてスタイルを当てられるようになっていたりします。
スライダーなので、APGのSlider Patternに従ってrole="slider"の要素にaria-valuenowやaria-valuemin、aria-orientationなどがつけられていたり、矢印キーによる操作ができるようになっています。
Joystick, Slide Activator, Flip Card #
面白い動きシリーズです。
Dropdown #
Popover APIを使っている例です。role="menu"の要素にpopover="manual"をつけて、showMenu関数内でshowPopover()しています。
Baseline: Limited availabilityであるAnchor Positioningはまだ利用していないようです。
Passcode #
ElementInternals.setValidityを用いてバリデーションをしている例です。
少し上の方を見ると、requestSubmitやsetFormValueなども使われています。
ARIA系のElementInternalsはQuiet UI内のどこでも利用されていないようで、LitのfirstUpdated関数内でsetAttributeすることでShadow hostに属性を設定しているようです。