Pagination
New

The pagination component is used to switch between pages.
When there are multiple items.

Page Size

The number of items or pages to display per page.

Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt"
              PageSize="10"
              NumberOfItems="100">
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}

Total Count

The total count of items or pages that the pagination should handle.

Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt"
              PageSize="10"
              NumberOfItems="100">
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}

Previous Button Label

The text label for the previous button.

Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt"
              PreviousButtonLabel="Prev">
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}

Next Button Label

The text label for the next button.

Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt"
              NextButtonLabel="Something">
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}

Color

The theme color of the pagination buttons, affecting their appearance in normal and hover states.

Selected page: 1
Selected page: 1
Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt"
              Color="neutral">
</NVPagination>
<NVPagination @bind-CurrentPage="_tempModelInt"
              Color="primary">
</NVPagination>
<NVPagination @bind-CurrentPage="_tempModelInt"
              Color="secondary">
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}

Width Full

Determines if the pagination component should expand to fill its container's width.

Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt"
              WFull>
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}

Current Page

The current page number displayed by the pagination component.

Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt">
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}

Num Start Zone Buttons

The number of page buttons to display at the start of the pagination component.

Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt"
              NumStartZoneButtons="3">
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}

Num Middle Buttons

The number of page buttons to display in the middle part of the pagination, usually around the current page.

Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt"
              NumMiddleButtons="5">
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}

Num End Zone Buttons

The number of page buttons to display at the end of the pagination component.

Selected page: 1 
<NVPagination @bind-CurrentPage="_tempModelInt"
              NumEndZoneButtons="3">
</NVPagination>
  
@code {
    private int _tempModelInt = 0;

    protected override void OnInitialized()
    {
        _tempModelInt = 1;
    }
}
On this page