Open13
Chakra UI(styled system) の推しポイント
seya記述が楽になる系
seyaFlex コンポーネント
<Flex color="white">
<Center w="100px" bg="green.500">
<Text>Box 1</Text>
</Center>
<Square bg="blue.500" size="150px">
<Text>Box 2</Text>
</Square>
<Box flex="1" bg="tomato">
<Text>Box 3</Text>
</Box>
</Flex>
更に Center とかもう少し詳細なものもある
seyaレスポンシブの記述が楽 - array syntax で書ける
ブレイクポイントを設定してあげると
import { createBreakpoints } from "@chakra-ui/theme-tools"
const breakpoints = createBreakpoints({
sm: "30em",
md: "48em",
lg: "62em"})
配列でブレイクポイントごとの値が指定できる
<Box bg="red.200" w={[300, 400, 560]}>
This is a box
</Box>
Stack
等幅のマージンを持つコンテナーが楽に書ける。divider も付けられる
<HStack spacing="24px">
<Box w="40px" h="40px" bg="yellow.200">
1
</Box>
<Box w="40px" h="40px" bg="tomato">
2
</Box>
<Box w="40px" h="40px" bg="pink.100">
3
</Box>
</HStack>
設計思想的な話
seya大体ほしいのこの辺よね
- Style consistently with a global theme
- Respond to changing requirements quickly
- Create mobile-first responsive layouts with ease
Consistency と respond quickly は一見対立する概念ではあるけど、theme で consistent なスタイルを保ちつつ、コンポーネント独自の部分はクイックに変えられるようバランスを保つという考え方いい。
デザインシステムのフレームワークとして守りの文脈と、新しい UI 作っていくぞ！な攻めの文脈
seya基本は theme でカッチリとベースのスタイルを定義して、Box などを style prop を受け取るようにして簡単に拡張できるようにしている。
ちょっと割れ窓感はあるので、もう少し書き方の規約を言語化したいところではあるが、思想的にはすごくわかる
seyaUIライブラリ、基本的に見た目の部分は書き換えたくなるので、Headless UI ライクに使えるところも嬉しい。欲しいのはアクセシビリティの部分だけだったりするので