스플릿
스플릿 (Split) 레이아웃
스플릿 레이아웃은 항목을 가로로 배치하도록 설계된 PatternFly 레이아웃이에요.
출처: 문서
본문
예시 (Examples)
기본 (Basic)
content와 pf-m-fill 항목으로 구성된 기본 스플릿 예시예요.
거터 포함 (With gutter)
content와 pf-m-fill 항목 사이에 거터 간격을 적용한 예시예요.
줄바꿈 가능 (Wrappable)
여러 content 항목이 줄바꿈되어 배치되는 예시예요.
Props
Split
| 이름 (Name) | 타입 (Type) | 기본값 (Default) | 설명 (Description) |
|---|---|---|---|
| children | React.ReactNode | null | 스플릿 레이아웃 안에 렌더링되는 콘텐츠 |
| className | string | '' | 스플릿 레이아웃에 추가되는 추가 클래스 |
| component | React.ReactNode | 'div' | 렌더링할 기본 컴포넌트 설정. 기본값은 div |
| hasGutter | boolean | false | children 사이에 공간 추가 |
| isWrappable | boolean | false | children이 줄바꿈되도록 허용 |
SplitItem
| 이름 (Name) | 타입 (Type) | 기본값 (Default) | 설명 (Description) |
|---|---|---|---|
| children | React.ReactNode | null | 스플릿 레이아웃 항목 안에 렌더링되는 콘텐츠 |
| className | string | '' | 스플릿 레이아웃 항목에 추가되는 추가 클래스 |
| component | React.ReactNode | 'div' | 렌더링할 기본 컴포넌트 설정. 기본값은 div |
| isFilled | boolean | false | 이 스플릿 레이아웃 항목이 사용 가능한 가로 공간을 채워야 하는지 나타내는 플래그 |