Page counter
콘텐츠에서 사용자의 현재 위치를 안내하는 정보성 컴포넌트입니다. 인터랙션이 없는 수동적 요소로 갤러리, 슬라이더, 문서 뷰어 등에서 진행 상황을 숫자로 간결하게 전달합니다.
캐러셀 등에서 순서를 표시할 때 사용합니다.
import { PageCounter } from '@wanteddev/wds';
const Demo = () => {
return (
<PageCounter totalPages={10} currentPage={2} />
)
}
export default Demo;2가지 사이즈를 제공합니다.
- small
- medium (default)
import { PageCounter, FlexBox } from '@wanteddev/wds';
const Demo = () => {
return (
<FlexBox flexDirection="column" gap="12px" alignItems="center">
<PageCounter size="small" totalPages={10} currentPage={2} />
<PageCounter size="medium" totalPages={10} currentPage={2} />
</FlexBox>
)
}
export default Demo;
alternative prop 을 사용하면 blur 효과가 적용되지 않는 환경에서도 자연스러운 스타일을 적용할 수 있습니다.
import { PageCounter, FlexBox } from '@wanteddev/wds';
const Demo = () => {
return (
<FlexBox flexDirection="column" gap="12px">
<PageCounter totalPages={10} currentPage={2} />
<PageCounter alternative totalPages={10} currentPage={2} />
</FlexBox>
)
}
export default Demo;