🎨KRDS 갤러리
메인으로전체 컴포넌트
  • 기본 버튼쉬움
  • 버튼 계층구조쉬움
  • 아이콘 버튼쉬움
  • 버튼 크기쉬움
  • 텍스트 버튼쉬움
  • 아이콘 포함 버튼쉬움
  • 텍스트 입력쉬움
  • 아이콘 텍스트 입력쉬움
  • 텍스트 입력 크기쉬움
  • 텍스트 입력 상태보통
  • 텍스트영역쉬움
  • 셀렉트쉬움
  • 셀렉트 크기쉬움
  • 셀렉트 정렬쉬움
  • 셀렉트 상태보통
  • 체크박스쉬움
  • 칩 체크박스쉬움
  • 체크박스 크기쉬움
  • 라디오 버튼쉬움
  • 칩 라디오쉬움
  • 라디오 크기쉬움
  • 파일 업로드보통
  • 날짜 입력보통
  • 헤더어려움
  • 푸터보통
  • 메인메뉴(PC)어려움
  • 메인메뉴(모바일)어려움
  • 사이드 내비게이션보통
  • 인페이지 내비게이션보통
  • 브레드크럼쉬움
  • 페이지네이션보통
  • 스킵 링크쉬움
  • 아코디언보통
  • 라인 아코디언보통
  • 배지쉬움
  • 숫자 배지쉬움
  • 배지 크기쉬움
  • 태그쉬움
  • 링크 태그쉬움
  • 툴팁보통
  • 박스 툴팁보통
  • 세로 툴팁보통
  • 캐러셀어려움
  • 배너 캐러셀어려움
  • 테이블보통
  • 구조화 목록쉬움
  • 구조화 목록 테이블보통
  • 모달보통
  • 모달 샘플보통
  • 스피너쉬움
  • 단계 표시기보통
  • 중요 알림보통
  • 코치 마크어려움
  • 맥락 도움말보통
  • 도움말 패널보통
  • 튜토리얼 패널보통
  • 캘린더어려움
  • 기간 캘린더어려움
  • 디스클로저보통
  • 크기 조절보통
  • 언어 전환보통
  • 언어 전환(페이지)보통
  • 토글 스위치쉬움
  • 토글 스위치 크기쉬움
  • TTS보통
  • TTS 아이콘쉬움
  • TTS 크기쉬움
  • 탭보통
  • 텍스트 목록쉬움
  • 순서 목록쉬움
  • 파비콘쉬움
  • 식별자쉬움
  • 마스트헤드쉬움
갤러리/네비게이션/페이지네이션

페이지네이션

페이지 번호 내비게이션입니다.

#page #navigation #number
이전
1 2 3 현재페이지 4 5 6 7 8 99
다음
HTML
<div class="krds-pagination">
	<span class="page-navi prev disabled" href="#">이전</span>
	<div class="page-links">
		<a class="page-link" href="#">1</a>
		<a class="page-link" href="#">2</a>
		<a class="page-link" href="#">3</a>
		<a class="page-link active" href="#"><span class="sr-only">현재페이지 </span>4</a>
		<a class="page-link" href="#">5</a>
		<a class="page-link" href="#">6</a>
		<a class="page-link" href="#">7</a>
		<a class="page-link" href="#">8</a>
		<span class="page-link link-dot"></span>
		<a class="page-link" href="#">99</a>
	</div>
	<a class="page-navi next" href="#">다음</a>
</div>
Vue 컴포넌트
<template>
  <div class="krds-pagination">
	<span class="page-navi prev disabled" href="#">이전</span>
	<div class="page-links">
		<a class="page-link" href="#">1</a>
		<a class="page-link" href="#">2</a>
		<a class="page-link" href="#">3</a>
		<a class="page-link active" href="#"><span class="sr-only">현재페이지 </span>4</a>
		<a class="page-link" href="#">5</a>
		<a class="page-link" href="#">6</a>
		<a class="page-link" href="#">7</a>
		<a class="page-link" href="#">8</a>
		<span class="page-link link-dot"></span>
		<a class="page-link" href="#">99</a>
	</div>
	<a class="page-navi next" href="#">다음</a>
</div>
</template>

<script setup lang="ts">
// 페이지네이션 컴포넌트
// 페이지 번호 내비게이션입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>

컴포넌트 정보

파일명
pagination.html
카테고리
네비게이션
난이도
보통