Use divs rather than a tags for pagination to avoid navigation issue in client apps

This commit is contained in:
Andrew Kingston 2021-05-13 16:31:59 +01:00
parent 04353f8c88
commit 82b0d331b3
1 changed files with 6 additions and 4 deletions

View File

@ -1,5 +1,7 @@
<script>
import "@spectrum-css/pagination/dist/index-vars.css"
import "@spectrum-css/actionbutton/dist/index-vars.css"
import "@spectrum-css/typography/dist/index-vars.css"
export let page
export let goToPrevPage
@ -9,7 +11,7 @@
</script>
<nav class="spectrum-Pagination spectrum-Pagination--explicit">
<a
<div
href="#"
class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-prevButton"
on:click={hasPrevPage ? goToPrevPage : null}
@ -23,11 +25,11 @@
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</a>
</div>
<span class="spectrum-Body--secondary spectrum-Pagination-counter">
Page {page}
</span>
<a
<div
href="#"
class="spectrum-ActionButton spectrum-ActionButton--sizeM spectrum-ActionButton--quiet spectrum-Pagination-nextButton"
on:click={hasNextPage ? goToNextPage : null}
@ -41,7 +43,7 @@
>
<use xlink:href="#spectrum-css-icon-Chevron100" />
</svg>
</a>
</div>
</nav>
<style>