Divider
Divider 컴포넌트는 콘텐츠를 시각적으로 분리하는 데 사용됩니다. 텍스트, 제목, 버튼 등 다양한 요소를 중앙에 배치하여 경계를 표시하면서도 관련 기능을 제공할 수 있습니다. 정보가 많은 UI에서 섹션을 분할하여 사용자 경험을 향상시킵니다.
인터랙티브 예제
다양한 속성을 직접 조절하여 Divider 컴포넌트를 테스트해보세요.
공지사항 또는 알림
typeselect
디바이더 타입 설정
styleselect
디바이더 스타일 설정
textstring
표시할 텍스트 내용
buttonLabelstring
버튼에 표시할 텍스트
기본 사용법
import { Divider } from '@ncds/ui-admin';
function App() {
return <Divider type="text">공지사항 또는 알림</Divider>;
}
공지사항 또는 알림
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | 컴포넌트에 추가할 CSS 클래스명 |
| type | 'text' | 'heading' | 'button' | 'button-group' | 'button-icon' | 'button-group-icon' | - | 디바이더 타입을 정의. 텍스트, 제목, 버튼 등 다양한 콘텐츠를 표시 가능 |
| style | 'single-line' | 'background-fill' | 'single-line' | 디바이더 스타일. 단일 라인 또는 배경 채우기 스타일을 선택 가능 |
| children | ReactNode | - | 디바이더 중앙에 표시될 콘텐츠 |
상세 예제
타입별 예제
텍스트 타입
텍스트 타입은 간단한 문구나 메시지를 표시하기에 적합합니다.
공지사항 또는 알림
제목 타입
제목 타입은 섹션 제목이나 중요한 텍스트를 표시할 때 사용합니다.
공지사항 또는 알림
버튼 타입
버튼 타입은 구분선과 함께 액션 버튼을 제공합니다.
버튼 그룹 타입
여러 개의 버튼을 하나의 그룹으로 제공합니다.
스타일별 예제
단일 라인 스타일
기본 스타일로 양쪽에 구분선이 표시됩니다.
공지사항 또는 알림
배경 채우기 스타일
전체 영역에 배경색이 적용되며 구분선 없이 콘텐츠가 표시됩니다.
공지사항 또는 알림