Customization in Pager Component

8 Jul 20221 minute to read

Custom text for numeric items

The Pager component provides an option to define custom text and it is added as a prefix for numeric items. This can be achieved by using the NumericItemPrefix property.

@using Syncfusion.Blazor.Navigations

<SfPager TotalItemsCount="75" NumericItemPrefix="PageNo" PageSize="5" NumericItemsCount="2">
</SfPager>

Blazor Pager with Custom Text

Custom CSS

To modify the Pager’s appearance, you need to override the default CSS of the Pager. This can be achieved by using the CssClass property.

In the following sample, the value for the CssClass property is set as custom CSS, and this root class is used to customize the Pager appearance.

@using Syncfusion.Blazor.Navigations

<SfPager NumericItemsCount="3" PageSize="5" TotalItemsCount=50 CssClass=customCss>
</SfPager>

<style>

    .e-pager.customCss .e-currentitem.e-numericitem.e-focused, .e-pager.customCss .e-currentitem{
        background: #2bbbad;
        color: #f6f3f1;
        border-bottom: 0px;
        border-radius: 0.125rem;
        outline-style: auto;
    }
        
</style>

Blazor Pager with Custom CSS