Chapter 16無料公開

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

terrierscript
terrierscript
2021.05.08に更新

要素に角丸やShadowをかけることが出来ます。これは下記のページで紹介されてます。

https://chakra-ui.com/docs/features/style-props#shadow

boxShadow

<Box boxShadow="md" />などでbox-shadowを簡易にかけられます

rounded

上記ページには<Box rounded="base">というプロパティも紹介されています。
こちらを使うと文字通り要素を角丸に出来ます。ほぼborderRadiusのエイリアスで、"md","sm" などサイズを入れるとthemeのサイズにしたがって
rounded={10}など数値を入れるとほぼborderRadius`と同じ挙動になります

rounded="full"

rounded="full"borderRadius="100%"のエイリアスと思って良いでしょう。全体が角丸になるので、使い所があります

Buttonと組み合わせる

<Box>だけでなく<Button>など対応してます

<Button shadow="md">Button Shadow</Button>

Demo