Pagination component
The <Pagination>
component enables the user to select a specific page from a range of pages.
Examples
<Pagination>
<PaginationItem Disabled="@isActive.First()" @onclick="Previous">
<PaginationLink>
<span aria-hidden="true">«</span>
</PaginationLink>
</PaginationItem>
<PaginationItem Active="@isActive[0]">
<PaginationLink Page="1" Clicked="SetActive">
1
</PaginationLink>
</PaginationItem>
<PaginationItem Active="@isActive[1]">
<PaginationLink Page="2" Clicked="SetActive">
2
</PaginationLink>
</PaginationItem>
<PaginationItem Active="@isActive[2]">
<PaginationLink Page="3" Clicked="SetActive">
3
</PaginationLink>
</PaginationItem>
<PaginationItem Disabled="@isActive.Last()" @onclick="Next">
<PaginationLink>
<span aria-hidden="true">»</span>
</PaginationLink>
</PaginationItem>
</Pagination>
@code
{
private bool[] isActive = { false, true, false };
private void Previous()
{
if (isActive[0])
return;
if (isActive[1])
{
SetActive("1");
return;
}
if (isActive[2])
{
SetActive("2");
return;
}
}
private void Next()
{
if (isActive[0])
{
SetActive("2");
return;
}
if (isActive[1])
{
SetActive("3");
return;
}
if (isActive[2])
{
return;
}
}
private void SetActive(string idx)
{
switch (idx)
{
case "1":
isActive[0] = true;
isActive[1] = false;
isActive[2] = false;
break;
case "2":
isActive[0] = false;
isActive[1] = true;
isActive[2] = false;
break;
case "3":
isActive[0] = false;
isActive[1] = false;
isActive[2] = true;
break;
default:
break;
}
}
}
<Pagination>
<PaginationItem Disabled="@IsPageNavigationDisabled(PREVIOUS)" @onclick="Previous">
<PaginationLink>
<span aria-hidden="true">«</span>
</PaginationLink>
</PaginationItem>
@{
for (var i = 1; i <= pageItems; i++)
{
var pageNumberAsString = i.ToString();
<PaginationItem @key="pageNumberAsString" Active="@IsActive(pageNumberAsString)">
<PaginationLink Page="@pageNumberAsString" Clicked="SetActive">
@pageNumberAsString
</PaginationLink>
</PaginationItem>
}
}
<PaginationItem Disabled="@IsPageNavigationDisabled(NEXT)" @onclick="Next">
<PaginationLink>
<span aria-hidden="true">»</span>
</PaginationLink>
</PaginationItem>
</Pagination>
@code
{
private const string PREVIOUS = "previous";
private const string NEXT = "next";
private string currentPage = "2";
private int pageItems = 5;
private bool IsActive(string page)
=> currentPage == page;
private bool IsPageNavigationDisabled(string navigation )
{
if (navigation.Equals(PREVIOUS))
{
return currentPage.Equals("1");
}
else if (navigation.Equals(NEXT))
{
return currentPage.Equals(pageItems.ToString());
}
return false;
}
private void Previous()
{
var currentPageAsInt = int.Parse(currentPage);
if (currentPageAsInt > 1 )
{
currentPage = (currentPageAsInt - 1).ToString();
}
}
private void Next()
{
var currentPageAsInt = int.Parse(currentPage);
if (currentPageAsInt < pageItems )
{
currentPage = (currentPageAsInt + 1).ToString();
}
}
private void SetActive(string page)
=> currentPage = page;
}
Attributes
Pagination
Name |
Description |
Type |
Default |
Size |
Gets or sets the pagination size.
|
Size |
Default |
Alignment |
Gets or sets the pagination alignment.
|
Alignment |
Default |
Background |
Gets or sets the pagination background color.
|
Background |
Default |
PaginationItem
Name |
Description |
Type |
Default |
Active |
Indicate the currently active page.
|
bool |
false |
Disabled |
Used for links that appear un-clickable.
|
bool |
false |
PaginationLink
Name |
Description |
Type |
Default |
Page |
Defines the page name.
|
string |
null |
Clicked |
Occurs when the item link is clicked.
|
EventCallback<string> |
|