Chakra UIの歩き方 & Tips集
Chakra UIに関するTips・レシピ集です。基本無料公開ですが、おまけのみ有料とさせていただいています。値段・有料部位等は変更する可能性があることをご留意ください
Chapters
この本について
1章 基礎編
Chakra UIのはじめかた・Installation
基礎となるスタイルの付け方・Boxコンポーネントについて
Tips. Chakra UIの設計原則
Theme: 色のTheme・キーワード
Theme: サイズ・Spacingに関するTheme
Theme: その他の機能（variant, z-index, カスタマイズ)
疑似要素スタイル(&:hover)等は_hoverのように指定する
レスポンシブにするなら複数の値を設定する
useBreakpointでstyle以外のレスポンシブ対応も出来る
asプロパティでいろんなコンポーネントにする例 (ButtonをLink化する)
コンポーネントを拡張したものを共通化して使う
sxで例外的なCSS処理・部分的にグローバルなCSSを作る
2章 コンポーネント・APIのTips集
要素を角丸にしたりshadowかけたりする
Stackをどんどん使おう（リストレイアウト編）
VStack / HStackもどんどん使おう（コンポーネントレイアウト編）
Spacerを使って楽にレイアウトしていく
どんなコンポーネントもChakra UIっぽく扱いたいならchakra factory機能を使う
3章 拡張・その他編
SkeltonとIntersectionObservableを組み合わせる
Accordionが開いた後に遅延読み込み(lazy load)処理をさせる
TabをURL Hashに同期する
Drawerとレスポンシブを使ってモバイルのときに隠れるメニューを作る
おまけ（CSSからの脱却・他のフレームワークと比べて）
Author
Topics
- 公開
- 本文更新
- 文章量
- 約32,871字
- 価格
- 200円