Webframework: Telerik UI for Blazor 2.10.0 bringt ListView, Pager und Checklisten

Telerik hat UI for Blazor in Version 2.10.0 herausgebracht. Die Komponentensammlung für Microsofts Webframework lässt sich sowohl mit Server-Side Blazor als auch WebAssembly verwenden. Wie gewohnt erscheint das Release zeitlich abgestimmt mit den Vorschauversionen von Microsoft und ist auf das Zusammenspiel mit der Preview 3 von Blazor WebAssembly 3.2 ausgelegt.

Die aktuelle Version umfasst neue Grid-Features und eine benutzerdefinierte Listenansicht, Pager Components sowie einen Baustein zum Erstellen von Checklisten. Das offizielle Release von Blazor WebAssembly 3.2 ist für Mai angekündigt, synchron dazu sollen laut Telerik weitere angepasste UIs für Blazor zu Preview 4, 5 und dem Release Candidate erscheinen.

Produktionsreife Komponenten

Mit der neuen Komponente ListView können Anwender aus einer Datenquelle mit Templates benutzerdefinierte Listenansichten erstellen, was unter anderem zur Darstellung von Listen oder komplexeren Katalogen in einer App dienen soll. Anschauungsbeispiele gibt es im Demobereich bei Telerik. Wie die ListView aktiviert wird, steht in der Dokumentation. Nach Hinzufügen des TelerikListView-Tags können Entwickler die Data-Property mit einer Sammlung von Objekten ihrer Wahl befüllen und das gewünschte Template für die Ansicht auswählen. Dazu lässt sich folgende Vorlage aus dem Telerik-Blog verwenden:

<TelerikListView Data="@ListViewData">
    <Template>
        <div>
            <h4>@context.Name</h4>
            <h5>@context.Team</h5>
        </div>
    </Template>
</TelerikListView>

Für die Listen stehen weitere Editiermöglichkeiten zur Verfügung. Eine Paginierung und die gewünschten Dimensionen können Entwickler in einem zweiten Schritt mit folgendem Code definieren:

<TelerikListView Data="@ListViewData" Width="700px" Pageable="true" PageSize="15">

Mehrseiter und Checkliste

Mit Pager erhält das UI eine Standalone-Komponente, mit der sich Inhalte auf mehrere Seiten verteilen lassen. Aktivieren lässt sich die neue Komponente mit dem Befehl
<TelerikPager Total="@Games.Count" PageSize="@PageSize" @bind-Page="@Page"></TelerikPager>. Pager verfügt auch optional über ein Two-Way-Binding, wodurch Anpassungen an einem Element ein damit verknüpftes anderes Element automatisch auf den neuesten Stand bringen. Die Funktionalität lässt sich aufrufen wie folgt:

<div class="mb-3">
    <label class="text-info">
        Select a page:
        <TelerikNumericTextBox @bind-Value="@Page" />
    </label>
</div>
<TelerikPager Total="30" PageSize="@PageSize" @bind-Page="@Page" />
@code {
    public int PageSize { get; set; } = 3;
    public int Page { get; set; } = 1;
}

Ebenfalls neu ist die Checklisten-Option, die sich durch Hinzufügen des Tags TelerikCheckbox ergänzen lässt. Label und Bind-Value lassen sich wie folgt setzen:

<TelerikCheckBox Id="myCheckbox " @bind-Value="@isChecked" />
<label for="myCheckbox ">@( isSelected ? "Checked" : "Not Checked" )</label>

@code
{
    private bool isChecked { get; set; }
}

Weitere Änderungen betreffen Grid-Features wie das Einbinden von Frozen Columns, die Auswahl mehrerer Reihen mit einem neuen SelectAllMode und das Editieren von Grid-Items aus dem Code.

Interessierte Entwickler können die vorgestellten Neuerungen im Detail der Ankündigung entnehmen. Die neue Version des UI for Blazor lässt sich auf der Firmenseite herunterladen. Zum Einstieg bietet Telerik auch einen Blazor-Leitfaden als kostenloses E-Book an. (sih)