안녕하세요!
오늘은 mui의 꽃(제가 맘대로 선정했습니다)이라고 할 수 있는 stack에 대해 알려드리겠습니다.
Stack은 말 그대로 1차원으로 쌓아주는 역할을 합니다. (Grid는 2차원)
display:flex와 비슷하죠? 내부 속성도 거의 유사합니다.
props를 줘서 입맛에 맞춰 사용하면 됩니다.
공식문서와 같이 보시면 이해하기 편하실 겁니다!
props
direction
- flex-direction 스타일 속성을 정의
- type :
'column-reverse' | 'column' | 'row-reverse' | 'row' | Array<'column-reverse' | 'column' | 'row-reverse' | 'row'> | object
- 예시
<Stack direction="column" alignItems="baseline" justifyContent="center" > <Box>Item 1</Box> <Box>Item 2</Box> <Box>Item 3</Box> </Stack>
alignItems
- flex의 align-items 속성
- type :
'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline'
justifyContent
- flex의 justify-content 속성
- type :
'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around'
spacing
- 자식 요소 사이의 간격
- type :
Array<number | string> | number | object | string
- 예시
<Stack spacing={2}> // <Stack spacing='16px'> // <Stack spacing={{ xs: 2, sm: 4, md: 8 }}> : 미디어쿼리에 따라 다른 spacing 적용 <Box>Item 1</Box> <Box>Item 2</Box> <Box>Item 3</Box> </Stack>
divider
- 각 자식 요소 사이에 요소를 추가
- type :
node
- 예시
<Stack direction="row" divider={<Divider orientation="vertical" flexItem />} > <Box>Item 1</Box> <Box>Item 2</Box> <Box>Item 3</Box> </Stack>
children
- 컴포넌트 내부
- type :
node
component
- root 노드(여기서는 Stack을 의미)에 사용되는 컴포넌트 지정
- type :
elementType
<Stack component={Link} to='/'> // stack의 속성을 갖는 Link 컴포넌트가 됨 <Box>Item 1</Box> <Box>Item 2</Box> </Stack>
sx
- css 스타일 추가
- type :
Array<func | object | bool> | func | object
- 사용예시
<Stack sx={{ color: 'red' }}> <Box>Item 1</Box> <Box>Item 2</Box> <Box>Item 3</Box> </Stack>
useFlexGroup
- true ⇒ CSS flexbox gap 사용 가능
- 설정x 또는 false ⇒ margin을 이용해 spacing을 줌
- type :
boolean
- 사용예시
<Stack useFlexGap spacing={10}> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </Stack>