<h2 class="mb-3">
Overview
</h2>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" tabindex="-1">
Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
1 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
2 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" tabindex="-1">
Next
</a>
</li>
</ul>
</nav>
<hr />
<h2 class="mb-3">
Working with icons
</h2>
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
1 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
2 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<hr />
<h2 class="mb-3">
Disabled and active states
</h2>
<nav aria-label="...">
<ul class="pagination">
<li class="page-item disabled">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
1 </a>
</li>
<li class="page-item active">
<a class="page-link" href="#">
2 <span class="sr-only">(current)</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">»</span>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
<hr />
<h2 class="mb-3">
Sizing
</h2>
<nav aria-label="...">
<ul class="pagination pagination-lg">
<li class="page-item">
<a class="page-link" href="#">
1 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
2 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3 </a>
</li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination pagination-sm">
<li class="page-item">
<a class="page-link" href="#">
1 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
2 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3 </a>
</li>
</ul>
</nav>
<hr />
<h2 class="mb-3">
Alignment
</h2>
<nav aria-label="...">
<ul class="pagination justify-content-center">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">
Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
1 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
2 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" tabindex="-1">
Next
</a>
</li>
</ul>
</nav>
<nav aria-label="...">
<ul class="pagination justify-content-end">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">
Previous
</a>
</li>
<li class="page-item">
<a class="page-link" href="#">
1 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
2 </a>
</li>
<li class="page-item">
<a class="page-link" href="#">
3 </a>
</li>
<li class="page-item">
<a class="page-link" href="#" tabindex="-1">
Next
</a>
</li>
</ul>
</nav>
<hr />
{% block main %}
{% for section in sections %}
{% if section %}
{% if section.title %}
<h2 class="mb-3">
{{ section.title }}
</h2>
{% endif %}
{% for variant in section.variants %}
{% include '@atom-pagination' with variant %}
{% endfor %}
{% endif %}
<hr />
{% endfor %}
{% endblock %}
{
"sections": [
{
"title": "Overview",
"variants": [
{
"label": "Page navigation example",
"pages": 3,
"prev": "Previous",
"next": "Next"
}
]
},
{
"title": "Working with icons",
"variants": [
{
"label": "Page navigation example",
"pages": 3,
"prev": "Previous",
"next": "Next",
"icons": true
}
]
},
{
"title": "Disabled and active states",
"variants": [
{
"label": "...",
"pages": 3,
"active": 2,
"prev": "Previous",
"next": "Next",
"icons": true,
"prevDisabled": true
}
]
},
{
"title": "Sizing",
"variants": [
{
"label": "...",
"pages": 3,
"prevDisabled": true,
"size": "lg"
},
{
"label": "...",
"pages": 3,
"prevDisabled": true,
"size": "sm"
}
]
},
{
"title": "Alignment",
"variants": [
{
"label": "...",
"pages": 3,
"prev": "Previous",
"next": "Next",
"prevDisabled": true,
"alignment": "center"
},
{
"label": "...",
"pages": 3,
"prev": "Previous",
"next": "Next",
"prevDisabled": true,
"alignment": "right"
}
]
}
]
}
No notes defined.