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>
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>