페이지네이션
페이지 번호 내비게이션입니다.
#page #navigation #number
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
- 카테고리
- 네비게이션
- 난이도
- 보통