Chakra UIの歩き方 & Tips集

Chakra UIの歩き方 & Tips集

Chakra UIに関するTips・レシピ集です。基本無料公開ですが、おまけのみ有料とさせていただいています。値段・有料部位等は変更する可能性があることをご留意ください

Chapters
Chapter 01無料公開

この本について

Chapter 02無料公開

1章 基礎編

Chapter 03無料公開

Chakra UIのはじめかた・Installation

Chapter 04無料公開

基礎となるスタイルの付け方・Boxコンポーネントについて

Chapter 05無料公開

Tips. Chakra UIの設計原則

Chapter 06無料公開

Theme: 色のTheme・キーワード

Chapter 07無料公開

Theme: サイズ・Spacingに関するTheme

Chapter 08無料公開

Theme: その他の機能(variant, z-index, カスタマイズ)

Chapter 09無料公開

疑似要素スタイル(&:hover)等は_hoverのように指定する

Chapter 10無料公開

レスポンシブにするなら複数の値を設定する

Chapter 11無料公開

useBreakpointでstyle以外のレスポンシブ対応も出来る

Chapter 12無料公開

asプロパティでいろんなコンポーネントにする例 (ButtonをLink化する)

Chapter 13無料公開

コンポーネントを拡張したものを共通化して使う

Chapter 14無料公開

sxで例外的なCSS処理・部分的にグローバルなCSSを作る

Chapter 15無料公開

2章 コンポーネント・APIのTips集

Chapter 16無料公開

要素を角丸にしたりshadowかけたりする

Chapter 17無料公開

Stackをどんどん使おう(リストレイアウト編)

Chapter 18無料公開

VStack / HStackもどんどん使おう(コンポーネントレイアウト編)

Chapter 19無料公開

Spacerを使って楽にレイアウトしていく

Chapter 20無料公開

どんなコンポーネントもChakra UIっぽく扱いたいならchakra factory機能を使う

Chapter 21無料公開

3章 拡張・その他編

Chapter 22無料公開

SkeltonとIntersectionObservableを組み合わせる

Chapter 23無料公開

Accordionが開いた後に遅延読み込み(lazy load)処理をさせる

Chapter 24無料公開

TabをURL Hashに同期する

Chapter 25無料公開

Drawerとレスポンシブを使ってモバイルのときに隠れるメニューを作る

Chapter 26

おまけ(CSSからの脱却・他のフレームワークと比べて)

Author
Topics
公開
本文更新
文章量
32,871
価格
200