NextAndPrevLinks.vue 682 B

1234567891011121314151617181920212223242526272829303132333435
  1. <template>
  2. <div v-if="hasLinks" class="links-wrapper">
  3. <div class="prev-link">
  4. <div v-if="prev">
  5. ← <a :href="prev.link">{{ prev.text }}</a>
  6. </div>
  7. </div>
  8. <div class="next-link">
  9. <div v-if="next">
  10. <a :href="next.link">{{ next.text }}</a> →
  11. </div>
  12. </div>
  13. </div>
  14. </template>
  15. <script src="./NextAndPrevLinks"></script>
  16. <style>
  17. .links-wrapper {
  18. display: flex;
  19. justify-content: space-between;
  20. margin-top: 4rem;
  21. border-top: 1px solid var(--border-color);
  22. padding-top: 1rem;
  23. padding-bottom: 2rem;
  24. }
  25. .links-wrapper a {
  26. font-weight: 500;
  27. }
  28. .links-wrapper a:hover {
  29. text-decoration: none !important;
  30. }
  31. </style>