implement pagination

README.md

@@ -368,6 +368,17 @@ private void CloseModal()
 }
 ```
 
+- [x] Pagination
+
+```html
+<Pagination Id="pagination-1" 
+ Advanced="true" 
+ Count="100" 
+ ItemCountChangedEvent="PaginationItemCountChanged" 
+ PageSelectedEvent="PaginationPageSelected">
+</Pagination>
+```
+
 - [x] Pill
 
 ```html

SiemensIXBlazor/Components/Pagination/Pagination.razor

@@ -0,0 +1,17 @@
+@using Microsoft.JSInterop;
+@inherits IXBaseComponent
+@inject IJSRuntime JSRuntime
+
+<ix-pagination
+@attributes="UserAttributes"
+class="@Class"
+style="@Style"
+id="@Id"
+count="@Count"
+advanced="@Advanced"
+i-1-8n-items="@I18nItems"
+i-1-8n-of="@I18nOf"
+i-1-8n-page="@I18nPage"
+item-count="@ItemCount"
+selected-page="@SelectedPage"
+show-item-count="@ShowItemCount"></ix-pagination>

SiemensIXBlazor/Components/Pagination/Pagination.razor.cs

@@ -0,0 +1,57 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using SiemensIXBlazor.Interops;
+
+namespace SiemensIXBlazor.Components.Pagination
+{
+ public partial class Pagination
+ {
+ [Parameter, EditorRequired]
+ public string Id { get; set; } = string.Empty;
+ [Parameter]
+ public bool? Advanced { get; set; }
+ [Parameter]
+ public int? Count { get; set; }
+ [Parameter]
+ public string I18nItems { get; set; } = "Items";
+ [Parameter]
+ public string I18nOf { get; set; } = "of";
+ [Parameter]
+ public string I18nPage { get; set; } = "Page";
+ [Parameter]
+ public int ItemCount { get; set; } = 15;
+ [Parameter]
+ public int SelectedPage { get; set; } = 0;
+ [Parameter]
+ public bool ShowItemCount { get; set; } = true;
+ [Parameter]
+ public EventCallback<int> ItemCountChangedEvent { get; set; }
+ [Parameter]
+ public EventCallback<int> PageSelectedEvent { get; set; }
+
+ private BaseInterop _interop;
+
+ protected async override Task OnAfterRenderAsync(bool firstRender)
+ {
+ if (firstRender)
+ {
+ _interop = new(JSRuntime);
+
+ await _interop.AddEventListener(this, Id, "itemCountChanged", "ItemCountChanged");
+ await _interop.AddEventListener(this, Id, "pageSelected", "PageSelected");
+ }
+ }
+
+ [JSInvokable]
+ public async Task ItemCountChanged(int count)
+ {
+ await ItemCountChangedEvent.InvokeAsync(count);
+ }
+
+ [JSInvokable]
+ public async Task PageSelected(int page)
+ {
+ await PageSelectedEvent.InvokeAsync(page);
+ }
+ }
+}