안녕하세요!
오늘은 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
- 예시
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
- 예시
divider
- 각 자식 요소 사이에 요소를 추가
- type :
node
- 예시
children
- 컴포넌트 내부
- type :
node
component
- root 노드(여기서는 Stack을 의미)에 사용되는 컴포넌트 지정
- type :
elementType
sx
- css 스타일 추가
- type :
Array<func | object | bool> | func | object
- 사용예시
useFlexGroup
- true ⇒ CSS flexbox gap 사용 가능
- 설정x 또는 false ⇒ margin을 이용해 spacing을 줌
- type :
boolean
- 사용예시