question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Support component for prev and next buttons

See original GitHub issue

Hi, @lokyoung

I saw that you remove support for prevContent and nextContent slots after 1.9.5 version. You replaced it with using next-text and prev-text props (using html there). But now I can’t use custom components for these buttons. Can you revert prevContent and nextContent slots?

Thanks!

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:18
  • Comments:6

github_iconTop GitHub Comments

6reactions
yuxinocommented, Jul 29, 2019

I install old version and it work …

> yarn add vuejs-paginate@1.9.4
4reactions
renatodeleaocommented, Jun 2, 2020

Hey, i’m also trying to understand why this was removed.

Most vue codebases have icon components or custom buttons that need to be passed to this kind of plugin slots, instead of relying on css trickery.

If still want to allow raw html to be passed as prop just conditionally display the slot:

<!-- the easy way is to add a span for the html since we can't conditionally add v-html -->
 <a 
  @click="prevPage()" 
  @keyup.enter="prevPage()" 
  :class="prevLinkClass" 
  :tabindex="firstPageSelected() ? -1 : 0" 
 >
 <span v-if="!$slots.prevLinkContent" v-html="prevText" />
 <slot v-else name="prevLinkContent"/>
</a>

A more ugly, but working approach if you don’t want the extra ‘span’ (computing attributes and events into computed props and using v-bind and v-on would clean it up)

<!-- the easy way is to add a span for the html since we can't conditionally add v-html -->
 <a 
  @click="prevPage()" 
  @keyup.enter="prevPage()" 
  :class="prevLinkClass" 
  :tabindex="firstPageSelected() ? -1 : 0" 
  v-html="prevText"
  v-if="!$slots.prevLinkContent"
 />
<a 
  v-else
  @click="prevPage()" 
  @keyup.enter="prevPage()" 
  :class="prevLinkClass" 
  :tabindex="firstPageSelected() ? -1 : 0" 
 />
 <slot name="prevLinkContent"/>
</a>

Then

<vuejs-paginate>
   <template #prevLinkContent>
     <my-custom-icon-component />
  </template>
</vuejs-paginate>

A more radical approach

As i’ve mentioned besides “custom content”, we might want to pass a custom link entirely from our own design system/framework. For that we could expose the methods and attributes via slot-scope.

<slot 
  name="prevLink" 
  v-bind="{
    prevLinkEvents: { 
      click: prevPage,
      keyup: prevPage // just add if (e.key === 'Enter') verification to the method
    },
    prevLinkAttrs: {
       tabindex: firstPageSelected() ? -1 : 0,
       class: prevLinkClass
    }
  }"
>
  <!-- for those who don't pass slots-->
  <a 
    @click="prevPage()" 
    @keyup.enter="prevPage()" 
    :class="prevLinkClass" 
    :tabindex="firstPageSelected() ? -1 : 0" 
    v-html="prevText"
  />
</slot>
<vuejs-paginate>
   <template #prevLink="{ prevLinkEvents, prevLinkAttrs }">
     <my-custom-button v-bind="prevLinkAttrs" v-on="prevLinkEvents" />
  </template>
</vuejs-paginate>

Contributing

The package seems unmaintained judging by the repo activity. It’s fine, i also have my own unmaintained plugins, but just probing if should just fork or if there’s plans to future releases or updates.

Cheers ✌️

Read more comments on GitHub >

github_iconTop Results From Across the Web

How create separate component for prev/next buttons ReactJS
To answer your first question I just made two very simple functional components called Prev and Next. They get rendered within the Main ......
Read more >
How to Add Prev/Next Buttons to Tab Component - Webflow Tips
Today, I present another tutorial on how to add Prev/Next buttons to a Webflow Tab Component, and make it function like a slider....
Read more >
Navigation Components for Help Center (Table of Contents ...
To show/hide the Prev and Next buttons, go to the Guide admin panel and click “Customize design”. Choose the theme for which you...
Read more >
How To Create Next and Previous Buttons - W3Schools
Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, Python, PHP,...
Read more >
ARIA: button role - Accessibility - MDN Web Docs
Adding role="button" tells assistive technology that the element is a button but provides no button functionality. Use <button> or <input> with ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found