Floating UI Reactで作るUIコンポーネント
- カテゴリー
- UIライブラリ／UIフレームワーク >
- React／Preact
全5回
単一の機能特化型のUIライブラリであるFloating UI Reactを使って、ReactでのUIコンポーネントの作成例を解説します。ポップオーバー、セレクトボックス、コンボボックスをつくっていきましょう。
第5回 セレクトボックスUI：ポップオーバー化と画面内への収め方
前回作ったセレクトボックスUIの基本的な部分を、Floating UI Reactを使ってポップオーバー化していきます。リストが長い場合でも、ブラウザ画面内に収まるようにし、より使いやすくしていきましょう。
第4回 セレクトボックスUI：基本部分の作成
第4回からは、Floating UI Reactを使ってセレクトボックスUIを実装していきます。今回は、トリガーボタンを用意し、選択した内容をトリガーボタンに表示するまでを解説します。
第3回 ポップオーバーUI：アクセシビリティとコンポーネント化
ひととおりのポップオーバーUIの実装を終えたので、アクセシビリティの付与とコンポーネント化を行い、完成させます。
第2回 ポップオーバーUI：重なりや切れの解決と配置調整
前回はポップオーバーの開閉や閉じる処理を実装しました。今回は、ポータル化で表示の切れや重なりを防ぎ、flipで位置を自動調整する方法を解説します。
第1回 ポップオーバーUI：パネルの作成と開閉機能の実装
単機能のUIライブラリ「Floating UI React」を使って、ReactでポップオーバーUIを作る方法を解説します。今回は、ポップオーバーのパネルの作成と開閉機能の実装について説明します。