|
|
@@ -5,7 +5,7 @@ summary: Pagination is a user interface element that allows users to navigate th
|
|
|
|
|
|
## Basic Example
|
|
|
|
|
|
-Use slightly customized pagination with previouse and next icon links:
|
|
|
+Use slightly customized pagination with previous and next icon links:
|
|
|
|
|
|
{% capture html -%}
|
|
|
{% include "ui/pagination.html" %}
|
|
|
@@ -14,7 +14,7 @@ Use slightly customized pagination with previouse and next icon links:
|
|
|
|
|
|
## With First and Last links
|
|
|
|
|
|
-Use slightly customized pagination with previouse and next icon links:
|
|
|
+When you have a lot of pages, you can use first and last links to quickly navigate to the beginning or end of the pagination.
|
|
|
|
|
|
{% capture html -%}
|
|
|
{% include "ui/pagination.html" first-last %}
|
|
|
@@ -41,7 +41,7 @@ When you want to use pagination with text, you can use text buttons. This will g
|
|
|
|
|
|
## Outline version
|
|
|
|
|
|
-If you want to use outline version of pagination, you can use `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
|
|
|
+If you want to use an outline version of the pagination, you can use the `.pagination-outline` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
|
|
|
|
|
|
{% capture html -%}
|
|
|
{% include "ui/pagination.html" class="pagination-outline" %}
|
|
|
@@ -50,11 +50,10 @@ If you want to use outline version of pagination, you can use `.pagination-outli
|
|
|
|
|
|
## Circle version
|
|
|
|
|
|
-If you want to use circle version of pagination, you can use `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation.
|
|
|
+If you want to use a circle version of the pagination, you can use the `.pagination-circle` class. This will give you a more subtle look and feel, which is great for applications where you want to keep the focus on the content rather than the navigation. This can also be combined with the `.pagination-outline` class for a more prominent look.
|
|
|
|
|
|
{% capture html -%}
|
|
|
-{% include "ui/pagination.html" class="pagination-circle pagination-outline" -%}
|
|
|
-
|
|
|
{% include "ui/pagination.html" class="pagination-circle" %}
|
|
|
+{% include "ui/pagination.html" class="pagination-circle pagination-outline" -%}
|
|
|
{%- endcapture %}
|
|
|
{% include "docs/example.html" html=html centered vertical separated %}
|
codecalm