CSS Pagination
In deze tutorial leren we over pagination (paginering), dit wordt gebruikt wanneer content op een pagina wordt verspreid over meerdere pagina’s. Voorbeeld hiervan is en webshop, wanneer je producten op 1 pagina plaatst duurt het lang voordat de pagina is geladen. De bezoeker heeft geen zin om hierop te wachten. Daarom worden deze producten vaak verdeelt over meerdere pagina’s.Eenvoudige pagination
Als je een website hebt met veel pagina's, wil je misschien een soort pagination (inhoud verspreiden over meerdere pagina's) aan elke pagina toevoegen.
Voorbeeld:
.pagination {
display: inline-block;
}
.pagination a {
color: black;
float: left;
padding: 8px 16px;
text-decoration: none;
}
Actief en hover knoppen
Je kunt de huidige pagina markeren met een .active class en door gebruik te maken van de :hover selector kun je de kleur van elke paginalink wijzigen wanneer je de muis erover beweegt.
Voorbeeld:
.pagination a.active {
background-color: #408bb5;
color: white;
}
.pagination a:hover:not(.active) {
background-color: #ddd;
}
Actief knop met afgeronde hoeken
Voeg de eigenschap border-radius toe als je een afgeronde "active" en "hover" knop wilt weergeven.
Voorbeeld:
.pagination a {
border-radius: 5px;
}
.pagination a.active {
border-radius: 5px;
}
Overgangseffect toevoegen
Door de eigenschap transition te gebruiken kun je een overgangseffect creëren, deze is dan zichtbaar wanneer je de muis erover beweegt.
Pagination met randen
Indien je randen wilt weergeven om de pagina nummers (pagination) dan kun je de eigenschap border gebruiken.
Pagination met afgeronde hoeken
Om de paginering wat mooier eruit te laten zien kun je aan het begin en aan het eind de hoeken van de randen afronden. Probeer het voorbeeld hieronder maar eens uit:
Voorbeeld:
.pagination a:first-child {
border-top-left-radius: 7px;
border-bottom-left-radius: 7px;
}
.pagination a:last-child {
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
}
Ruimte tussen de links
Je kunt ruimte tussen de links creëren door gebruik te maken van de margin eigenschap.
Pagination grootte
Om de grootte van de paginering aan te passen kun je de font-size eigenschap gebruiken.
Pagination centreren
Om de paginering te centreren, gebruik je de text-align eigenschap met de waarde center.
