Pagination dots
많은 페이지를 점 형태로 축약하여 표현하는 네비게이션 요소입니다. 전통적인 숫자 기반 Pagination의 기능을 유지하면서도 시각적으로는 단순한 점 형태를 사용합니다.
주로 캐러셀 등에서 순서를 표시하고 이동할 때 사용합니다.
import { PaginationDots } from '@wanteddev/wds';
import { useState } from 'react';
const Demo = () => {
const [page, setPage] = useState(1);
return (
<PaginationDots onClickDot={(cur) => setPage(cur)} totalPages={10} currentPage={page} />
)
}
export default Demo;
2가지 사이즈를 제공합니다.
- small
- medium (default)
import { PaginationDots, FlexBox } from '@wanteddev/wds';
import { useState } from 'react';
const Demo = () => {
const [page, setPage] = useState(1);
return (
<FlexBox flexDirection="column" gap="24px" alignItems="center">
<PaginationDots size="small" onClickDot={(cur) => setPage(cur)} totalPages={10} currentPage={page} />
<PaginationDots size="medium" onClickDot={(cur) => setPage(cur)} totalPages={10} currentPage={page} />
</FlexBox>
)
}
export default Demo;
2가지 색상을 제공합니다.
- normal
- white
import { PaginationDots, FlexBox } from '@wanteddev/wds';
import { useState } from 'react';
const Demo = () => {
const [page, setPage] = useState(1);
return (
<FlexBox flexDirection="column" gap="24px" alignItems="center">
<PaginationDots color="normal" onClickDot={(cur) => setPage(cur)} totalPages={10} currentPage={page} />
<PaginationDots color="white" onClickDot={(cur) => setPage(cur)} totalPages={10} currentPage={page} />
</FlexBox>
)
}
export default Demo;
WAI-ARIA Tabs Pattern 을 준수합니다.