ianhitchman/tiptap
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

change page navigation buttons

Browse Source
This commit is contained in:
Philipp Kühn
2021-02-05 10:33:26 +01:00
parent 94a3e65b0a
commit 649a1598a0
3 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/src/assets/icons/arrow-left.svg Normal file
View File

@@ -0,0 +1,3 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0607 3.93934C10.4749 3.35355 9.52507 3.35355 8.93927 3.93934L1.93927 10.9393C1.35357 11.5251 1.35357 12.4749 1.93927 13.0607L8.93927 20.0607C9.52507 20.6464 10.4749 20.6464 11.0607 20.0607C11.6464 19.4749 11.6464 18.5251 11.0607 17.9393L6.62127 13.5H21C21.8284 13.5 22.5 12.8284 22.5 12C22.5 11.1716 21.8284 10.5 21 10.5H6.62127L11.0607 6.06066C11.6464 5.47487 11.6464 4.52513 11.0607 3.93934Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 566 B

26
docs/src/components/PageNavigation/index.vue
View File

@@ -1,32 +1,38 @@
<template> <template>
<nav class="page-navigation"> <nav class="page-navigation">
<div class="page-navigation__previous"> <div class="page-navigation__previous">
<g-link <btn
class="page-navigation__link" type="secondary"
exact icon="arrow-left"
icon-position="before"
:to="previousPage.link" :to="previousPage.link"
v-if="previousPage" v-if="previousPage"
> >
← {{ previousPage.title }} {{ previousPage.title }}
</g-link> </btn>
</div> </div>
<div class="page-navigation__next"> <div class="page-navigation__next">
<g-link <btn
class="page-navigation__link" type="secondary"
exact icon="arrow-right"
:to="nextPage.redirect || nextPage.link" :to="nextPage.redirect || nextPage.link"
v-if="nextPage" v-if="nextPage"
> >
{{ nextPage.title }} → {{ nextPage.title }}
</g-link> </btn>
</div> </div>
</nav> </nav>
</template> </template>
<script> <script>
import linkGroups from '@/links.yaml' import linkGroups from '@/links.yaml'
import Btn from '~/components/Btn'
export default { export default {
components: {
Btn,
},
data() { data() {
return { return {
linkGroups, linkGroups,

12
docs/src/components/PageNavigation/style.scss
View File

@@ -1,16 +1,4 @@
.page-navigation { .page-navigation {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 1.5rem 0;
&__link {
color: rgba($colorBlack, 0.6);
padding: 0.25rem 0.5rem;
border-radius: 5px;
&:hover {
color: $colorBlack;
background-color: rgba($colorBlack, 0.05);
}
}
} }