Use divs rather than a tags for pagination to avoid navigation issue in client apps
This commit is contained in:
parent
e4ce428ef1
commit
b734d861ea
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue