vue-paginate
vue-paginate copied to clipboard
Paginate-Links :classes attribute
I'm trying to use font-awesome icons for the next and prev links using the following setup on the pagination-links element:
:async="true" :limit="10" :hide-single-page="true" :show-step-links="true" :step-links="{ next: '', prev: ' ' }" :classes="{'li.left-arrow > a' : ['fa', 'fa-chevron-left'], 'li.right-arrow > a' : ['fa', 'fa-chevron-right']}"
The issues I get are:
-
the classes specified are getting applied to the ".ellipses" class if the ellipses link is clicked.
-
if the step-links have the same value, the .left-arrow>a classes gets applied to the .right-arrow>a element.
I am having the same problem.
Same problem here anyone can help?
I'm having this issue too, .left-arrow/.right-arrow classes not working properly (applying to each other, applying to ellipses). Seems like there's quite a few problems in the library and it doesn't seem to be maintained, might have to switch or make my own.
@lukeramsden I ended up just forking the repository and modifying the code so it showed the icons I wanted.
I found a work around to this issue (though it's super jank). If you label one of the buttons ' ' and the other '' (space in one no text in the other), the labels will end up having the correct classes.
I'm assuming that the connection of classes to each anchor tag depends on the text of the anchor tag. Therefore, differentiating them by having different strings solves the issue (tho this is just a guess)
Try this for the step-links binding: :step-links="{ next: '', prev: ' ' }"
same problem... I'm guessing this plugin is no longer being supported by the developer? (no response since 2017??)