스택
스택 (Stack) 레이아웃
스택 레이아웃은 항목을 세로로 배치하도록 설계된 PatternFly 레이아웃이에요. 하나 이상의 항목이 남은 세로 공간을 채울 수 있어요.
출처: 문서
본문
예시 (Examples)
기본 (Basic)
스택 레이아웃 안에는 content와 pf-m-fill로 표시된 항목이 들어가요.
거터 포함 (With gutter)
content와 pf-m-fill 항목 사이에 거터(gutter) 간격을 적용해요.
Props
Stack
| 이름 (Name) | 타입 (Type) | 기본값 (Default) | 설명 (Description) |
|---|---|---|---|
| children | React.ReactNode | null | 스택 레이아웃 안에 렌더링되는 콘텐츠 |
| className | string | '' | 스택 레이아웃에 추가되는 추가 클래스 |
| component | React.ReactNode | 'div' | 렌더링할 기본 컴포넌트 설정. 기본값은 div |
| hasGutter | boolean | false | children 사이에 공간 추가 |
StackItem
| 이름 (Name) | 타입 (Type) | 기본값 (Default) | 설명 (Description) |
|---|---|---|---|
| children | React.ReactNode | null | 스택 레이아웃 항목 안에 렌더링되는 콘텐츠 |
| className | string | '' | 스택 레이아웃 항목에 추가되는 추가 클래스 |
| component | React.ReactNode | 'div' | 렌더링할 기본 컴포넌트 설정. 기본값은 div |
| isFilled | boolean | false | 이 스택 레이아웃 항목이 사용 가능한 세로 공간을 채워야 하는지 나타내는 플래그 |