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 e4ce428ef1
commit b734d861ea
1 changed files with 6 additions and 4 deletions

View File

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