CarouselNumberGroup
캐러셀의 현재 페이지와 전체 페이지 수를 표시하는 컴포넌트입니다. 슬래시(/)로 구분된 형태로 현재 페이지와 전체 페이지 수를 보여줍니다.
인터랙티브 예제
아래 UI에서 다양한 속성을 직접 변경하여 CarouselNumberGroup 컴포넌트의 모습을 확인해보세요.
1/10
framedboolean
캐러셀 번호를 테두리로 감싸는지 여부
sizeselect
캐러셀 번호의 크기
colorselect
캐러셀 번호의 색상
currentPagenumber
현재 페이지 번호
totalPagenumber
총 페이지 수
기본 사용법
import { CarouselNumberGroup } from '@ncds/ui-admin';
<CarouselNumberGroup currentPage={1} totalPage={5} />;
1/5
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| framed | boolean | true | 배경 표시 여부를 나타냅니다. |
| size | 'sm' | 'sm' | 컴포넌트의 크기를 지정합니다. |
| color | 'light' | 'dark' | 'light' | 컴포넌트의 색상 테마를 지정합니다. |
| currentPage | number | - | 현재 페이지 번호를 나타냅니다. |
| totalPage | number | - | 전체 페이지 수를 나타냅니다. |
Color (색상 테마)
Light 테마 (기본)
1/5
Dark 테마
1/5
Framed (배경 스타일)
배경 있음 (기본)
1/5
배경 없음
light
1/5
dark
1/5