はじめに
Chakra UI v3では、背景グラデーションの指定方法がv2から変更されました。本記事では、新しい実装方法について解説します。
実装方法
v2からの変更点
v2では、bgGradientでグラデーションの方向や色を一括で指定できました。
// v2
<Box bgGradient='linear(to-r, green.200, pink.500)' />
v3では、グラデーションの方向、開始の色、終了の色を個別に指定するよう変更されました。
// v3
<Box bgGradient="to-tl" gradientTo="red.300" gradientVia="pink.200" gradientFrom="purple.200">
v3の実装方法
新しい指定方法では、以下のプロパティを使用します。
- bgGradient: グラデーションの方向を指定します。例として、上左（to-tl）方向のグラデーションを指定しています
- gradientFrom: グラデーションの開始色
- gradientTo: グラデーションの終了色
- gradientVia: 中間に追加したい色（オプション）
<Box bgGradient="to-tl" gradientTo="red.300" gradientVia="pink.200" gradientFrom="purple.200">
上記の指定で下記のようなグラデーションが作れます。
| Prop | |
|---|---|
| bgGradient | グラデーションの方向の指定 例: to-tl |
| gradientTo | グラデーションの始まりの色 |
| gradientFrom | グラデーションの終わりの色 |
| gradientVia | グラデーションの中間の色 |
終わりに
Chakra UI v3ではグラデーション指定がより柔軟になり、色を細かく設定できるようになりました。ぜひ一度試してみてください！
参考