Blazorise Repeater component

The repeater component is a helper component that repeats the child content for each element in a collection.

One advantage over using traditional @foreach loop is that repeater have a full support for INotifyCollectionChanged. Meaning you can do custom actions whenever a data-source changes.

Examples

Basic

  • 1
  • 2
  • 3
  • 4
<UnorderedList>
    <Repeater Items="@items" CollectionChanged="@OnCollectionChanged">
        <UnorderedListItem style="@GetColor( context )">@context</UnorderedListItem>
    </Repeater>
</UnorderedList>

@code{
    System.Collections.ObjectModel.ObservableCollection<int> items { get; } = new( Enumerable.Range( 1, 4 ) );

    Task OnCollectionChanged( System.Collections.Specialized.NotifyCollectionChangedEventArgs eventArgs )
    {
        // do something

        return Task.CompletedTask;
    }

    private static string GetColor( int number )
    {
        const string letters = "0123456789ABCDEF";

        var color = "";

        for ( var i = 0; i < 6; i++ )
        {
            color += letters[( 3 * number + i ) % letters.Length];
        }

        return $"color: #{color}";
    }
}

API

Attributes

Name Description Type Default
TItem The item type to render. generic
Items The items to render. When this is INotifyCollectionChanged it will hookup collection change listeners. null
Skip The number of items to skip before starting to render. long? null
Take The number of items to render. long? null
ChildContent The content to render per item. RenderFragment<TItem>
CollectionChanged Occurs when the Items collection changes. EventCallback<NotifyCollectionChangedEventArgs>
On this page