0
votes

Formatage de la pagination dans ReactJS

Alors je cherchais dans la dépendance de la pagination dans ReactJS. Mon code fonctionne bien, mais la mise en forme de la pagination est tout à fait en panne. Comment puis-je améliorer mes perspectives de pagination? Il apparaît actuellement comme des balles xxx

Il figure dans le navigateur comme image ci-jointe  C'est ce que mon navigateur montre. Je ne veux pas ajouter de nouveau fichier bootstrap.


4 commentaires

Style correctement.


Comment ?? c'est ce que je demande


Quel est le nom du paquet?


NPMJS.com/package/react-js-pagination - >> C'est le lien vers elle


3 Réponses :


0
votes

des documents de réacteur-js-pagination :

Le composant est livré sans styles intégrés. Disposition HTML compatible avec les feuilles de style de pagination de bootstrap.

Donc, si vous utilisez Bootstrap, cela devrait simplement fonctionner.

Si non, le colis fournit des accessoires pour définir des classes à différents éléments, puis vous devez les styles:

Innerclass, ActiveClass, ActiveLinkClass, CléClass, ItemClassFirst, itemClassPrev, itemClassNext, itemClassLast ...


2 commentaires

Je ne suis pas familier avec Bootstrap pouvez-vous m'aider avec ce code particulier de la façon dont je peux le formater


Bootstrap est un cadre CSS, vous pouvez commencer par ajouter à votre code HTML



0
votes

Vous devez acquérir une idée d'une notion sur DOM Echafaudages et CSS:

p>

<ul>
  <li><a href="#" /><</a></li>
  <li><a href="#" class="active"/>1</a></li>
  <li><a href="#" />2</a></li>
  <li><a href="#" />></a></li>
</ul>


0 commentaires

0
votes

Alors j'ai trouvé le pas mobile du matériau-ui utile utile dans ce cas. J'ai importé Importer MobileSpper de '@ Matériel-UI / Core / MobileSepper'; Code>
Je devais juste faire une fonction simple updatepage (i) code> qui a pris +1 ou -1 en fonction de la page suivante ou précédente et correspondant à tout autre appels de fonction peut être effectué dans la fonction de mise à jour de la page. Par conséquent, la pagination peut être faite et de nouvelles informations peuvent être rendues en conséquence. Bien que ce ne soit pas la méthode correcte exacte, mais cela m'a aidé à mes fonctionnalités.

<MobileStepper steps='5' position='static' activeStep='1' nextButton={<Button size='small' onClick={this.updatePage.bind(this,1)}/>Next</Button>} backButton={ <Button size='small' onClick={this.updatePage.bind(this,-1)} disabled={this.props.match.params.pageNo <= 1}>Prev</Button>} />


0 commentaires