スタイル自由でアクセシブルなHeadless UI
- カテゴリー
- JavaScript >
- React/Preact
- JavaScript >
- Vue.js
全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を紹介します。まずはその特徴をつかんでみましょう。