Pagination - Vapor UI

import { Pagination } from '@vapor-ui/core';

export default function DefaultPagination() {
    return (
        <Pagination.Root totalPages={5}>
            <Pagination.Previous />
            <Pagination.Items />
            <Pagination.Next />
        </Pagination.Root>
    );
}

Property

Sibling Count

Pagination에서 현재 페이지 주변에 표시할 페이지 번호의 개수를 설정합니다.

1 Sibling

3 Sibling

import { Pagination, Text, VStack } from '@vapor-ui/core';

export default function PaginationSiblingCount() {
    return (
        <VStack gap="$300">
            <VStack gap="$050">
                <Text typography="subtitle1">1 Sibling</Text>
                <Pagination.Root defaultPage={8} totalPages={20} siblingCount={1}>
                    <Pagination.Previous />
                    <Pagination.Items />
                    <Pagination.Next />
                </Pagination.Root>
            </VStack>

            <VStack gap="$050">
                <Text typography="subtitle1">3 Sibling</Text>
                <Pagination.Root defaultPage={8} totalPages={20} siblingCount={3}>
                    <Pagination.Previous />
                    <Pagination.Items />
                    <Pagination.Next />
                </Pagination.Root>
            </VStack>
        </VStack>
    );
}

Boundary Count

Pagination의 시작과 끝에 항상 표시할 페이지 번호의 개수를 설정합니다.

1 Boundary

3 Boundary

import { Pagination, Text, VStack } from '@vapor-ui/core';

export default function PaginationBoundaryCount() {
    return (
        <VStack gap="$300">
            <VStack gap="$050">
                <Text typography="subtitle1">1 Boundary</Text>
                <Pagination.Root defaultPage={8} totalPages={20} boundaryCount={1}>
                    <Pagination.Previous />
                    <Pagination.Items />
                    <Pagination.Next />
                </Pagination.Root>
            </VStack>

            <VStack gap="$050">
                <Text typography="subtitle1">3 Boundary</Text>
                <Pagination.Root defaultPage={8} totalPages={20} boundaryCount={3}>
                    <Pagination.Previous />
                    <Pagination.Items />
                    <Pagination.Next />
                </Pagination.Root>
            </VStack>
        </VStack>
    );
}

Size

Pagination의 사이즈는 sm, md, lg, xl로 제공합니다.

import { Pagination, VStack } from '@vapor-ui/core';

export default function PaginationSize() {
    return (
        <VStack gap="$050">
            <Pagination.Root totalPages={5} size="sm">
                <Pagination.Previous />
                <Pagination.Items />
                <Pagination.Next />
            </Pagination.Root>
            <Pagination.Root totalPages={5} size="md">
                <Pagination.Previous />
                <Pagination.Items />
                <Pagination.Next />
            </Pagination.Root>
            <Pagination.Root totalPages={5} size="lg">
                <Pagination.Previous />
                <Pagination.Items />
                <Pagination.Next />
            </Pagination.Root>
            <Pagination.Root totalPages={5} size="xl">
                <Pagination.Previous />
                <Pagination.Items />
                <Pagination.Next />
            </Pagination.Root>
        </VStack>
    );
}

Disabled

Pagination 버튼들의 비활성화 여부를 결정하는 옵션입니다.

import { Pagination } from '@vapor-ui/core';

export default function PaginationDisabled() {
    return (
        <Pagination.Root totalPages={5} disabled>
            <Pagination.Previous />
            <Pagination.Items />
            <Pagination.Next />
        </Pagination.Root>
    );
}

Disabled

Pagination 버튼들의 비활성화 여부를 결정하는 옵션입니다.

import { Pagination } from '@vapor-ui/core';

export default function PaginationDisabled() {
    return (
        <Pagination.Root totalPages={5} disabled>
            <Pagination.Previous />
            <Pagination.Items />
            <Pagination.Next />
        </Pagination.Root>
    );
}

Controlled

Pagination 컴포넌트를 제어 컴포넌트로 사용하는 예시입니다.

Current Page is, 7

import { useState } from 'react';

import { Button, HStack, Pagination, Text, VStack } from '@vapor-ui/core';

export default function PaginationControlled() {
    const [page, setPage] = useState(7);

    return (
        <VStack gap="$200">
            <Pagination.Root totalPages={20} page={page} onPageChange={setPage}>
                <Pagination.Previous />
                <Pagination.Items />
                <Pagination.Next />
            </Pagination.Root>

            <HStack justifyContent="space-between" alignItems="center" gap="$100">
                <Text typography="subtitle1">Current Page is, {page}</Text>

                <Button variant="ghost" onClick={() => setPage(7)}>
                    Move to Page 7
                </Button>
            </HStack>
        </VStack>
    );
}

Pagination.Root

이 컴포넌트는 div 요소를 기반으로, 표준 HTML 속성(className, style 등)을 지원합니다.

Loading component documentation...

Pagination.Icon

Pagination 내에서 아이콘을 표시하는 데 사용되는 컴포넌트입니다. 아이콘의 크기와 위치를 적절히 조정하여 일관된 시각적 경험을 제공합니다. 이 컴포넌트는 div 요소를 기반으로, 표준 HTML 속성을 지원합니다.

Loading component documentation...

On this page