React AriaでつくるUIコンポーネント
- カテゴリー
- UIフレームワーク >
- React/Preact
全5回
ちょっと複雑なUIの素を提供してくれるライブラリ群であるReact Ariaの使い方を解説します。HTMLのinput要素にスタイルを適用するかのように、React Ariaのコンポーネントにスタイルを適用することで自社のブランドにあったポップオーバー、コンボボックス、カレンダー入力などが作れるのです。
第5回 ボタンコンポーネントの使いこなし
React Aria Componentには細かな実装上の工夫もほどこされています。今回はButtonのコンポーネントを例に、利点とその使いこなしを解説します。
第4回 Framer Motionでアニメーションをする
Tailwind CSSでの見栄えのスタイリングはそのままに、アニメーション部分だけをFramer Motionを使ってスタイリングしてみます。
第3回 Tailwind CSSと組み合わせる
React Aria Componentは構造がしっかりしているため、他のアニメーションライブラリと組み合わせることもできます。今回はTailwind CSSでスタイリングやアニメーションの調節を行います。
第2回 コンポーネント実装の基本
React Aria Componentsを利用しながら、モーダルUIを実装し、スタイルを付与してみます。React Aria Componentsの利点であるアクセシビリティについても検証します。
第1回 React Ariaとは
第一回目はReact Ariaとはどのようなものか、どのように役立てていけるのか、そのイメージを掴みます。独自実装では見落としがちなアクセシビリティ、ユーザビリティを担保しつつ、独自のスタイルを付与できます。