Lassen Sie Benutzer ihr eigenes Dashboard bauen, indem sie Kacheln mit Maus, Berührung oder Tastatur verschieben und in der Größe ändern.
Warum es hilft
- Kacheln verschieben und Größe ändern
- Tastaturunterstützung
- Eigener Kachelinhalt
Wo es passt
- Dashboards
- Startseiten
- Überwachung
Beispiel
<DashboardLayout Label="Sales dashboard" OnLayoutChanged="Changed">
<DashboardTile Id="revenue" Title="Revenue" Column="1" Row="1" ColumnSpan="4" RowSpan="2">
<Statistic Label="This month" Value="48,200" />
</DashboardTile>
<DashboardTile Id="trend" Title="Trend" Column="5" Row="1" ColumnSpan="8" RowSpan="3">
<LineChart Label="Orders" Width="560" Height="200" Categories="@(["Jan", "Feb", "Mar", "Apr"])" Series="@([new ChartSeries("Orders", [12, 18, 15, 24])])" />
</DashboardTile>
<DashboardTile Id="share" Title="Status" Column="1" Row="3" ColumnSpan="4" RowSpan="2">
<Gauge Label="Target" Value="72" Unit="%" />
</DashboardTile>
</DashboardLayout>
<p>@_message</p>
@code {
private string _message = "Drag a title to move a tile, drag its corner to resize.";
private void Changed(IReadOnlyList<DashboardPlacement> placements) =>
_message = string.Join(", ", placements.Select(p => $"{p.Id}: column {p.Column}, row {p.Row}, {p.ColumnSpan} x {p.RowSpan}"));
}Ein kurzes Fragment. Fügen Sie @using RayCraft.Blazor.Components zu Ihrer Seite hinzu und nutzen Sie einen interaktiven Render-Modus.
Teil von RayCraft Complete.