スタイル自由でアクセシブルなHeadless UI

全4回

スタイルを自由に設定でき、かつアクセシブルなUIライブラリ、Headless UIを紹介するシリーズです。普段Webアプリケーションでよく見かけるようなUIに、好きな方法でスタイルを当てることができます。

最終回 Dropdown Menuをアニメーションさせてみよう

第2回で作成したDropdown Menuにアニメーションをつけていきます。Headless UIはアニメーションの部分だけがTransitionコンポーネントとして分離されているので、Menuコンポーネント自体は、シンプルな設計を維持することができます。

第3回 Transitionでアニメーションさせてみよう

前回作成したDropdown Menuにアニメーションをつけたいのですが、Dropdown Menuのコンポーネント自体にはアニメーションの機能はありません。アニメーションだけを実現するTransitionコンポーネントを利用します。

第2回 Dropdown Menuを使ってみよう

Headless UIのDropdown Menuを使って、メニューのUIを作ってみます。メニューを開いたら画面を半透明黒で覆うオーバーレイを出し、選択しているメニューをハイライトさせるところまでを実装してみましょう。

第1回 Headless UIの特徴と利用準備

自由に好きな方法でスタイルを当てることができ、なおかつアクセシブルなUIライブラリである、Headless UIを紹介します。まずはその特徴をつかんでみましょう。